# Row Selection
## Live example
{% hint style="success" %}
[Row Selection](https://demos.dikesoft.com/dk-grid/row/selection) live example.
{% endhint %}
## Allowing the selection operation
To allow the user to **select/deselect** the DikeGrid rows, you must provide an input property named `allowSelection`. This property is at the grid scope.
{% code title="row-selection.component.html" %}
```markup
```
{% endcode %}
{% hint style="info" %}
You can change the value of the `allowSelection` property at **runtime**.
{% endhint %}
Open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) 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.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
selectableRowsDefinition(entry: Employee): boolean {
// Allow selection only for those rows whose age value is different of 27:
return entry.age !== 27;
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
The `selectableRows` property is of type [`SelectableFn`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridselection#properties), and you can also provide this function using the **selection API**.
{% endhint %}
{% hint style="info" %}
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.
{% endhint %}
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.
{% hint style="success" %}
See the [Datasource](https://docs.dikesoft.com/fundamentals/datasource) section for further details about an **in-memory** data set and a **custom Datasource**.
{% endhint %}
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.
1. 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**.
2. 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.
{% hint style="info" %}
The checkbox in the header will update its state as well.
{% endhint %}
We have enabled **row grouping** in the live demo to see this feature.
{% code title="row-selection.component.html" %}
```markup
```
{% endcode %}
As you can see, apart from allowing **row grouping**, we have enabled **column dragging**. Then, we set **Gender** and **Age** columns being **groupable**.
You can move the **Age** column to the group panel with the previous configuration. Thus, you can select any group or a row under any group.
## DikeGrid Selection API
You can also use the **selection API** to select rows.
Before using the **selection API**, you must retrieve the related DikeGrid instance by querying the component's view.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
@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 instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
// ...
}
```
{% endtab %}
{% endtabs %}
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. |
{% hint style="success" %}
For further details, see the [`DikeGridSelection`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridselection#methods) definition.
{% endhint %}
{% hint style="info" %}
To use any previous methods, you must have allowed selection by providing the input property named `allowSelection`.
{% endhint %}
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:
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onSelectOne(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.selectOne(filteredRows[0]);
}
}
onSelect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.select(filteredRows);
}
}
onDeselectOne(): void {
const selectedFromFiltered = this.dikeGrid.filter.getFilteredRows().filter(row => row.selected);
if (selectedFromFiltered.length > 0) {
this.dikeGrid.selection.deselectOne(selectedFromFiltered[0]);
}
}
onDeselect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.deselect(filteredRows);
}
}
onGetSelectedRows(): void {
console.log('Selected rows: ', this.dikeGrid.selection.getSelectedRows());
}
onGetSelectedEntries(): void {
console.log('Selected entries: ', this.dikeGrid.selection.getSelectedEntries());
}
onSelectAll(): void {
this.dikeGrid.selection.selectAll();
}
onDeselectAll(): void {
this.dikeGrid.selection.deselectAll();
}
```
{% endtab %}
{% endtabs %}
The previous HTML code generates the following output:
For every button, we have attached the following actions:
1. 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.
2. To allow filtering, we enabled the DikeGrid **Row Filter**.
3. The **selectAll** and **deselectAll** buttons are self-explanatory.
4. 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.
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onFilterChange(filterable: DikeFilterable): 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;
}
```
{% endtab %}
{% endtabs %}
1. The `filterChange` event fires every time the user types something in the DikeGrid **Row Filter**.
2. 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.
{% hint style="warning" %}
Remember that the DikeGrid ignores filters for the columns in the group panel.
{% endhint %}
## 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. |
We listen to these three events:
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
onSelectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Select one row change: ', row);
}
onDeselectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Deselect one row change: ', row);
}
onSelectionChange(rows: DikeGridDataRowEntry[]): void {
console.log('Selection change: ', rows);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
Please, open the **dev console** to see the output of these events.
{% endhint %}
{% hint style="info" %}
You can also listen to these events from the [`DikeGridSelection`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridselection#events) instance.
{% endhint %}
## 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**.
### Complete code for this section
{% tabs %}
{% tab title="row-selection.component.html" %}
```markup
```
{% endtab %}
{% tab title="row-selection.component.ts" %}
```typescript
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Subscription } from 'rxjs';
import { DikeGridComponent, DikeGridDataRowEntry,
DikeGridDataSourceInput, DikeFilterable, DikeColumnDef
} from '@dikesoft/angular-data-grid';
import { DikeGridProperties } from 'app/core/config/dike-grid.properties';
import { Employee } from 'app/mock-api/common/employees/data.model';
import { SampleData } from 'app/services/sample-data.service';
import { DikeGridConfig } from 'app/services/dike-grid.config.service';
@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 instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
dkgDataSource: DikeGridDataSourceInput;
gridProperties: DikeGridProperties;
isFiltered: boolean;
private changeGridPropertiesSubscription: Subscription = Subscription.EMPTY;
constructor(
private cdr: ChangeDetectorRef,
private gridConfig: DikeGridConfig,
private sampleData: SampleData) {
this.isFiltered = false;
}
ngOnInit(): void {
this.dkgDataSource = this.sampleData.getEmployees(1000);
// Listening to any config property change:
this.setChangeGridPropertiesSubscription();
}
ngOnDestroy(): void {
this.changeGridPropertiesSubscription.unsubscribe();
}
selectableRowsDefinition(entry: Employee): boolean {
// Allow selection only for those rows whose age value is different of 27:
return entry.age !== 27;
}
onSelectOne(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.selectOne(filteredRows[0]);
}
}
onSelect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.select(filteredRows);
}
}
onDeselectOne(): void {
const selectedFromFiltered = this.dikeGrid.filter.getFilteredRows().filter(row => row.selected);
if (selectedFromFiltered.length > 0) {
this.dikeGrid.selection.deselectOne(selectedFromFiltered[0]);
}
}
onDeselect(): void {
const filteredRows = this.dikeGrid.filter.getFilteredRows();
if (filteredRows.length > 0) {
this.dikeGrid.selection.deselect(filteredRows);
}
}
onGetSelectedRows(): void {
console.log('Selected rows: ', this.dikeGrid.selection.getSelectedRows());
}
onGetSelectedEntries(): void {
console.log('Selected entries: ', this.dikeGrid.selection.getSelectedEntries());
}
onSelectAll(): void {
this.dikeGrid.selection.selectAll();
}
onDeselectAll(): void {
this.dikeGrid.selection.deselectAll();
}
onFilterChange(filterable: DikeFilterable): 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;
}
onSelectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Select one row change: ', row);
}
onDeselectedRowChange(row: DikeGridDataRowEntry): void {
console.log('Deselect one row change: ', row);
}
onSelectionChange(rows: DikeGridDataRowEntry[]): void {
console.log('Selection change: ', rows);
}
private setChangeGridPropertiesSubscription(): void {
this.changeGridPropertiesSubscription.unsubscribe();
this.changeGridPropertiesSubscription = this.gridConfig.configChange.subscribe((props: DikeGridProperties) => {
this.gridProperties = props;
this.cdr.markForCheck();
});
}
}
```
{% endtab %}
{% endtabs %}