Blazor グリッド フィルターの概要

Blazor Data Table / Data Grid には、フィルター処理される列のデータ型に基づいてソート条件を実行する機能を提供する列フィルター API が含まれています。

Blazor グリッド フィルターの例

コード スニペット

フィルターのコレクションに追加するための FilterExpression を作成します。

<DataGrid Height="100%" Width="100%"
          @ref="DataGridRef"          
          DataSource="DataSource" />

@code {

    public DataGrid DataGridRef;

    public string FilterText = "";
    public string FilterMode = "Contains";
    public string FilterColumn = "Name";

    public FilterFactory FilterFactory = new FilterFactory();

    protected override void OnInitialized()
    {
        base.OnInitialized();
        DataGridModule.Register(IgniteUIBlazor);
        GridColumnOptionsModule.Register(IgniteUIBlazor);
        GridColumnFilterOptionsModule.Register(IgniteUIBlazor);        
    }

    public void OnFilterTextChanged(ChangeEventArgs e)
    {
        this.FilterText = e.Value.ToString();
        this.ApplyFilter();
    }

    public void OnFilterModeChanged(ChangeEventArgs e)
    {
        this.FilterMode = e.Value.ToString();
        this.ApplyFilter();
    }

    public void OnFilterColumnChanged(ChangeEventArgs e)
    {
        this.FilterColumn = e.Value.ToString();
        this.ApplyFilter();
    }

    public void ApplyFilter()
    {
        this.DataGridRef.FilterExpressions.Clear();

        if (this.FilterText == "")
        {
            return;
        }

        string expression = this.FilterText.ToUpper();

        FilterExpression column = this.FilterFactory.Property(this.FilterColumn).ToUpper();

        FilterExpression filter = new FilterExpression();

        switch (this.FilterMode)
        {
            case "Contains":
                {
                    filter = column.Contains(expression);
                    break;
                }
            case "StartsWith":
                {
                    filter = column.StartsWith(expression);
                    break;
                }
            case "EndsWith":
                {
                    filter = column.EndsWith(expression);
                    break;
                }
        }

        this.DataGridRef.FilterExpressions.Add(filter);

        StateHasChanged();
    }
}