-
Notifications
You must be signed in to change notification settings - Fork 160
Row Selection Templating (Grid feature)
A user should be able to template the default selector elements in the igx-grid
.
The igx-grid
should provide API for templating any HTML
element as an entity that handles row-selection both in the grid's row elements and in the grid's header.
<igx-grid #grid [data]="gridData" [primaryKey]="'ProductID'"
[rowSelectable]="true" (onRowSelectionChange)="handleRowSelection($event)">
<igx-column [field]="'ProductID'" [editable]="true"></igx-column>
<igx-column [field]="'ProductName'"></igx-column>
<igx-column [field]="'UnitsInStock'"></igx-column>
<ng-template igxHeadSelector let-headContext>
<igx-checkbox
[checked]="isChecked(headContext)"
[indeterminate]="isIndeterminate(headContext)"
(change)="handleHeadSelection($event, headContext)">
</igx-checkbox>
</ng-template>
<ng-template igxRowSelector let-rowContext>
<igx-switch
[checked]="rowContext.selected"
(change)="handleRowSelection($event, rowContext)">
</igx-switch>
</ng-template>
</igx-grid>
- be able to determine if the current row is selected or not
- be able to determine the index of the data record for the current row
- be able to select a row using the grid's row-selection element
- be able to deselect a row using the grid's row-selection element
- be able to select all rows using the grid's header selection element
- be able to deselect all rows using the grid's header selection element
- be able to template the grid's row selection element
- be able to template the grid's header selection element
- be able to handle the states of the grid's row selection element
- be able to handle the states of the grid's header selection element
With the grid's row-selection, you can bind to the rows' and headers' contexts and use the members that they expose.
With the igxRowSelector
directive you can bind to the grid's row context and access the following members:
Name | Type |
---|---|
index | property |
rowID | property |
selected | property |
select | method |
deselect | method |
index
can be used to access the indexes of data records for related rows:
<ng-template igxRowSelector let-rowContext>
{{ rowContext.index }}
</ng-template>
rowID
can be used to get a reference of a grid's row, this could be useful if you want to apply custom row-selection:
<ng-template igxRowSelector let-rowContext>
<igx-switch
(change)="handleRowSelection($event, rowContext.rowID)">
</igx-switch>
</ng-template>
In this example we provide the context's rowID
to a function which handles row-selection in the grid.
selected
is a boolean property that shows whether the current row is selected or not.
<ng-template>
<ng-template igxRowSelector let-rowContext>
<igx-switch
[checked]="rowContext.selected">
</igx-switch>
</ng-template>
</ng-template>
In the above example we are using an igx-switch
and we bind the rowContext.selected
property to the switch's checked
property. By doing so, we ensure that every time we select the row, the switch will also update its state and will be either selected or deselected depending on the current row's state.
The select
method allows you to set the state of a single row as selected. Note that this method does not toggle selection.
<ng-template igxRowSelector let-rowContext>
<igx-switch
[checked]="rowContext.selected"
(change)="rowContext.select()">
</igx-switch>
</ng-template>
The deselect
method allows you to set the state of a single row as not selected. Note that this method does not toggle selection.
<ng-template igxRowSelector let-rowContext>
<igx-switch
[checked]="rowContext.selected"
(change)="rowContext.deselect()">
</igx-switch>
</ng-template>
With the igxHeadSelector
directive you can bind to the grid's header context and access the following members:
Name | Type |
---|---|
selectedCount | property |
totalCount | property |
selectAll | method |
deselectAll | method |
The selectedCount
property shows how many rows are currently selected.
<ng-template igxHeadSelector let-headContext>
{{ headContext.selectedCount }}
</ng-template>
The totalCount
property shows how many rows are there in the grid in total.
<ng-template igxHeadSelector let-headContext>
{{ headContext.totalCount }}
</ng-template>
The selectAll
method sets the states of all rows, in the grid, to selected.
<ng-template igxHeadSelector let-headContext>
<igx-switch
(change)="headContext.selectAll()">
</igx-switch>
</ng-template>
In the above example we explicitly select all rows of the grid. Note that this method does not toggle selection.
The deselectAll
method sets the states of all rows, in the grid, to not selected.
<ng-template igxHeadSelector let-headContext>
<igx-switch
(change)="headContext.deselectAll()">
</igx-switch>
</ng-template>
In the above example we explicitly unselect all rows of the grid. Note that this method does not toggle selection.
<ng-template igxHeadSelector let-headContext>
<igx-checkbox
[checked]="isChecked(headContext)"
[indeterminate]="isIndeterminate(headContext)"
(change)="handleHeadSelectionChange($event, headContext)">
</igx-checkbox>
</ng-template>
Here we use the igxHeadSelector
directive to template the grid's head selector to be an igx-checkbox
element. In the headContext
we have the selectedCount
and the totalCount
properties which can be used to determine the state of the head selector.