데이터 필터링(Filtering)

자동 필터링이 아닌 필터 목록을 개발자가 직접 설정하고 적용할 수 있습니다.
그리드 FilteringOptions.enabled 가 true이고, 컬럼에 filter들이 설정되면 컬럼 헤더에 필터 핸들이 표시되고, 사용자는 그 핸들을 클릭해서 표시되는 필터 리스트를 이용 컬럼 별로 데이터를 필터링할 수 있습니다.

한 컬럼 내에서 복수 필터가 선택되면 필터셋 중 하나의 필터 조건에만 해당되어도 행들이 표시됩니다. 하지만 여러 컬럼에 필터가 설정되면 모든 컬럼의 필터셋에 해당되는 행들만이 표시됩니다.

필터 등록, 필터 제거

컬럼에 setFilters()로 컬럼필터를 적용하고 clearFilters()로 필터를 제거할 수 있습니다.

//필터 적용
var filters = [
  {
    name: "모잠비크",
    criteria: "value = '모잠비크'"
  },
  {
    name: "캐나다",
    criteria: "value = '캐나다'"
  }
  //...생략...
];
gridView.setColumnFilters("KorCountry", filters);

//필터 제거
gridView.clearColumnFilters("KorCountry");

필터 추가 등록, 일부 제거

기존 필터 목록에 추가로 필터를 등록하거나 필터를 제거 할 수 있습니다.

투자국가의 기존 필터 목록에 추가로 '우크라이나', '브라질', '페루'를 추가해보도록 하겠습니다. 그리고 '모잠비크', '캐나다'는 제거해보도록 하겠습니다.

//필터 추가 등록
var filters = [
  {
    name: "우크라이나",
    criteria: "value = '우크라이나'",
    active: false
  },
  {
    name: "브라질",
    criteria: "value = '브라질'",
    active: true
  },
  {
    name: "페루",
    criteria: "value = '페루'"
  }
];
var overwrite = true; // false면 기존에 같은 이름의 필터가 있을 때 예외 발생.

gridView.addColumnFilters("KorCountry", filters, overwrite);

//필터 모잠비크 캐나다 제거
gridView.removeColumnFilters("KorCountry", ["모잠비크", "캐나다"]);

필터 적용, 필터 해제

특정 필터나 모든 필터들을 적용하고 해제할 수 있습니다.

//모잠비크, 캐나다 필터 적용
gridView.activateColumnFilters("KorCountry", ["모잠비크", "캐나다"], true);

//모잠비크 적용해제
gridView.activateColumnFilters("KorCountry", ["모잠비크"], false);

//모든필터 적용
gridView.activateAllColumnFilters("KorCountry", true);

//모든필터 적용해제
gridView.activateAllColumnFilters("KorCountry", false);

필터 숨기기, 숨김 해제

등록되어 있는 필터 목록 중 특정 필터나 모든 필터들을 숨기거나 숨김 해제 할 수 있습니다. 투자 국가의 모잠비크, 캐나다 필터를 숨기고, 모잠비크 필터를 숨김 해제 하는 것과 모든 필터들을 숨기고 숨김 해제해보도록 하겠습니다.

//모잠비크, 캐나다 숨기기
gridView.hideColumnFilters("KorCountry", ["모잠비크", "캐나다"], true);

//모잠비크 숨김 해제
gridView.hideColumnFilters("KorCountry", ["모잠비크"], false);

//모든필터 숨기기
gridView.hideAllColumnFilters("KorCountry", true);

//모든필터 숨김 해제
gridView.hideAllColumnFilters("KorCountry", false);

필터 토글(toggle)

해당 컬럼의 지정한 필터들을 토글한다. 투자 국가의 모잠비크, 캐나다 필터를 토글하는것과 모든 필터를 토글해 보도록 하겠습니다.

//모잠비크, 캐나다 토글하기
gridView.toggleColumnFilters("KorCountry", ["모잠비크", "캐나다"]);

//모든필터 토글하기
gridView.toggleAllColumnFilters("KorCountry");

필터 조건 함수로 설정

필터링 조건을 함수형태로 설정합니다.

//filter 함수 set
var filterFunc = function(dataProvider, dataRow, level, fieldName, filter, value) {
  if (filter.tag == 1 && value == "모잠비크") {
    return true;
  } else if (filter.tag == 2 && value == "캐나다") {
    return true;
  } else if (filter.tag == 3 && value == "우크라이나") {
    return true;
  } else {
    return false;
  }
};
var filters = [
  {
    name: "filter1",
    text: "모잠비크",
    tag: 1,
    callback: filterFunc
  },
  {
    name: "filter2",
    text: "캐나다",
    tag: 2,
    callback: filterFunc
  },
  {
    name: "filter3",
    text: "우크라이나",
    tag: 3,
    callback: filterFunc
  }
];

gridView.setColumnFilters("KorCountry", filters);

lookup 필터 설정

lookup컬럼 labels값으로 필터링 목록생성 및 검색할 수 있습니다.

gridView.filteringOptions.automating.lookupDisplay = true;

and, or 범위 필터 설정

criteria에 and와 or 를 적용해서 필터링을 설정할 수 있습니다.

'나이'컬럼에 값이 20~50인 필터를 설정합니다. active: true 설정 시 필터 설정과 동시에 필터링이 적용됩니다.

//and 조건 필터
var filters = [
  {
    name: "나이 20~50",
    criteria: "(value > 19) and (value <= 50)",
    active: true
  }
];
gridView.setColumnFilters("Age", filters);

'주문일자'컬럼에 5월과 11월인 값으로 필터를 설정합니다.

//or 조건 필터
var filters = [
  {
    name: "5월과 11월",
    criteria: "(month(value) = 5) or (month(value) = 11)",
    active: true
  }
];
gridView.setColumnFilters("OrderDate", filters);