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();
}
}