Web Components Hierarchical Grid の Excel スタイル フィルタリング

Web Components Hierarchical Grid は、Excel のようなフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。

Web Components Hierarchical Grid Excel スタイル フィルタリングの例

使用方法

IgcHierarchicalGrid コンポーネントの Excel スタイル フィルタリングをオンにするには、2 つの入力を設定します。AllowFiltering を true に設定し、FilterMode を ExcelStyleFilter に設定してください。

<igc-hierarchical-grid auto-generate="true" allow-filtering="true" filter-mode="excelStyleFilter" >
</igc-hierarchical-grid>

インタラクション

特定の列のフィルター メニューを開くには、ヘッダーの Web Components フィルター アイコンをクリックします。さらに、選択したヘッダーで CTRL + SHIFT + L の組み合わせを使用できます。列でフィルタリング機能とソート、ピン固定、移動、選択、非表示が設定された場合、オンになっている機能のボタンが表示されます。

フィルターが適用されていない場合、リストのすべての項目が選択されます￥。リストの上の入力からフィルターされます。データのフィルターは、リストで項目を選択/非選択して [適用] ボタンをクリックするか、あるいは ENTER を押します。リスト項目に適用したフィルタリングは、equals オペレーターでフィルター式を作成します。各式間のロジック オペレーターは OR です。

検索ボックスに入力してフィルターを適用すると、検索条件に一致する項目のみが選択されます。ただし、現在フィルターされている項目に項目を追加したい場合は、[現在の選択をフィルターに追加] オプションを選択する必要があります。

フィルターをクリアしたい場合、[すべて選択] オプションをチェックして [適用] ボタンを押します。

異なる式でフィルターを適用する場合、テキスト フィルターをクリックし、特定の列で使用できるフィルター演算子のサブメニューを開きます。いずれかを選択してカスタム フィルター ダイアログを開き、フィルターとロジック演算子を使用して式を追加できます。[クリア] ボタンでフィルターをクリアできます。

メニュー機能の構成

ソート、ピン固定、および非表示機能は、対応する入力を使用してフィルター メニューから削除できます: Sortable、Selected、DisablePinning、DisableHiding。

<igc-hierarchical-grid auto-gGenerate="false" moving="true" allow-filtering='true' filter-mode="ExcelStyleFilter"
    height="650px" width="100%" id="hierarchicalGrid">
    <igc-column field="Artist" filterable='true' sortable="true"></igc-column>
    <igc-column field="Photo" filterable='false'></igc-column>
    <igc-column field="Debut" filterable='true' disable-pinning="true" disable-hiding="true"></igc-column>
    <igc-column field="GrammyNominations" header="Grammy Nominations" filterable='true' date-type="Number" sortable="false"></igc-column>
    <igc-column field="GrammyAwards" header="Grammy Awards" filterable='true' date-type="Number"></igc-column>
    <!-- ... -->
</igc-hierarchical-grid>

下のサンプルでは、「Artist」 列では 3 つの機能がすべて有効化され、「Debut」 では 3 つすべてが無効化され、「Grammy Nominations」 ではピン固定と非表示のみが設定されています。

テンプレート

Excel スタイル フィルター メニューをさらにカスタマイズする場合は、ExcelStyleHeaderIconTemplate プロパティを使用して、メニューのヘッダー アイコンのカスタム テンプレートを定義できます。

次のコードは、ExcelStyleHeaderIconTemplate を使用して Excel スタイル フィルター メニューをカスタマイズする方法を示しています。

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcHierarchicalGridComponent;
    grid.excelStyleHeaderIconTemplate = this.webGridFilterAltIconTemplate;
}

public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
    return html`<img height="15px" width="15px" src="http://static.infragistics.com/xplatform/images/grid/propeller-logo.svg" title="Continued" alt="Continued" />`
}

<igc-hierarchical-grid class="hgrid" auto-generate="false" allow-fFiltering='true' filter-mode="ExcelStyleFilter"
    height="650px" width="100%" row-height="65px" id="hierarchicalGrid">

    <igc-grid-excel-style-filtering min-height="380px" max-height="500px">
        <igc-excel-style-column-operations>
            <igc-excel-style-header
                show-pinning="true"
                show-hiding="true"
            >
            </igc-excel-style-header>

            <igc-excel-style-sorting></igc-excel-style-sorting>
        </igc-excel-style-column-operations>

        <igc-excel-style-filter-operations>
            <igc-excel-style-search></igc-excel-style-search>
        </igc-excel-style-filter-operations>
    </igc-grid-excel-style-filtering>
    <igc-row-island key="Albums" auto-generate="false" allow-fFiltering='true' filter-mode="ExcelStyleFilter">
        <igc-grid-excel-style-filtering min-height="380px" max-height="500px">
            <igc-excel-style-column-operations>
                <igc-excel-style-header
                    show-pinning="true"
                    show-hiding="true"
                >
                </igc-excel-style-header>

                <igc-excel-style-sorting></igc-excel-style-sorting>
            </igc-excel-style-column-operations>

            <igc-excel-style-filter-operations>
                <igc-excel-style-search></igc-excel-style-search>
            </igc-excel-style-filter-operations>
        </igc-grid-excel-style-filtering>

</igc-hierarchical-grid>

デモ

<igc-hierarchical-grid class="grid"></igc-hierarchical-grid>

Then set the related CSS properties to this class:

.grid {
    --ig-grid-filtering-row-background: #ffcd0f;
    --ig-list-item-background: #ffcd0f;
}

スタイル設定

デモ

API リファレンス

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub