Premium

Blazor Grid 検索フィルター

Blazor Grid の Ignite UI for Blazor 検索フィルター機能を使用すると、データのコレクション内の値を検索するプロセスが可能になります。この機能のセットアップが簡単になり、検索入力ボックス、ボタン、キーボードナビゲーション、その他の便利な機能を使用して実装できるため、ユーザーエクスペリエンスがさらに向上します。ブラウザーにはネイティブなコンテンツ検索機能がありますが、ほとんどの場合で IgbGrid は表示範囲外の行列を仮想化します。そのため、ネイティブブラウザー検索は DOM の一部でないため仮想化セルでデータを検索できません。IgbGrid では、Blazor Material テーブルベースのグリッドの拡張により、検索 API を使用した仮想コンテンツの検索が可能です。

Blazor 検索の例

次の例は、すべての列と行を検索できる検索入力ボックスと、各列の特定のフィルタリングオプションを備えた IgbGrid を表しています。

Blazor 検索の使用

Grid のセットアップ

グリッドを作成してからデータをバインドします。コンポーネントにカスタムスタイルも追加しました。

<IgbGrid #grid1 id="grid1" [data]="data" [autoGenerate]="false" [allowFiltering]="true">
    <igx-column [field]="'IndustrySector'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'IndustryGroup'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'SectorType'" dataType="string" [sortable]="true"></igx-column>
    <igx-column [field]="'KRD'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'MarketNotion'" dataType="number" [sortable]="true"></igx-column>
    <igx-column [field]="'Date'" dataType="date" [sortable]="true"></igx-column>
</IgbGrid>

<IgbGrid @ref=grid Class="gridSize" Width="100%" Height="480px" AllowFiltering=true AutoGenerate=false Data=marketData>
    <IgbColumn Field="IndustrySector" DataType="GridColumnDataType.String" Sortable=true></IgbColumn>
    <IgbColumn Field="IndustryGroup" DataType="GridColumnDataType.String" Sortable=true></IgbColumn>
    <IgbColumn Field="SectorType" DataType="GridColumnDataType.String" Sortable=true></IgbColumn>
    <IgbColumn Field="KRD" DataType="GridColumnDataType.Number" Sortable=true></IgbColumn>
    <IgbColumn Field="MarketNotion" DataType="GridColumnDataType.Number" Sortable=true></IgbColumn>
</IgbGrid>

@code {
    protected override void OnInitialized()
    {
        base.OnInitialized();
        this.marketData = MarketData.GetData();
    }
}

では、IgbGrid の検索 API の準備をしましょう。検索したテキストの保存、また大文字小文字の区別や完全一致 (またはそのいずれか) に使用するプロパティを作成できます。

public string searchText = "";
public bool caseSensitive = false;
public bool exactMatch = false;

Blazor 検索ボックス入力

検索入力を作成します。新しく作成した入力の Value プロパティに SearchText をバインドし、ValueChanging イベントをサブスクライブすることで、ユーザーによるすべての SearchText の変更を検出できます。これによって IgbGrid.FindNext の FindNext と FindPrev メソッドを使用して SearchText のすべての出現を強調し、次へまたは前 (呼び出すメソッドに基づいて) へスクロールできます。

FindNext と FindPrev メソッドの両方に 3 つの引数があります。

Text: string (検索テキスト)
(オプション) CaseSensitive: boolean (検索で完全一致するかどうか、デフォルト値は false)。
(オプション) ExactMatch: boolean (検索で完全一致するかどうか、デフォルト値は false)。

完全一致で検索した場合、検索 API は SearchText と完全一致 (大文字小文字の区別を含む) するセル値のみ結果としてハイライト表示します。たとえば、文字列 ‘software’ と ‘Software’ は大文字小文字を区別しない場合は完全一致となります。

上記のメソッドは number 値を返します (IgbGrid で指定した文字列が含まれる回数)。

<IgbInput ValueChanging="valueChanging" Value="@searchText" />

検索ボタンの追加

ボタンの各クリックイベントハンドラー内で FindNext と FindPrev メソッドを呼び出して検索や検索結果をナビゲーションするためのボタンを作成します。

<IgbIconButton Variant="IconButtonVariant.Flat" @onclick="PrevSearch">
    <IgbIcon IconName="prev" Collection="material"/>
</IgbIconButton>
<IgbIconButton Variant="IconButtonVariant.Flat" @onclick="NextSearch">
    <IgbIcon IconName="next" Collection="material" />
</IgbIconButton>

@code {
    private IgbGrid grid;
    public void PrevSearch()
    {
        this.grid.FindPrevAsync(this.searchText, this.caseSensitive, this.exactMatch);
    }

    public void NextSearch()
    {
        this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
    }
}

キーボード検索の追加

ユーザーは矢印キーと ENTER キーで結果を移動できます。PreventDefault メソッドのデフォルトキャレットの移動を防止する検索入力の keydown イベントを処理し、ユーザーが押したキーに基づいて FindNext/FindPrev メソッドを呼び出します。

We can also allow the users to navigate the results by using the keyboard’s ENTER key. In order to achieve this, we can handle the keydown event of our search and invoke the FindNext/FindPrev methods depending on if the user has pressed SHIFT as well or not.

<IgbInput ValueChanging="valueChanging" Value="@searchText" @onkeydown="OnSearchKeyDown"/>

