Components List

Angular Tree Grid の選択

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

Angular Grid 選択の例

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

import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";
import { TreeGridCellSelectionComponent } from "./tree-grid/tree-grid-cellSelection-sample/tree-grid-cellSelection.component";
import { 
	IgxGridModule,
	IgxSwitchModule,
	IgxIconModule,
	IgxButtonGroupModule,
	IgxAvatarModule,
	IgxTreeGridModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridCellSelectionComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxIconModule,
	IgxSwitchModule,
	IgxButtonGroupModule,
	IgxAvatarModule,
	IgxTreeGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { GridSelectionMode, IgxSnackbarComponent, IgxTreeGridComponent } from 'igniteui-angular';
import { generateEmployeeFlatData } from '../data/employees-flat';

@Component({
    selector: 'app-tree-grid-cell-selection',
    styleUrls: ['./tree-grid-cellSelection.component.scss'],
    templateUrl: 'tree-grid-cellSelection.component.html'
})
export class TreeGridCellSelectionComponent implements OnInit {

    @ViewChild('treegrid', { static: true }) public treeGrid: IgxTreeGridComponent;
    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;

    public data: any[];
    public selection = true;
    public selectionMode: GridSelectionMode = 'multiple';
    public selectionModes = [];

    constructor() { }

    public ngOnInit(): void {
        this.data = generateEmployeeFlatData();
        this.selectionModes = [
            { label: 'none', selected: this.selectionMode === 'none', togglable: true },
            { label: 'single', selected: this.selectionMode === 'single', togglable: true },
            { label: 'multiple', selected: this.selectionMode === 'multiple', togglable: true }
        ];
        this.snackbar.autoHide = false;
        this.snackbar.open();
    }

    public selectCellSelectionMode(args) {
        this.selectionMode = this.selectionModes[args.index].label;
        this.snackbar.open();
    }
}
ts

<div class="grid__wrapper">
    <span class="button-group-wrapper">
        <igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup>
    </span>
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #treeGrid [data]="data" [height]="'530px'" [width]="'100%'" primaryKey="ID" foreignKey="ParentID"
        [cellSelection]="selectionMode">
        <igx-column [field]="'ID'"></igx-column>
        <igx-column [field]="'Name'"></igx-column>
        <igx-column [field]="'Age'" [dataType]="'number'"></igx-column>
        <igx-column [field]="'Title'"></igx-column>
        <igx-column [field]="'HireDate'" [dataType]="'boolean'">
        </igx-column>
        <igx-column [field]="'OnPTO'" [dataType]="'date'"></igx-column>
    </igx-tree-grid>
</div>

<igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
    <div class="container">
        <igx-icon>notification_important</igx-icon>
        <ng-container *ngIf="selectionMode === 'multiple'">
            <ul>
                <li><b>This is the default selection behavior.</b></li>
                <li>Click on a cell and while pressing the mouse key perform drag action.
                </li>
                <li>Select a cell and press Shift + Arrow down key, this will start range selection as well.
                </li>
            </ul>
        </ng-container>
        <ng-container *ngIf="selectionMode === 'single'">
            <ul>
                <li><b>Now you can select only one cell within the grid.</b></li>
                <li>On single cell click the previous selection state will be cleared.</li>
                <li>The mouse drag will not work and instead of selecting a cell, this will make default text
                    selection.</li>
            </ul>
        </ng-container>
        <ng-container *ngIf="selectionMode === 'none'">
            <ul>
                <li><b>Now you are unable to select a cell while interacting with grid UI.</b></li>
                <li>If you need to select a cell, you can use the grid API methods.</li>
            </ul>
        </ng-container>
    </div>
</igx-snackbar>
html

.grid__wrapper {
    display: flex;
    justify-content: space-between;
    margin: 0 16px 24px;
    flex-flow: column;
    align-items: flex-start;
    padding-top: 16px;
    position: relative;
}

.button-group-wrapper {
    margin-bottom: 16px;
}

.igx-snackbar {
    background: rgba(0, 0, 0, 0.7);
}

.container {
    display: flex;
    igx-icon {
        margin: 20px;
    }
}
scss

このサンプルが気に入りましたか? 完全な Ignite UI for Angularツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Angular Grid 選択のオプション

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

Angular 行選択

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

none - Tree Grid の行選択が無効になります。
single - Tree Grid 内の 1 行のみの選択が利用可能になります。
multiple - 複数行の選択は、ctrl + click、space キーを押して行セレクターを使用することにより、複数行の選択が可能になります。
multipleCascade - これはカスケード選択のモードであり、ユーザーがユーザーの操作で選択したレコードの下のツリー内のすべての子が選択されます。このモードでは、親の選択状態はその子の選択状態に完全に依存します。

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

Angular セル選択

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

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

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

Angular 列選択

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

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

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

既知の問題と制限

IE11 で選択を有効にした Tree Grid コンポーネントを使用するには、Angular アプリケーションの polyfill.ts に配列ポリフィルを明示的にインポートする必要があります。IE11 は、バージョン 13.0.0 でサポートされなくなりました。
```
import 'core-js/es7/array';
typescript
```
グリッドに primaryKey が設定されておらず、リモートデータシナリオが有効になっている場合 (ページング、ソート、フィルタリング、スクロール時に、グリッドに表示されるデータを取得するためのリモートサーバーへのリクエストがトリガーされる場合)、データ要求が完了すると、行は次の状態を失います:
- Row Selection
- Row Expand/collapse
- Row Editing
- Row Pinning

API リファレンス

その他のリソース

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