Components List

Angular セル選択

選択機能により、Tree Grid ベースのマテリアル UI で豊富なデータ選択機能が有効になります。強力な API と使いやすいメソッドのおかげで、さまざまなイベントと単一の選択アクションを利用できます。Tree Grid は、セル選択の 3 つのモードをサポートしています。cellSelection プロパティを変更することで、それらを簡単に切り替えることができます。セルの選択を無効にするか、グリッド内の 1 つのセルのみを選択するか、グリッド内の複数のセルを選択することができます。これはデフォルトのオプションとして提供されています。これらの各オプションについて詳しく説明します。

Angular セル選択の例

以下のサンプルは、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ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

選択タイプ

Tree Grid 複数セル選択

セルの選択方法:

マウスドラッグ - セルの長方形データ選択。
Ctrl キー 押下 + マウスドラッグ - 複数の範囲が選択されます。その他の既存のセル選択は保持されます。
Shift キーを使用して複数セルの選択をインスタンス化します。Shift キーを押しながら、単一セルを選択して別の単一セルを選択します。2 つのセル間のセル範囲が選択されます。Shift キーを押しながら他の 2 番目のセルを選択すると、最初に選択したセルの位置 (開始点) に基づいてセル選択範囲が更新されます。
Shift キーを押しながら矢印キーを使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Shift キーを押しながら Ctrl + Arrow キーと Ctrl + Home/End を使用してキーボードで複数セルを選択します。マルチセル選択範囲は、フォーカスされたセルに基づいて作成されます。
Ctrl キーを押しながら左マウスキーでクリックすると、選択したセルコレクションに単一のセル範囲が追加されます。
マウスでクリックしてドラッグすることで、連続した複数セルの選択が可能です。

デモ

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 { TreeGridMultiCellSelectionComponent } from "./tree-grid-multi-cell-selection/tree-grid-multi-cell-selection.component";
import { 
	IgxGridModule,
	IgxTreeGridModule,
	IgxToastModule,
	IgxSnackbarModule
 } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridMultiCellSelectionComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxGridModule,
	IgxTreeGridModule,
	IgxToastModule,
	IgxSnackbarModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component, ViewEncapsulation } from '@angular/core';
import { IgxColumnComponent, IgxGridComponent, IgxToastComponent, IgxTreeGridComponent, VerticalAlignment } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'app-tree-grid-multi-cell-selection-sample',
    styleUrls: ['./tree-grid-multi-cell-selection.component.scss'],
    templateUrl: './tree-grid-multi-cell-selection.component.html'
})
export class TreeGridMultiCellSelectionComponent {

    public sourceData = FOODS_DATA();
    public targetData = [];

    public transferData(source: IgxTreeGridComponent, target: IgxGridComponent,
                        notification: IgxToastComponent) {
        target.shouldGenerate = true;
        target.clearCellSelection();
        this.targetData = source.getSelectedData();
        notification.positionSettings.verticalDirection = VerticalAlignment.Middle;
        notification.displayTime = 1000;
        notification.open(`Transfered ${this.targetData.length} rows`);
    }

    public initColumn(column: IgxColumnComponent) {
        column.sortable = true;
    }

    public transferExpressions(source: IgxTreeGridComponent, target: IgxGridComponent) {
        target.sortingExpressions = source.sortingExpressions;
    }
}
ts

<div class="wrapper centered">
    <h5>Perform range selection on the Tree Grid to transfer data to the Grid</h5>
</div>
<div class="wrapper">
    <div class="left">
        <igx-tree-grid [igxPreventDocumentScroll]="true"  #source width="100%" (rangeSelected)="transferData(source, target, notification)" (columnInit)="initColumn($event)"
            (sortingDone)="transferExpressions(source, target)"
            [data]="sourceData" height="600px"
            [autoGenerate]="false" primaryKey="ID" foreignKey="ParentID">
            <igx-column field="ID" header="Product ID" [dataType]="'string'">
            </igx-column>
            <igx-column field="Name" header="Product Name" [dataType]="'string'">
            </igx-column>
            <igx-column field="UnitPrice" header="Unit Price" dataType="number">
                <ng-template igxCell let-cell="cell" let-val let-row>
                    {{+val | currency}}
                </ng-template>
            </igx-column>
            <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
            </igx-column>
        </igx-tree-grid>
    </div>
    <div class="right">
        <igx-grid [igxPreventDocumentScroll]="true" #target width="100%" [data]="targetData" height="600px" [autoGenerate]="true"
            (columnInit)="initColumn($event)">
        </igx-grid>
    </div>
