Blazor 그리드 필터링

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

    Blazor Grid Filtering Example

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

    Setup

    필터링이 활성화되어 있는지, 어떤 필터링 모드를 사용해야 하는지 지정하기 위해 다음IgbGrid 속성 -AllowFiltering,,AllowAdvancedFiltering andFilterMode​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 입력 속성은 참

    <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

    특정 열의 필터 행을 열려면 해당 열의 헤더 아래 '필터' 칩을 클릭해야 합니다. 조건을 추가하려면 입력 왼쪽의 드롭다운에서 필터 피연산자와 값을 입력하세요. 숫자와 날짜 열은 기본적으로 'Equals'가 선택되며, 문자열은 'Contains', 불리언은 'All'이 선택됩니다. '엔터' 버튼을 누르면 조건이 확인되고 이제 다른 조건을 추가할 수 있습니다. 'condition' 칩 사이에는 논리 연산자를 결정하는 드롭다운이 있으며, 기본적으로 '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.

    Initial filtered state

    초기 필터링 상태를IgbGrid 설정하려면 다음을 설정하세요.IgbGrid FilteringExpressionsTree 각 열에 대해 필터링할 수 있는 배열FilteringExpressionsTree에 속성이 있습니다.

    <IgbGrid
    FilteringExpressionsTree="filteringExpressions"
    AllowFiltering="true"
    FilterMode="FilterMode.QuickFilter">
</IgbGrid>

@code {

    protected override async Task OnInitializedAsync()
    {
        IgbFilteringExpressionsTree gridFilteringExpressionsTree = new IgbFilteringExpressionsTree() { Operator = FilteringLogic.And };

        IgbFilteringExpression categoryFilteringExpressionsTree = new IgbFilteringExpression()
            {
            FieldName = "Category",
            ConditionName = "contains",
            IgnoreCase = true,
            SearchVal = "Metals"
        };

        IgbFilteringExpression typeFilteringExpressionsTree = new IgbFilteringExpression()
        {
            FieldName = "Type",
            ConditionName = "contains",
            IgnoreCase = true,
            SearchVal = "e"
        };

        gridFilteringExpressionsTree.FilteringOperands = new IgbFilteringExpression[2] { categoryFilteringExpressionsTree, typeFilteringExpressionsTree };

        filteringExpressions = gridFilteringExpressionsTree;
    }

    public IgbFilteringExpressionsTree filteringExpressions;
}

    Filtering logic

    의FilteringLogic 속성은IgbGrid 여러 열을 필터링하는 방식이 어떻게 해결IgbGrid 될지 제어합니다. API나 입력 속성을 통해IgbGrid​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

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