Blazor Grid の Excel スタイル フィルタリング
Blazor Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。
Blazor Grid Excel スタイル フィルタリングの例
使用方法
IgbGrid
コンポーネントの Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。AllowFiltering
を true に設定し、FilterMode
を ExcelStyleFilter
に設定してください。
<IgbGrid AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter" >
</IgbGrid>
インタラクション
特定の列のフィルター メニューを開くには、ヘッダーの Blazor フィルター アイコンをクリックします。さらに、選択したヘッダーで Ctrl + Shift + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。
フィルターが適用されていない場合、リストのすべての項目が選択されます¥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは Enter. を押します。リスト項目に適用したフィルタリングは、equals
オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR
です。
検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。
フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。
異なる式でフィルターを適用する場合、テキスト フィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。
メニュー機能の構成
ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルター メニューから削除できます: Sortable
、Selected
、DisablePinning
、DisableHiding
。
<IgbGrid AutoGenerate="false" Data=northwindEmployees AllowFiltering="true" FilterMode="FilterMode.ExcelStyleFilter">
<IgbColumn Field="ProductName" Sortable="true"></IgbColumn>
<IgbColumn Field="UnitPrice" Sortable="true" DisablePinning="true" DisableHiding="true"></IgbColumn>
<IgbColumn Field="QuantityPerUnit" Sortable="false" DisablePinning="true" DisableHiding="true"></IgbColumn>
<IgbColumn Field="OrderDate" Sortable="true" DisablePinning="false" DisableHiding="true"></IgbColumn>
<IgbColumn Field="Discontinued" Sortable="true"></IgbColumn>
</IgbGrid>
以下のサンプルの Product Name と Discontinued 列で 4 つすべての機能が有効です。Quantity Per Unit で 4 機能すべてが無効、Unit Price でソートのみが有効、Order Date でピン固定と非表示のみ有効です。すべてが Selectable
です。
テンプレート
Excel スタイル フィルター メニューをさらにカスタマイズする場合は、ExcelStyleHeaderIconTemplate
プロパティを使用して、メニューのヘッダー アイコンのカスタム テンプレートを定義できます。
次のコードは、ExcelStyleHeaderIconTemplate
を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。
<IgbGrid
Data="Data"
AllowFiltering="true"
FilterMode="FilterMode.ExcelStyleFilter"
ExcelStyleHeaderIconTemplateScript="WebGridFilterAltIconTemplate">
</IgbGrid>
*** In JavaScript ***
igRegisterScript("WebGridFilterAltIconTemplate", (ctx) => {
var html = window.igTemplating.html;
return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}, false);
スタイル設定
定義済みのテーマに加えて、利用可能な CSS プロパティのいくつかを設定することで、グリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbGrid class="grid"></IgbGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-filtering-row-background: #ffcd0f;
--ig-list-item-background: #ffcd0f;
}
デモ
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。