You can change the value of the allowSelection property at runtime.
Open the for the live example and click on the Allow Selection checkbox.
Once you have enabled selection, you will see a checkbox column displayed for every row. To select/deselect a row, click on the related checkbox.
Selectable rows
By default, when you enable selection for the DikeGrid, all rows are susceptible to being selected.
If you want the user can select only some rows, you can provide a function specifying the conditions the rows must meet. You can set this function by providing a property named selectableRows.
Let us define this function to allow the user to select rows whose age value is not 27.
selectableRowsDefinition(entry: Employee): boolean {
// Allow selection only for those rows whose age value is different of 27:
return entry.age !== 27;
}
You can change this function definition at runtime. Therefore, the DikeGrid instance will evaluate the currently selected rows, deselecting those rows that do not meet the new criteria.
As you can see, rows that do not meet the defined criteria display their checkbox disabled.
Header Checkbox Selection
When you provide an in-memory data set, the DikeGrid instance always shows a checkbox in its header.
On the other hand, the DikeGrid instance will not show a checkbox in its header when you provide a custom Datasource because the DikeGrid does not know the total length of the provided data set.
By default, the checkbox in the header will select all rows even though the data set is filtered. However, if you want to select only the filtered rows, you can use the selection API.
Group Selection
When you group rows by a column, every group will show its checkbox.
The selectable rows under the group will be selected when you click on the checkbox in the group. If the group has non-selectable rows, its state will be indeterminate.
When you click in any of the rows under the group, the checkbox in the group will update its status to indeterminate and become checked until you select all rows.
The checkbox in the header will update its state as well.
We have enabled row grouping in the live demo to see this feature.
@Component({
selector: 'row-selection',
templateUrl: './row-selection.component.html',
styleUrls: ['./row-selection.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RowSelectionComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent<T> instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent<Employee>;
// ...
}
The selection API has the following methods:
Method
Description
selectOne()
It marks the given row as selected.
The given row must pass the selectable function.
This method emits the selectionChange and selectedRowChange events.
select()
It marks the given rows as selected.
It emits the selectionChange event.
deselectOne()
It turns off the selected flag for the given row.
This method emits the selectionChange and deselectedRowChange events.
deselect()
It turns off the selected flag for the given rows.
This method emits the selectionChange event.
getSelectedRows()
This method returns an array of all selected rows.
getSelectedEntries()
It returns all selected entries.
selectAll()
This method will set all rows coming from the data source as selected.
deselectAll()
It turns off the selection flag of all selected rows.
resetSelection()
This method deselects all selected rows and cleanses some internal variables. The DikeGrid instance will invoke this method every time you provide a new data set.
To use any previous methods, you must have allowed selection by providing the input property named allowSelection.
Remember, when you provide a data source, the DikeGrid instance wraps every entry into an object of type DikeGridRowEntry. See the class hierarchy for the DikeGrid rows.
To see the selection API in action, we have created the following UI:
The previous HTML code generates the following output:
For every button, we have attached the following actions:
Buttons selectOne / filtered, select / filtered, deselectOne / filtered and deselect / filtered work over the filtered set. These buttons are enabled if you have filtered the original set.
To allow filtering, we enabled the DikeGrid Row Filter.
The selectAll and deselectAll buttons are self-explanatory.
We printed out the selected rows and selected entries in the dev console.
Please, open the live demo and see the previous buttons in action.
To evaluate if the DikeGrid instance has a filter applied, we listen to the filterChange and columnsChange events.
onFilterChange(filterable: DikeFilterable<Employee>): void {
// We ignore the argument filterable because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
onColumnsChange(columns: DikeColumnDef[]): void {
// We ignore the argument columns because we are only interested in the action.
this.isFiltered = !!this.dikeGrid ? this.dikeGrid.filter.isFilterApplied() : false;
}
The filterChange event fires every time the user types something in the DikeGrid Row Filter.
We listen to the columnsChange event because every time the user groups the rows by a column, the user must move that column to the group panel, provoking the DikeGrid instance to raise the columnsChange event.
Remember that the DikeGrid ignores filters for the columns in the group panel.
Selection events
Every time we select or deselect one or more rows, the DikeGrid instance emits the related event.
The following are the selection events:
Event
Description
selectedRowChange
It emits when the user selects one row.
deselectRowChange
It emits when the user deselects one row.
selectionChange
It emits when the user selects/deselects one or more rows.
Please, open the dev console to see the output of these events.
Summary
To perform the selection operation, you must allow it by providing an input property named allowSelection. By default, the user can select all rows, but you can enable only some rows for selection by providing a custom function where every row must meet the established criteria. You can select or deselect rows through the UI or the selection API.
