Blazor Grid 고급 필터링

Blazor 그리드의 Ignite UI for Blazor 고급 필터링은 모든 열IgbGrid에 걸쳐 필터링 조건이 적용된 다양한 그룹을 생성할 수 있는 대화 상자를 통해 데이터를 조작할 수 있게 해줍니다.

Blazor Grid Advanced Filtering Example

Interaction

고급 필터링 대화 상자를 열려면 그리드 도구 모음에서 고급 필터링 버튼을 클릭해야 합니다. 고급 필터가 적용되지 않은 경우 AND 또는 OR로 연결된 필터링 조건 그룹을 만드는 것부터 시작해야 합니다. 그런 다음 필터링 조건이나 하위 그룹을 추가할 수 있습니다.

필터링 조건을 추가하려면 열 중Filterable 하나를 선택해야 하며, 열DataType에 기반한 피연산자와 단일항이 아닌 경우 값을 선택해야 합니다. 조건이 커밋되면 조건 정보가 담긴 칩이 나타납니다. 칩을 마우스로 올리거나 클릭하면 수정하거나 바로 뒤에 다른 조건이나 그룹을 추가할 수 있습니다.

필터링 조건 칩을 두 개 이상 선택하면 그룹을 생성하거나 필터를 삭제할 수 있는 옵션이 포함된 컨텍스트 메뉴가 나타납니다. 선택한 조건으로 그룹을 생성하도록 선택한 경우 새로 생성된 그룹은 최상위 선택된 조건이 배치된 위치에 나타납니다.

그룹을 선택하려면 연결 조건 AND 또는 OR에 따라 색상이 지정된 수직선을 클릭할 수도 있습니다. 단일 그룹을 선택하면 필터링 논리를 변경하거나 그룹을 해제하거나 삭제할 수 있는 옵션이 포함된 상황에 맞는 메뉴가 표시됩니다.

필터링 조건 및 그룹을 생성할 준비가 된 후 데이터를 필터링하려면 적용 버튼을 클릭해야 합니다. 고급 필터를 수정했지만 변경 사항을 유지하지 않으려면 취소 버튼을 클릭해야 합니다. 필터 지우기 버튼을 클릭하여 고급 필터를 지울 수도 있습니다.

Usage

고급 필터링AllowAdvancedFiltering을 활성화하려면 입력 속성을 true로 설정해야 합니다.

<IgbGrid Data=data AutoGenerate="true" AllowAdvancedFiltering="true">
    <IgbGridToolbar></IgbGridToolbar>
</IgbGrid>

고급 필터링은 입력 속성에FilteringExpressionsTree 저장되는 를AdvancedFilteringExpressionsTree 생성합니다. 고급 필터링의 초기 상태를 설정할 수 있는 속성도AdvancedFilteringExpressionsTree 사용할 수 있습니다.

툴바를IgbGrid 보여주고 싶지 않다면, andOpenAdvancedFilteringDialog 메서드를CloseAdvancedFilteringDialog 사용해 고급 필터링 대화상자를 프로그래밍적으로 열고 닫을 수 있습니다.

[!Note] You can enable both the QuickFilter/ExcelStyleFilter and the advanced filtering user interfaces in the IgbGrid. Both filtering user interfaces will work independently of one another. The final filtered result in the IgbGrid is the intersection between the results of the two filters.

Styling

사전 정의된 테마 외에도 사용 가능한 CSS 속성 중 일부를 설정하여 그리드를 추가로 사용자 정의할 수 있습니다. 일부 색상을 변경하려면 먼저 그리드에 대한 클래스를 설정해야 합니다.

<IgbGrid class="grid"></IgbGrid>

그런 다음 관련 CSS 속성을 이 클래스로 설정합니다.

.grid {
    --ig-query-builder-header-foreground: #512da8;
    --ig-query-builder-color-expression-group-and: #eb0000;
    --ig-query-builder-color-expression-group-or: #0000f3;
    --ig-query-builder-subquery-header-background: var(--ig-gray-300);
    --ig-query-builder-subquery-border-color: var(--ig-warn-500);
    --ig-query-builder-subquery-border-radius: 4px;
}

Demo

API References

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.