중요 업데이트 알림사용해보기제품구매도움영상문의
RealGrid2v2.2.0

  • 시작하기
      • 인디케이터
      • 상태바
      • 체크바
      • 컨텍스트 메뉴
      • 토스트 메시지 창
      • 커서
      • 열 고정하기
      • 행 고정하기
      • 선택
      • 같은 값의 셀 생략하기
      • 셀 버튼
      • 팝업 메뉴 버튼
      • 셀 병합
      • Lookup 컬럼
      • 툴팁
      • Lookup 트리
      • 컬럼 만들기
      • 컬럼 속성 변경하기
      • 컬럼 너비 자동 조정
      • 데이터 정렬
      • 컬럼 이동
      • 데이터 필터링
      • 자동 필터링
      • 컬럼 레이아웃(컬럼 그룹핑)
      • 컬럼 너비 조절
      • 헤더 높이
      • 헤더 체크박스 사용
      • 컬럼 푸터
      • HEADER와 FOOTER에 여러줄로 표시하기
      • 상단 요약 표시
      • 행 높이
      • 행 그룹핑
      • 그룹핑 API
      • 행 병합 그룹핑
      • 아이템 모델
      • JSON 데이터 가져오기
      • XML 데이터 가져오기
      • 그리드 Lazy Loading 구현
      • 마스터 디테일 예
      • provider 공유하기
      • 데이터 타입
      • 불린 타입 필드
      • 날짜 타입 필드
      • Subtypes
      • 그리드의 값 가져오기
      • 그리드에 값 넣기
      • 새로운 행 추가
      • 롤백
      • 검색
      • 그리드에서 페이징 처리 1
      • 그리드에서 페이징 처리 2
      • 행 Drag & Drop
      • Grid To Grid
      • 텍스트 렌더러
      • 체크 렌더러
      • 바 렌더러
      • 이미지 렌더러
      • 아이콘 렌더러
      • 도형 렌더러
      • 시그널 렌더러
      • 링크 렌더러
      • HTML 렌더러
      • 바코드 렌더러
      • 커스텀 렌더러 - 이미지버튼
      • 구글차트 연동
      • 시리즈 컬럼
      • 스파크 컬럼
      • 데이터 추가 또는 삽입
      • 데이터 수정
      • 데이터 삭제
      • 행 상태
      • 기본 편집기
      • Bootstrap Date Picker
      • Undo / Redo
      • 복사하기/붙여넣기
      • RealGrid2 스타일
      • 사용자 스타일 - 개요
      • 바디 영역 스타일
      • 헤더, 풋터, 상태바 스타일
      • 셀, 데이터 영역 스타일
      • 편집 영역 스타일
      • styleName 속성 및 콜백
      • 컬럼 동적 스타일
      • 행 동적 스타일
      • 셀 동적 스타일
      • RealGrid2 테마
      • 엑셀 내보내기
      • 행 그룹된 그리드 내보내기
      • 여러 레이아웃으로 구성된 그리드 내보내기
      • 다중 그리드 Excel 내보내기
      • Excel문서에 제목 추가하기
      • Mobile FormView
      • 대량 데이터 불러오기
      • 트리뷰
      • 트리 구현 - Array데이터
      • 트리 구현 - Object데이터
      • 트리 노드 조작하기
      • 트리 아이콘 1
      • 트리 아이콘 2
      • 트리 이벤트
      • 사용자 지정 컬럼 유효성 검사
      • 사용자 지정 행 유효성 검사
      • 전체 유효성 검사
      • 이벤트 발생 순서
      • 클릭 이벤트
      • 하이차트 연동 컬럼 선택
      • 하이차트 연동 컬럼 필터링
      • 하이차트 연동 행 선택
      • amchart 연동 체크 선택
      • amchart 연동 행 선택
      • 필드와 컬럼 일괄 생성
      • SPAN(컬럼그룹)
      • 행 상태에 따른 특정 컬럼 편집 제어
      • CheckBar에서 자식 노드 연동하여 체크하기
      • Excel Import

데이터 필터링(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, 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,
    filterCallback: filterFunc
  },
  {
    name: "filter2",
    text: "캐나다",
    tag: 2,
    filterCallback: filterFunc
  },
  {
    name: "filter3",
    text: "우크라이나",
    tag: 3,
    filterCallback: filterFunc
  }
];
gridView.setColumnFilters(filters);