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

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

데이터 필터링(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);