IgbTreeGrid – 展開インジケーターの表示をカスタマイズする

Ignite UI for Blazor が提供するツリーグリッドコンポーネント、IgbTreeGrid には、下図のように、各行の展開状態を示す「展開インジケーター」がアイコン表示されています。

この展開インジケーターに表示される要素は、以下のように JavaScript プログラムを組み合わせることでカスタマイズできます。

まずは以下の例のような JavaScript プログラムを記述し、ファイル (.js) に保存、その JavaScript ファイルを、wwwroot/index.html などのフォールバックページから script 要素で読み込んでおきます。

(() => {
    // アイコン表示要素を組み立てて返す関数です。
    // 引数に、アイコン名を取ります。
    const createIconElement = (iconName) => {
        const div = document.createElement("igx-icon");
        div.classList.add("material-icons");
        div.classList.add("igx-icon");
        div.textContent = iconName;
        div.style.pointerEvents = "none";
        return div;
    }

    // 折り畳まれている行に表示するアイコン要素を返す関数を、
    // "rowCollapsedIndicator" という名前で Ignite UI for Blazor に登録します。
    igRegisterScript("rowCollapsedIndicator", 
        () => createIconElement("add_circle"), false);

    // 展開されている行に表示するアイコン要素を返す関数を、
    // "rowExpandedIndicator" という名前で Ignite UI for Blazor に登録します。
    igRegisterScript("rowExpandedIndicator", 
        () => createIconElement("do_not_disturb_on"), false);
})();

その上で、上記 JavaScript で登録しておいた展開インジケーター表示要素を返す各スクリプトのスクリプト名を、IgbTreeGrid の RowCollapsedIndicatorTemplateScript および RowExpandedIndicatorTemplateScript パラメーターに指定します (下記はその例)。

...
<IgbTreeGrid ...
  RowCollapsedIndicatorTemplateScript="rowCollapsedIndicator"
  RowExpandedIndicatorTemplateScript="rowExpandedIndicator">
  ...
</IgbTreeGrid>

以上の実装を施すことで、展開インジケーターを描画する際には、こうして登録しておいた JavaScript プログラムが呼び出され、その JavaScript プログラムによって構築・返された要素が展開インジケーターとして表示されるようになります (下図は上記実装例を実行した様子)。

なお、登録したスクリプトでは、上記例にあるような igx-icon 要素に限らず、要件にあわせて任意の要素を構築して返すことができます。ただし、展開インジケーターのクリックによる開閉動作を阻止しないよう、このカスタマイズ用のスクリプトから返す要素では、pointer-events CSS プロパティを “none” に設定する必要があります。

実際の動作サンプルはこちらで確認できます。