</div>
<igx-toast #notification></igx-toast>
html

.wrapper {
    margin: 10px;
    display: flex;
    justify-content: space-evenly;
}

.centered {
    text-align: center;
}

.left {
    width: 50%;
}

.right {
    width: 50%;
    padding-left: 10px;
}
scss

Tree Grid 単一選択

[cellSelection]="'single'" を設定すると、一度にグリッド内で選択されたセルを1つだけ持つことができます。また、モードマウスドラッグは機能せず、セルを選択する代わりに、デフォルトのテキスト選択が行われます。

selection mode が single であるか multiple であるかに関係なく、単一セルが selected イベントが発生したときに発生します。複数セル選択モードでは、セル範囲を選択すると rangeSelected イベントが発生します。

Tree Grid 選択なし

セルの選択を無効にする場合は、[cellSelection]="'none'" プロパティを設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。

キーボードナビゲーションのインタラクション

Shift キーが押されている間

Shift + 上矢印 - 現在の選択範囲に上のセルを追加します。
Shift + 下矢印 - 現在の選択範囲に下のセルを追加します。
Shift + 左矢印 - 現在の選択に左のセルを追加します。
Shift + 右矢印 - 現在の選択範囲に右のセルを追加します。

Ctrl + Shift キーが押されている間

Ctrl + Shift + 上矢印 - 列内のフォーカスのあるセルの上にあるすべてのセルを選択します。
Ctrl + Shift + 下矢印 - 列内のフォーカスのあるセルの下にあるすべてのセルを選択します。
Ctrl + Shift + 左矢印 - 行の先頭まですべてのセルを選択します。
Ctrl + Shift + 右矢印 - 行末まですべてのセルを選択します。
Ctrl + Shift + Home - フォーカスされているセルからグリッド内の最初のセルまでのすべてのセルを選択します。
Ctrl + Shift + End - フォーカスされているセルからグリッド内の最後のセルまでのすべてのセルを選択します。

連続スクロールは、グリッド本体でのみ可能です。

API の使用

以下は、範囲の選択、選択の解除、または選択したセルデータを取得する方法です。

範囲の選択

selectRange(range) - API を使用してセル範囲を選択します。rowStart と rowEnd は行インデックスを使用する必要があり、columnStart と columnEnd は列インデックスまたは列データフィールド値を使用できます。

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);

typescript

選択範囲は加算操作です。以前の選択はクリアされません。

セル選択のクリア

clearCellSelection() は、現在のセル選択をクリアします。

選択したデータの取得

getSelectedData() は、選択内容に応じた形式で選択されたデータの配列を返します。

3 つの異なる単一セルが選択されている場合:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];
ini

1 列から 3 つのセルが選択されている場合:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];
ini

1 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];
ini

2 行 3 列から 3 つのセルをマウスドラッグで選択した場合:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];
ini

2 つの異なる範囲が選択されている場合:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];
ini

2 つの重複範囲が選択されている場合、形式は次のようになります。

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];
ini

selectedCells() は、表示されているすべての行 (グリッドのビューポート内の行) と、表示されていない列を含むすべての列からセルを返します。getSelectedData() も、選択したセルデータを返します。 getSelectedRanges(): GridSelectionRange[] は、キーボードとポインターの両方の操作からグリッドで現在選択されている範囲を返します。

機能の統合

マルチセル選択はインデックスベースです (DOM 要素選択)。

