複数選択の階層ドロップダウン
次のサンプルは、ユーザーがツリー スタイルの階層ドロップダウン リストから 1 つまたは複数のオプションを選択できるようにする複数選択の階層ドロップダウンを作成する方法を示しています。
トピックの概要
ドロップダウン リストには、DropDown とドロップダウンを開閉するための IgxToggleActionDirective を使用する予定です。
ドロップダウンで階層データを視覚化するには、Tree または TreeGrid のいずれかを使用できます。
Chip は、選択した項目を表示するために使用されます。
選択
リストから選択したノード/行を表示するには、選択の変更を通知するイベントを処理して Chip を使用し、selectedNodes / selectedRows 配列を設定します。これは、IgxTreeComponent の nodeSelection イベントと IgxTreeGridComponent の rowSelectionChanging イベントをサブスクライブすることで実行できます。
DOM からチップを削除し、ツリー/グリッドから項目を選択解除するには、IgxChipComponent の remove イベントを処理する必要があります。
さらに、チップの削除時にドロップダウンが閉じないようにする方法は、イベントの複合パスで igx-chip ノードを確認し、IgxDropDownComponent の closing イベント ハンドラーでイベントをキャンセルすることです。
デモ
最初に開いた Dropdown コンポーネントを表示するには、open メソッドを requestAnimationFrame メソッドのコールバックとして設定することをお勧めします。これにより、DOM ツリーが再描画され、すべての要素が正しく配置されるようになります。
API リファレンス
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。