Blazor 그리드 필터링

    Blazor Grid의 Ignite UI for Blazor는 특정 기준이나 조건에 따라 데이터를 선택적으로 표시하거나 숨길 수 있는 기능입니다. IgbGrid 구성 요소가 풍부한 필터링 API와 모든 필터링 기능을 제공하는 바인딩된 데이터 컨테이너가 있습니다. 여기에서 사용 가능한 필터링 유형은 세 가지입니다.

    Blazor Grid Filtering Example

    아래 샘플은 IgbGrid의 Quick Filter 사용자 경험을 보여줍니다.

    Setup

    필터링이 활성화되었는지 여부와 어떤 필터링 모드를 사용해야 하는지 지정하기 위해 IgbGrid​ ​AllowFiltering, AllowAdvancedFiltering, FilterMode 및 Filterable 속성을 노출합니다.

    속성 AllowFiltering 사용하면 다음 옵션을 지정할 수 있습니다.

    • false- 해당 그리드에 대한 필터링이 비활성화됩니다. 이것이 기본값입니다.
    • true- 해당 그리드에 대한 필터링이 활성화됩니다.

    ​AllowAdvancedFiltering 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

    • false- 해당 그리드에 대한 고급 필터링이 비활성화됩니다. 이것이 기본값입니다.
    • true- 해당 그리드에 대한 고급 필터링이 활성화됩니다.

    ​FilterMode 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

    • QuickFilter- 단순한 필터링 UI입니다. 이것이 기본값입니다.
    • ExcelStyleFilter- Excel과 유사한 필터링 UI입니다.

    ​Filterable 속성을 사용하면 다음 옵션을 지정할 수 있습니다.

    • true- 해당 열에 대한 필터링이 활성화됩니다. 이것이 기본값입니다.
    • false- 해당 열에 대한 필터링이 비활성화됩니다.
    <IgbGrid Data=data AutoGenerate=false AllowFiltering=true>
    <IgbColumn Field="ProductName" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Price" DataType="GridColumnDataType.Number" Filterable=false></IgbColumn>
</IgbGrid>

    활성화하려면 고급 필터링 그러나 AllowAdvancedFiltering input 속성을 참.7

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

    [!Note] You can enable both the QuickFilter or 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.

    Interaction

    특정 열에 대한 필터 행을 열려면 헤더 아래의 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽의 드롭다운을 사용하여 필터 피연산자를 선택하고 값을 입력해야 합니다. 숫자 및 날짜 열의 경우 기본적으로 '같음'이 선택되고, 문자열의 경우 '포함', 부울의 경우 '모두'가 선택됩니다. 'Enter'를 누르면 조건이 확인되고 이제 다른 조건을 추가할 수 있습니다. '조건' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며 기본적으로 'AND'가 선택됩니다. 조건을 제거하려면 칩의 'X' 버튼을 클릭하고, 편집하려면 칩을 선택해야 하며 입력이 칩의 데이터로 채워집니다. 필터 행이 열려 있는 동안 필터링 가능한 열의 헤더를 클릭하여 선택하고 필터 조건을 추가할 수 있습니다.

    일부 필터링 조건이 열에 적용되고 필터 행이 닫혀 있는 동안 칩의 닫기 버튼을 클릭하여 조건을 제거하거나 칩 중 하나를 선택하여 필터 행을 열 수 있습니다. 모든 조건을 표시할 공간이 충분하지 않은 경우 추가 조건 수를 나타내는 배지와 함께 필터 아이콘이 표시됩니다. 필터 행을 열기 위해 클릭할 수도 있습니다.

    Usage

    개발자가 자체 구현으로 대체할 수 있는 모든 표준 필터링 조건은 물론 기본 필터링 전략도 기본적으로 제공됩니다. 또한 사용자 정의 필터링 조건을 쉽게 연결할 수 있는 방법도 제공했습니다. IgbGrid는 현재 단순한 필터링 UI뿐만 아니라 보다 복잡한 필터링 옵션도 제공합니다. 열의 설정된 DataType에 따라 올바른 필터링 작업 집합이 필터 UI 드롭다운 내에 로드됩니다. 또한 IgnoreCase 및 초기 Condition 속성을 설정할 수 있습니다.

    필터링 기능이 활성화되었습니다. IgbGrid 구성 요소를 설정하여 AllowFiltering 입력 진실. 기본값 FilterMode ~이다 QuickFilter 그리고 그것 할 수 없다 런타임이 변경됩니다. 특정 열에 대해 이 기능을 비활성화하려면 –Filterable 입력 거짓.

    <IgbGrid Data=data AutoGenerate=false AllowFiltering=true>
    <IgbColumn Field="ProductName" DataType="GridColumnDataType.String"></IgbColumn>
    <IgbColumn Field="Price" DataType="GridColumnDataType.Number" Filterable=false></IgbColumn>
</IgbGrid>

    [!Note] If values of type string are used by a column of data type date, the IgbGrid won't parse them to date objects and using filtering conditions won't be possible. If you want to use string objects, additional logic should be implemented on the application level, in order to parse the values to date objects.

    Filtering logic

    ​IgbGrid의 FilteringLogic 속성은 IgbGrid에서 여러 열 필터링을 해결하는 방법을 제어합니다. IgbGrid API 또는 IgbGrid 입력 속성을 통해 언제든지 변경할 수 있습니다.

     <IgbGrid FilteringLogic="FilteringLogic.Or"></IgbGrid>

    ​AND의 기본값은 현재 적용된 모든 필터링 표현식과 일치하는 행만 반환합니다. 위의 예에 따르면 'ProductName' 셀 값에 'myproduct'가 포함되고 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

    ​OR로 설정하면 'ProductName' 셀 값에 'myproduct'가 포함되거나 'Price' 셀 값이 55보다 큰 경우 행이 반환됩니다.

    Styling

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

    <IgbGrid Class="grid"></IgbGrid>

    그런 다음 해당 클래스에 대한 관련 CSS 속성을 설정합니다.

    .grid {
    --ig-grid-filtering-row-text-color: #292826;
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-grid-filtering-header-text-color: #292826;
    --ig-grid-filtering-header-background: #ffcd0f;
}

    Demo

    Known Limitations

    [!Note] Some browsers such as Firefox fail to parse regional specific decimal separators by considering them grouping separators, thus resulting in them being invalid. When inputting such values for a numeric column filter value, only the valid part of the number will be applied to the filtering expression. For further information, refer to the Firefox issue.

    API References

    Additional Resources

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