Angular Grid 選択の概要

    Ignite UI for Angular Grid を使用して、さまざまなイベント、豊富な API、または単一選択などのシンプルなマウス操作でデータを簡単に選択できます。

    Angular Grid 選択の例

    以下のサンプルは、Grid のセル選択動作の 3 つのタイプを示します。以下のボタンを使用して、使用可能な各選択モードを有効にします。Snackbar メッセージ ボックスで各ボタンの操作について簡単に説明します。

    Angular Grid 選択のオプション

    Ignite UI for Angular Grid コンポーネントは、行選択セル選択列選択の 3 つの選択モードを提供します。デフォルトでは、Grid で複数セル選択モードのみが有効になっています。選択モードを変更/有効化するには、rowSelectioncellSelection 、または selectable プロパティを使用できます。

    Angular 行選択

    rowSelection プロパティを使用すると、次のオプションを指定できます。

    • none - Grid の行選択が無効になります。
    • single - Grid 内の 1 行のみの選択が利用可能になります。
    • multiple - 複数行の選択は、ctrl + clickspace キーを押して行セレクターを使用することにより、複数行の選択が可能になります。

    詳細については、行選択トピックを参照してください。

    Angular セル選択

    以下のオプションは、プロパティ cellSelection で指定できます。

    • none - Grid のセル選択が無効になります。
    • single - Grid 内の 1 セルのみ選択が利用可能になります。
    • multiple - Grid の選択のデフォルト状態です。Multi - セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。

    詳細については、セル選択トピックを参照してください。

    Angular 列選択

    selectable プロパティ を使用して、ごとに以下のオプションを指定できます。

    • False - 対応する列選択は Grid に対して無効になります。
    • True - 対応する列選択は Grid に対して有効になります。
    • 以下の 3 つのバリエーションがあります。
      • 単一選択 - 列セルをマウス クリックします。
      • 複数列の選択 - Ctrl キーを押しながら列セルをマウス クリックします。
      • 列の範囲選択 - Shift キーを押しながら + マウス クリック、その間のすべての列が選択されます。

    詳細については、列選択トピックを参照してください。

    グリッドのコンテキスト メニュー

    onContextMenu イベントは、カスタム コンテキスト メニューを追加して、IgxGrid での作業をアシストします。グリッドの本体を右クリックすると、イベントはトリガーされたセルを放出します。コンテキスト メニューは、放出されたセルで動作します。

    複数セルの選択がある場合、選択したセルが複数セルの選択領域にあるかどうかをチェックするロジックを配置します。その場合、選択したセルの値も出力します。

    基本的に、メイン関数は次のようになります。

    ...
     public rightClick(eventArgs: any) {
         // Prevent the default behavior of the right click
        eventArgs.event.preventDefault();
        this.multiCellArgs = {};
        // If we have multi-cell selection, check if selected cell is within the ranges
        if (this.multiCellSelection) {
            const node = eventArgs.cell.selectionNode;
            const isCellWithinRange = this.grid1.getSelectedRanges().some(range => {
                if (node.column >= range.columnStart &&
                    node.column <= range.columnEnd &&
                    node.row >= range.rowStart &&
                    node.row <= range.rowEnd) {
                    return true;
                }
                return false;
            })
            // If the cell is within a multi-cell selection range, bind all the selected cells data
            if (isCellWithinRange) {
                this.multiCellArgs = { data: this.multiCellSelection.data };
            }
        }
        // Set the position of the context menu
        this.contextmenuX = eventArgs.event.clientX;
        this.contextmenuY = eventArgs.event.clientY;
        this.clickedCell = eventArgs.cell;
        // Enable the context menu
        this.contextmenu = true;
    }
    ...
    

    以下はコンテキストメニューの機能です。

    • 選択したセルの値のコピー。
    • 選択したセルの dataRow のコピー。
    • 選択したセルが複数セルの選択範囲内にある場合、選択したすべてのデータをコピーします
    //contextmenu.component.ts
    ...
        public copySelectedCellData(event) {
            const selectedData = { [this.cell.column.field]: this.cell.value };
            this.copyData(JSON.stringify({ [this.cell.column.field]: this.cell.value }));
            this.onCellValueCopy.emit({ data: selectedData });
        }
    
        public copyRowData(event) {
            const selectedData = this.cell.row.data ;
            this.copyData(JSON.stringify(this.cell.row.data));
            this.onCellValueCopy.emit({ data: selectedData });
        }
    
        public copySelectedCells(event) {
            const selectedData = this.selectedCells.data;
            this.copyData(JSON.stringify(selectedData));
            this.onCellValueCopy.emit({ data: selectedData });
        }
    ...
    

    IgxGrid はコピーされたデータを取得し、コンテナ要素に貼り付けます。

    グリッドとコンテキスト メニューを組み合わせるために使用するテンプレート:

    <div class="wrapper">
        <div class="grid__wrapper" (window:click)="disableContextMenu()">
            <igx-grid #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
                (onContextMenu)="rightClick($event)" (onRangeSelection)="getCells($event)"
                (onSelection)="cellSelection($event)">
            <!-- Columns area -->
            </igx-grid>
            <div *ngIf="contextmenu==true">
                <contextmenu [x]="contextmenuX" [y]="contextmenuY" [cell]="clickedCell" [selectedCells]="multiCellArgs" (onCellValueCopy)="copy($event)">
                </contextmenu>
            </div>
        </div>
        <div class="selected-data-area">
            <div>
               <pre>{{copiedData}}</pre>
            </div>
        </div>
    </div>
    

    複数のセルを選択し、マウスの右ボタンを押します。コンテキストメニューが表示され、セルデータのコピーを選択すると、選択したデータが右側の空のボックスに表示されます。 結果:

    既知の問題と制限

    • IE11 で選択を有効にした Grid コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。

      import 'core-js/es7/array';
      

    API リファレンス

    その他のリソース

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