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