<divclass="grid__wrapper"><divclass="button-group-wrapper"><h6>Parent Grid cell selection mode: </h6><igx-buttongroup [values]="selectionModes" (selected)="selectCellSelectionMode($event)"></igx-buttongroup></div><divclass="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-columnfield="Artist" [dataType]="'string'"></igx-column><igx-columnfield="HasGrammyAward"header="Has Grammy Award?" [dataType]="'boolean'"></igx-column><igx-columnfield="Debut"dataType="number"></igx-column><igx-columnfield="GrammyNominations"header="Grammy Nominations"dataType="number" [hasSummary]="true"></igx-column><igx-columnfield="GrammyAwards"header="Grammy Awards"dataType="number" [hasSummary]="true"></igx-column><igx-row-island [height]="null" [key]="'Albums'" [cellSelection]="selectionModeChild"><igx-columnfield="Album" [dataType]="'string'"></igx-column><igx-columnfield="LaunchDate"header="Launch Date" [dataType]="'date'"></igx-column><igx-columnfield="BillboardReview"header="Billboard Review"dataType="number"></igx-column><igx-columnfield="USBillboard200"header="US Billboard 200"dataType="number"></igx-column></igx-row-island></igx-hierarchical-grid></div><igx-snackbar #snackbaractionText="Got it. Thanks!" (clicked)="snackbar.close()"><divclass="container"><igx-icon>notification_important</igx-icon><divclass="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><divclass="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
セルの選択を無効にする場合は、[cellSelection]="'none'" プロパティを設定するだけです。このモードでは、セルをクリックするかキーボードでナビゲートしようとすると、セルは選択されず、アクティブ化のスタイルのみが適用され、ページ上の他の要素をスクロールまたはクリックすると失われます。選択を定義する唯一の方法は、以下で説明する API メソッドを使用することです。
スタイル設定
テーマ エンジンは、選択したセルの範囲をスタイルできるプロパティを公開します。
テーマのインポート
選択のスタイル設定を始めるには、すべてのテーマ関数とコンポーネントミックスインが存在する index ファイルをインポートする必要があります。
@use"igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。// @import '~igniteui-angular/lib/core/styles/themes/index';scss