Components List

Angular セル選択

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

Angular セル選択の例

以下のサンプルは、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

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

選択タイプ

Hierarchical Grid 複数セル選択

これは、親グリッドと子グリッドの両方でのデフォルトのセル選択モードです。セルの選択は一度に 1 つのグリッドで行うことができますが、クロスグリッド範囲の選択を行うことか、複数のグリッドでセルを選択することはできないことに注意してください。範囲選択およびマウスドラッグ機能に関連する各キーの組み合わせは、同じグリッドでのみ使用できます。

セルの選択方法:

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

Hierarchical Grid 単一選択

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

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

Hierarchical Grid 選択なし

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

スタイル設定

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

テーマのインポート

選択のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する 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-hierarchical-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 { IgxHierarchicalGridModule } from "igniteui-angular";
import { HGridMultiCellStyleComponent } from "./hierarchical-grid/hierarchical-grid-multi-cell-style/hierarchical-grid-multi-cell-style.component";
import { IgxPreventDocumentScrollModule } from "./directives/prevent-scroll.directive";



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

import { Component, OnInit } from '@angular/core';
import { CUSTOMERS } from '../../data/hierarchical-data';

@Component({
    selector: 'app-hierarchical-grid-multi-cell-style',
    styleUrls: ['./hierarchical-grid-multi-cell-style.component.scss'],
    templateUrl: 'hierarchical-grid-multi-cell-style.component.html'
})

export class HGridMultiCellStyleComponent implements OnInit {
    public localdata;
    public ngOnInit(): void {
        this.localdata = CUSTOMERS;
    }
}
ts

<igx-hierarchical-grid [igxPreventDocumentScroll]="true"  #hierarchicalGrid [data]="localdata" [height]="'600px'" [width]="'100%'" [allowFiltering]="true">
    <igx-column field="CustomerID"></igx-column>
    <igx-column field="CompanyName"></igx-column>
    <igx-column field="ContactName"></igx-column>
    <igx-column field="ContactTitle"></igx-column>
    <igx-column field="Address"></igx-column>
    <igx-column field="City"></igx-column>
    <igx-column field="PostalCode"></igx-column>
    <igx-column field="Country"></igx-column>
    <igx-column field="Phone"></igx-column>
    <igx-column field="Fax"></igx-column>

    <igx-row-island [height]="null" [key]="'Orders'" [autoGenerate]="false">
        <igx-column field="OrderID"></igx-column>
        <igx-column field="EmployeeID"></igx-column>
        <igx-column field="OrderDate" [dataType]="'date'"></igx-column>
        <igx-column field="RequiredDate" [dataType]="'date'"></igx-column>
        <igx-column field="ShippedDate" [dataType]="'date'"></igx-column>
        <igx-column field="ShipVia"></igx-column>
        <igx-column field="Freight"></igx-column>
        <igx-column field="ShipName"></igx-column>
        <igx-column field="ShipAddress"></igx-column>
        <igx-column field="ShipCity"></igx-column>
        <igx-column field="ShipPostalCode"></igx-column>
        <igx-column field="ShipCountry"></igx-column>
        <igx-row-island [height]="null" [key]="'OrderDetails'" [autoGenerate]="false">
            <igx-column field="ProductID"></igx-column>
            <igx-column field="UnitPrice"></igx-column>
            <igx-column field="Quantity"></igx-column>
            <igx-column field="Discount"></igx-column>
        </igx-row-island>
    </igx-row-island>

</igx-hierarchical-grid>
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 {
    display: block;
    padding: 8px;

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

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

API リファレンス

その他のリソース

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