Angular Grid の選択

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

Angular Grid 選択の例

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

Angular Grid 選択のオプション

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

Angular 行選択

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

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

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

Angular セル選択

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

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

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

Angular 列選択

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

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

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

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

contextMenu イベントは、カスタム コンテキスト メニューを追加して、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%"
            (contextMenu)="rightClick($event)" (rangeSelected)="getCells($event)"
            (selected)="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 に配列ポリフィルを明示的にインポートする必要があります。IE11 は、バージョン 13.0.0 でサポートされなくなりました。

  import 'core-js/es7/array';

• グリッドに primaryKey が設定されておらず、リモート データ シナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモート サーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:

  • Row Selection
  • Row Expand/collapse
  • Row Editing
  • Row Pinning

API リファレンス

• Grid
• GridCell
• IgxGridComponent スタイル

その他のリソース

• Grid 概要
• 行選択
• セル選択
• ページング
• フィルタリング
• ソート
• 集計
• 列移動
• 仮想化とパフォーマンス

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

• Ignite UI for Angular フォーラム (英語)
• Ignite UI for Angular GitHub (英語)