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