GRID FEATURE · PRO

여러 필터 조합

한 열 안에 텍스트 검색과 값 목록 같은 여러 필터를 함께 구성합니다. 서로 다른 열에 각각 필터를 켜는 방식과 다릅니다.

동작 원리와 선택 기준

하위 필터의 선언 순서와 저장 모델의 구조를 함께 관리하세요. 열 정의를 바꾼 뒤 예전 모델을 그대로 복원하면 일부 조건이 맞지 않을 수 있습니다.

이 기능을 제품에서 사용하려면 Pro 패키지와 유효한 라이선스가 필요합니다. 설정 이름이 같더라도 Community에서 Pro 기능이 활성화되는 것은 아닙니다.

코드의 grid는 설치와 연결 장에서 준비한 Grid 요소입니다. 예제마다 필요한 데이터·설정을 확인하고, 코드에서 소개하는 앱 함수와 서버 주소는 프로젝트에 맞게 구현하세요.

제품 열에 이름 일부를 입력하는 조건과 상품 목록 중 선택하는 조건을 함께 둡니다. ColumnFilterDecl의 multi 선언과 parts 구조를 확인해 구성합니다.

결과 확인: Sensor를 포함하면서 선택한 상품에 속하는 행을 찾을 수 있습니다. 하나의 조건을 해제해도 다른 하위 조건은 남습니다.

사용자가 UI에서 만든 복합 조건을 직접 읽어 구조를 확인한 뒤 저장합니다.

javascript

const model = await grid.getFilterModel();
console.log(model);
const report = await grid.setFilterModel(model);
console.log(report);

결과 확인: 유효한 같은 구성의 모델이 재적용됩니다. 입력 모델을 임의 문자열로 조립하지 말고 타입 계약을 따라 다루세요.

조건이 예상보다 좁아졌다면 각 하위 필터를 하나씩 지우고 결과 수를 비교합니다. 전체 초기화는 모든 필터 계열을 해제하는 setFilterModel(null)과 구분합니다.

결과 확인: 어느 조건이 행을 제외했는지 찾을 수 있습니다. 저장 모델과 실제 적용 모델도 비교해 보세요.

하위 필터의 AND/OR 관계와 고급 조건 트리의 AND/OR를 혼동하지 마세요. 실제 허용되는 조합은 해당 필터 타입을 따릅니다.

한 열에 너무 많은 조건을 숨겨 놓으면 사용자가 현재 결과를 이해하기 어렵습니다. 활성 조건을 요약해서 보여 주세요.