ソート - ソートが実行されると、選択は解除されません。昇順または降順でソートしている間、現在選択されているセルはそのままになります。
ページング - ページング時に選択されたセルはクリアされます。選択はページを超えては持続されません。選択はページを超えては持続されません。
フィルタリング - フィルタリングが実行されると、選択は解除されません。フィルタリングがクリアされている場合は、最初に選択されたセルが返されます。
サイズ変更 - 列のサイズを変更すると、選択したセルはクリアされません。
非表示 - 選択したセルはクリアされません。列が非表示の場合は、次に表示されている列のセルが選択されます。
ピン固定 - 選択したセルはクリアされません。非表示と同じです。
グループ化 - 列をグループ化すると、選択したセルはクリアされません。

スタイル設定

テーマエンジンは、選択したセルの範囲をスタイルできるプロパティを公開します。

テーマのインポート

選択のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
scss

色の定義

完了後、contrast-color と color 関数を使用できます。これらの関数を使用して、選択範囲に使用する色を定義します。

$text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;
scss

contrast-color 関数と color 関数を使用しない場合は、いつでもカラーの値をハードコードできます。

カスタムテーマの作成

次に、text-color、background-color、border-yellow 変数をそれぞれ $cell-selected-text-color、$cell-selected-background、$cell-active-border-color として渡して、grid-theme を拡張する新しいテーマを作成します。

$custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);
scss

テーマの適用

次にコンポーネントのスタイルにミックスインを含め (アプリスタイルにすることも可能)、igx-tree-grid がデフォルトのテーマの代わりに新しく作成されたテーマを使用するようになります。

@include css-vars($custom-grid-theme);
scss

カスタムテーマを適用すると、選択したグリッドセルが選択した色で強調表示されます。

デモ

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 { TreeGridMultiCellSelectionStyleComponent } from "./tree-grid-multi-cell-selection-style/tree-grid-multi-cell-selection-style.component";
import { IgxTreeGridModule } from "igniteui-angular";



@NgModule({
  bootstrap: [AppComponent],
  declarations: [
	AppComponent,
	TreeGridMultiCellSelectionStyleComponent
],
  imports: [
	BrowserModule,
	BrowserAnimationsModule,
	FormsModule,
	IgxPreventDocumentScrollModule,
	IgxTreeGridModule
],
  providers: [],
  entryComponents: [],
  schemas: []
})
export class AppModule {}
ts

import { Component } from '@angular/core';
import { IgxColumnComponent } from 'igniteui-angular';
import { FOODS_DATA } from '../data/foods';

@Component({
    selector: 'app-tree-grid-multi-cell-selection-style-sample',
    styleUrls: ['./tree-grid-multi-cell-selection-style.component.scss'],
    templateUrl: './tree-grid-multi-cell-selection-style.component.html'
})
export class TreeGridMultiCellSelectionStyleComponent {

    public sourceData = FOODS_DATA();

    public initColumn(column: IgxColumnComponent) {
        column.sortable = true;
    }
}
ts

<div class="wrapper">
    <igx-tree-grid [igxPreventDocumentScroll]="true"  #source width="100%" [data]="sourceData" height="600px" [autoGenerate]="false" primaryKey="ID"
        foreignKey="ParentID">
        <igx-column field="ID" header="Product ID" [dataType]="'string'">
        </igx-column>
        <igx-column field="Name" header="Product Name" [dataType]="'string'">
        </igx-column>
        <igx-column field="UnitPrice" header="Unit Price" [dataType]="'number'">
            <ng-template igxCell let-cell="cell" let-val let-row>
                {{+val | currency}}
            </ng-template>
        </igx-column>
        <igx-column field="AddedDate" header="Added Date" [dataType]="'date'">
        </igx-column>
    </igx-tree-grid>
</div>
html

@use '../../variables' as *;

$text-color: contrast-color($default-palette, 'primary', 900);
$background-color: color($default-palette, "primary", 900);
$border-yellow: #f2c43c;

$custom-grid-theme: grid-theme(
    $cell-selected-text-color: $text-color,
    $cell-active-border-color: $border-yellow,
    $cell-selected-background: $background-color,
    $cell-editing-background: $background-color
);

:host {
	::ng-deep {
		@include css-vars($custom-grid-theme);
	}
}

.wrapper {
    margin: 10px;
    display: flex;
    justify-content: space-evenly;
}
scss

このサンプルは、Change Theme (テーマの変更) から選択したグローバルテーマに影響を受けません。

API リファレンス

その他のリソース

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