Components List

Angular Hierarchical Grid の選択

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

Angular Grid 選択の例

以下のサンプルは、Hierarchical 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 { 
	IgxHierarchicalGridModule,
	IgxSnackbarModule,
	IgxButtonModule,
	IgxButtonGroupModule,
	IgxIconModule
 } from "igniteui-angular";
import { HierarchicalGridCellSelectionComponent } from "./hierarchical-grid/hierarchical-grid-cellSelection-sample/hierarchical-grid-cellSelection.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	HierarchicalGridCellSelectionComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxHierarchicalGridModule,
	IgxSnackbarModule,
	IgxButtonModule,
	IgxButtonGroupModule,
	IgxIconModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxSnackbarComponent, IgxHierarchicalGridComponent, GridSelectionMode } from 'igniteui-angular';
import { SINGERS } from '../../data/singersData';

@Component({
    selector: 'app-hierarchical-grid-cell-selection',
    styleUrls: ['./hierarchical-grid-cellSelection.component.scss'],
    templateUrl: 'hierarchical-grid-cellSelection.component.html'
})
export class HierarchicalGridCellSelectionComponent implements OnInit {
    @ViewChild('hgrid', { static: true }) public hGrid: IgxHierarchicalGridComponent;
    @ViewChild(IgxSnackbarComponent, { static: true }) public snackbar: IgxSnackbarComponent;
    public data: any[];
    public selectionMode: GridSelectionMode = 'multiple';
    public selectionModeChild: GridSelectionMode = 'single';
    public selectionModes = [];
    public selectionModesChildren = [];

    constructor() { }

    public ngOnInit(): void {
        this.data = SINGERS;
        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.selectionModesChildren = [
            { label: 'none', selected: this.selectionModeChild === 'none', togglable: true },
            { label: 'single', selected: this.selectionModeChild === 'single', togglable: true },
            { label: 'multiple', selected: this.selectionModeChild === 'multiple', togglable: true }
        ];
        this.snackbar.autoHide = false;
        this.snackbar.open();
    }

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

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

<div class="grid__wrapper">
    <div class="button-group-wrapper">
        <h6>Parent Grid cell selection mode: </h6>
        <igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup>
    </div>
    <div class="button-group-wrapper">
        <h6>Child Grid cell selection mode: </h6>
        <igx-buttongroup [values]="selectionModesChildren" (selected)="selectCellSelectionModeChildGrid($event)"></igx-buttongroup>
    </div>
    <igx-hierarchical-grid [igxPreventDocumentScroll]="true" #hierarchicalGrid [data]="data" [height]="'560px'" [width]="'100%'" [cellSelection]="selectionMode" #hgrid>
        <igx-column field="Artist" [dataType]="'string'"></igx-column>
        <igx-column field="HasGrammyAward" header="Has Grammy Award?" [dataType]="'boolean'">
        </igx-column>
        <igx-column field="Debut" dataType="number"></igx-column>
        <igx-column field="GrammyNominations" header="Grammy Nominations" dataType="number" [hasSummary]="true"></igx-column>
        <igx-column field="GrammyAwards" header="Grammy Awards" dataType="number" [hasSummary]="true"></igx-column>
        <igx-row-island [height]="null" [key]="'Albums'" [cellSelection]="selectionModeChild">
            <igx-column field="Album" [dataType]="'string'"></igx-column>
            <igx-column field="LaunchDate" header="Launch Date" [dataType]="'date'"></igx-column>
            <igx-column field="BillboardReview" header="Billboard Review" dataType="number"></igx-column>
            <igx-column field="USBillboard200" header="US Billboard 200" dataType="number"></igx-column>
        </igx-row-island>
    </igx-hierarchical-grid>
</div>

<igx-snackbar #snackbar actionText="Got it. Thanks!" (clicked)="snackbar.close()">
    <div class="container">
        <igx-icon>notification_important</igx-icon>
        <div class="message-container">
            <span>Parent grid:</span>
            <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>
        <div class="message-container">
            <span>Child grid:</span>
            <ng-container *ngIf="selectionModeChild === '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="selectionModeChild === '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="selectionModeChild === '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>
    </div>
</igx-snackbar>
html

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

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

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

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

.message-container {
    display: flex;
    flex-flow: column;
    > span {
        margin-top: 8px;
        padding-left: 20px;
    }
}
scss

Like this sample? Get access to our complete Ignite UI for Angular toolkit and start building your own apps in minutes. Download it for free.

Angular Grid 選択のオプション

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

Angular 行選択

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

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

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

Angular セル選択

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

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

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

Angular 列選択

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

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

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

既知の問題と制限

IE11 で選択を有効にした Hierarchical 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 リファレンス

その他のリソース

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