<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>
@if (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>
}
@if (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>
}
@if (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>
}
</div><divclass="message-container"><span>Child grid:</span>
@if (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>
}
@if (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>
}
@if (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>
}
</div></div></igx-snackbar>html
이 샘플이 마음에 드시나요? 전체 Ignite UI for Angular 툴킷에 액세스하고 몇 분 안에 나만의 앱을 구축해 보세요. 무료로 다운로드하세요.
Angular 그리드 선택 옵션
Angular Hierarchical Grid 구성 요소용 IgniteUI는 행 선택, 셀 선택 및 열 선택의 세 가지 다른 선택 모드를 제공합니다. 기본적으로 Hierarchical Grid에서는 다중 셀 선택 모드만 활성화됩니다. 선택 모드를 변경/활성화하려면 rowSelection, cellSelection 또는 selectable 속성을 사용할 수 있습니다.
GitHub