@code {
    private void OnSearchKeyDown(KeyboardEventArgs evt)
    {
        if (evt.Key == "Enter" && !evt.ShiftKey) {
            this.grid.FindNextAsync(this.searchText, this.caseSensitive, this.exactMatch);
        } else if (evt.Key == "Enter") {
            this.grid.FindPrevAsync(this.searchText, this.caseSensitive, this.exactMatch);
        }
    }
}

大文字と小文字の区別と完全一致

次に完全一致の検索で大文字と小文字を区別するかどうかをユーザーが選択できるようにします。この目的のために、単純なチェックボックス入力を使用し、その change イベントにバインドして、チェックボックスの checked 状態を使用できます。

<span>Case sensitive</span>
<input id="case" type="checkbox">

<span>Exact match</span>
<input id="exact" type="checkbox">

保持

IgbGrid のフィルターやソート、レコードの追加や削除をする場合を想定します。そのような処理の後、現在の検索が自動的に更新されて SearchText に一致するテキストが保持されます。更に検索がページングで動作し、IgbGrid の PerPage プロパティの変更時もハイライト表示が保持されます。

アイコンの追加

その他のコンポーネントを使用するためにユーザーインターフェイスを作成し、検索バー全体のデザインを向上します。検索入力の左側に検索または削除アイコン、検索オプションのチップ、右側にはマテリアルデザインアイコンと Ripple スタイルのボタンを組み合わせたナビゲーションを表示できます。

IgbInput、IgbIcon、IgbIconButton、IgbChip のモジュールを使用します。

// eg. Program.cs register the following:
builder.Services.AddIgniteUIBlazor(
    typeof(IgbGridModule),
    typeof(IgbInputModule),
    typeof(IgbIconButtonModule),
    typeof(IgbIconModule)
);

// eg. Program.cs register the following:
builder.Services.AddIgniteUIBlazor(
    typeof(IgbGridModule),
    typeof(IgbInputModule),
    typeof(IgbIconButtonModule),
    typeof(IgbIconModule)
);

テンプレートを新しいコンポーネントで更新します。

We will wrap all of our components inside an IgbInput. On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our IgbGrid.FindNext and invoke the IgbGrid‘s ClearSearch method to clear the highlights.

<igx-input-group type="search" class="offset">
    <igx-prefix>
        <igx-icon *ngIf="searchText.length == 0">search</igx-icon>
        <igx-icon *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
    </igx-prefix>

    <input #search1 id="search1" igxInput placeholder="Search" [(ngModel)]="searchText" (ngModelChange)="@@igObjectRef.findNext(searchText, caseSensitive, exactMatch)"
        (keydown)="searchKeyDown($event)" />

    <igx-suffix *ngIf="searchText.length > 0">

    </igx-suffix>
</igx-input-group>

IgbInput 内のすべてのコンポーネントをラップします。左側で検索と削除/クリアアイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに SearchText を更新し、IgbGrid の ClearSearch メソッドを呼び出してハイライト表示をクリアします。

検索結果の表示

constructor() {
    const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
    const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
    const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
    const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";

    registerIconFromText('prev', prevIconText, 'material');
    registerIconFromText('next', nextIconText, 'material');
    registerIconFromText('search', searchIconText, 'material');
    registerIconFromText('clear', clearIconText, 'material');

    this.icon = document.getElementById('icon') as IgcIconComponent;
    this.searchBox = document.getElementById('searchBox') as IgcInputComponent;

    this.searchBox.addEventListener('igcInput', (evt) => {
        this.icon.name = evt.detail ? 'clear' : 'search';
    });
    this.icon.addEventListener('click', this.clearSearch);
}

public clearSearch() {
    this.searchBox.value = '';
    this.icon.name = 'search';
    this.treeGrid.clearSearch();
}

以下は CaseSensitive と ExactMatch プロパティを切り替えるチップを表示する方法です。チェックボックスの代わりにスタイリッシュなチップを 2 つ表示します。チップをクリックすると、どちらのチップがクリックされたかによって各ハンドラーを呼び出します。

constructor() {
    const input = document.getElementById("searchBox") as IgcInputComponent;
    input.addEventListener("change", this.updateSearch);
}
public updateSearch() {
    const grid = document.getElementById('grid') as IgcGridComponent;
    const caseSensitiveChip = document.getElementById('caseSensitiveChip') as IgcChipComponent;
    const exactMatchChip = document.getElementById('exactMatchChip') as IgcChipComponent;
    grid.findNext(input.value, caseSensitiveChip.selected, exactMatchChip.selected);
}

既知の問題と制限

制限	説明
テンプレートを使用したセル内の検索	検索機能のハイライト表示が、デフォルトのセルテンプレートに対してのみ機能する問題。カスタムセルテンプレートを含む列がある場合、ハイライト表示が機能しないため、列フォーマッタなどの代替アプローチを使用するか、`Searchable` (検索可能な) プロパティを false に設定します。
リモート仮想化	リモート仮想化の使用時に検索が正しく動作しません。
セルテキストが切れる問題	セル内のテキストが長すぎるために検索テキストが省略記号によって切れている場合も、セルまでスクロールして一致カウントに含まれますが、ハイライト表示はされません。

API リファレンス

IgbGrid
IgbColumn

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。