複数選択の階層ドロップダウン

    次のサンプルは、ユーザーがツリー スタイルの階層ドロップダウン リストから 1 つまたは複数のオプションを選択できるようにする複数選択の階層ドロップダウンを作成する方法を示しています。

    トピックの概要

    ドロップダウン リストには、IgxDropDownComponent とドロップダウンを開閉するための IgxToggleActionDirective を使用する予定です。

    ドロップダウンで階層データを視覚化するには、IgxTreeComponent または IgxTreeGridComponent のいずれかを使用できます。

    IgxChipComponent は、選択した項目を表示するために使用されます。

    選択

    リストから選択したノード/行を表示するには、選択の変更を通知するイベントを処理して IgxChipComponent を使用し、selectedNodes / selectedRows 配列を設定します。これは、IgxTreeComponent の nodeSelection イベントと IgxTreeGridComponent の rowSelectionChanging イベントをサブスクライブすることで実行できます。

    DOM からチップを削除し、ツリー/グリッドから項目を選択解除するには、IgxChipComponent の remove イベントを処理する必要があります。

    さらに、チップの削除時にドロップダウンが閉じないようにする方法は、イベントの複合パスで igx-chip ノードを確認し、IgxDropDownComponent の closing イベント ハンドラーでイベントをキャンセルすることです。

    デモ

    Note

    最初に開いた Dropdown コンポーネントを表示するには、open メソッドを requestAnimationFrame メソッドのコールバックとして設定することをお勧めします。これにより、DOM ツリーが再描画され、すべての要素が正しく配置されるようになります。

    API リファレンス

    その他のリソース

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