# Multiple rows edition
## Live example
{% hint style="success" %}
[Multiple rows edition](https://demos.dikesoft.com/dk-grid/editing/multiple-rows-edition) live example.
{% endhint %}
## Edition actions
Before exploring the edition actions, do not forget to **allow edition** and enable the **edition mode**.
{% hint style="info" %}
Remember that the edition mode will display all the UI elements for editing rows.
{% endhint %}
We start defining some **editable** columns.
{% code title="multiple-rows-edition.component.html" %}
```markup
{{ option.label }}email
```
{% endcode %}
We have configured the following features:
1. All the columns are **editable** except for the **Employee Id** column.
2. All editable columns are **required**, and we have set **templates** for the **Gender** and **Email** columns.
3. You can toggle to the **edition mode** from the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel).
When the DikeGrid is in the edition mode, it shows an **icon** (**three vertical dots**) at the left of every row. When you click on this icon, it will show a contextual menu with the edition operations per row.
At the same time, the DikeGrid shows an **icon** (**three horizontal dots**) in the header at the left of the first visible column header. When you click on this icon, it will show a contextual menu with the edition operations for multiple rows.
### Editing rows
Let us start editing some rows by **double-clicking** on them. This action will display the edition templates for each **editable** column.
The DikeGrid allows you to have up to **10 rows** in edition state by default, but you can change this value by providing the corresponding value.
You can change the maximum rows in the edition state value by providing an **Injection Token** or at the **grid** level.
| Variable | Description |
| ------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------- |
| `MAX_ROWS_IN_EDITION` | This value affects all your DikeGrid instances that live under the place you give your Injection Token. |
| `DikeGridEditionSettings { maxRowsInEdition?: number };` | Providing at this level only affects the DikeGrid instance that receives the value. |
Let us provide the `MAX_ROWS_IN_EDITION` token:
{% code title="editing.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: MAX_ROWS_IN_EDITION, useValue: 5 }
]
})
export class EditingModule { }
```
{% endcode %}
When you reach the maximum number of rows in the edition state, the DikeGrid will show you a message indicating it.
### Saving rows
Once you have made some changes to some rows, you can save these rows by clicking on the **Save** option from the contextual menu in the header.
{% hint style="warning" %}
Be aware that the DikeGrid will enable the **Save** option if all rows in the edition state are **valid** and at least one is **not pristine**. Therefore, the DikeGrid will save those valid rows which are not pristine.
{% endhint %}
{% hint style="info" %}
After updating rows, the DikeGrid changes the status of every row to the `Modified` value.
{% endhint %}
{% hint style="success" %}
Please, open the live example to test the **Save** operation.
{% endhint %}
### Canceling edition
When you have some rows in the edition state, the first enabled option in the contextual menu is **Cancel**.
Clicking on the Cancel option in the context menu will cancel the edition of all the rows in the edition state.
{% hint style="warning" %}
If you have made some changes, you will lose those changes by canceling the edition.
{% endhint %}
### Deleting rows
To delete rows from the DikeGrid UI, you must enable the **selection** operation. Therefore, you can delete only the selected rows from the UI.
The **Remove** option appears in the contextual menu if you allow the user to select rows, and the DikeGrid will enable it only when the user has selected one row at least.
Let us provide the corresponding input property to enable the selection operation.
{% code title="multiple-rows-edition.component.html" %}
```markup
```
{% endcode %}
You can open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) and click on the **Allow Selection** checkbox.
Now the context menu shows the **Remove** option.
{% hint style="info" %}
If the user has selected rows in the edition state, the DikeGrid will not delete them.
{% endhint %}
## Reverting changes
You can undo changes from the modified or deleted rows. Therefore, you have to change the view from the UI to display only **modified** or **deleted** rows.
### Edition filters
If you open the context menu, you can see an option called **Edition Filter**, and under this option, you will find the edition subsets options.
{% hint style="info" %}
The DikeGrid will take the user to the **edition view** by clicking on these edition subsets options.
{% endhint %}
### Option - Editing
Clicking on this menu option will display only the rows in the edition state. Showing only the rows editing is helpful when you have grouped the rows, for instance, because the rows in the edition state could be in different groups.
As you can see, the icon in the header changes to a **pencil icon** (instead of the three horizontal dots), indicating that you are viewing only the rows in the edition state.
### Option - Modified
This menu option shows only those rows that have suffered changes. When you navigate to the **modified-rows** view, you will see an icon with a **badge** at the left of every row. The badge indicates how many times the user has changed the row.
You click on the icon with a badge to **revert** the changes in the row. This action will take the row to its **immediate previous state**.
{% hint style="success" %}
You can click on the icon with a badge until the row reaches its initial state. The initial state corresponds to the row state equals to `Read` value.
{% endhint %}
If you have enabled the **selection** operation, you can select more than one row and take them to their immediate previous state by clicking on the **Restore** option from the contextual menu.
Once again, see how the DikeGrid changes the icon to indicate that you are viewing the **modified** rows.
### Option - Removed
This menu option shows only the subset of rows that corresponds to the deleted rows. When you are in the **deleted-rows** view, you will see an icon with a **badge** at the left of every row. Again, the badge indicates how many times the user has changed the row, but this time the last action corresponds to the deletion operation.
{% hint style="info" %}
If the badge displays a number greater than one means that the row has suffered changes before deleting it.
{% endhint %}
The DikeGrid changes the icon in the header to indicate that you are viewing the **deleted** rows.
If you have enabled the selection operation, you can select more than one row and **restore** them by clicking on the **Restore** option from the contextual menu.
### Option - Back
You can display the **standard view** by clicking on the **Back** option.
{% hint style="success" %}
You can filter every edition subset of rows by typing values in a **filterable** column. The values you enter in the **Edition Filters** view are independent of the values in the standard view.
{% endhint %}
## Edition Toolbar
All the edition actions for multiple rows are available through the Edition Toolbar. When you display the Edition Toolbar, the DikeGrid hides the contextual menu in the header.
If you want to use the Edition Toolbar in the live example, open the [Floating Configuration Panel](https://docs.dikesoft.com/overview#floating-configuration-panel) and click on the **Edition Toolbar** checkbox.
When displaying the Edition Toolbar, the DikeGrid still shows the icon in the header but does not show the contextual menu.
### Customizing the Edition Toolbar
You can change the appearance of the Edition Toolbar by modifying its **height**, **alignment**, or **position**. You can also change the **size** of its items.
{% hint style="success" %}
For further details, see the [Grid Structure - Edition Toolbar](https://docs.dikesoft.com/fundamentals/grid-structure/edition-toolbar) section.
{% endhint %}
## DikeGrid Edition API
You can perform the edition actions using the **edition API**.
Before using the API, we have to retrieve the DikeGrid instance from the component's view.
{% tabs %}
{% tab title="multiple-rows-edition.component.html" %}
```markup
```
{% endtab %}
{% tab title="multiple-rows-edition.component.ts" %}
```typescript
@Component({
selector: 'multiple-rows-edition',
templateUrl: './multiple-rows-edition.component.html',
styleUrls: ['./multiple-rows-edition.component.scss'],
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MultipleRowsEditionComponent implements OnInit, OnDestroy {
// Retrieve the DikeGridComponent instance from the view:
@ViewChild('grid') dikeGrid: DikeGridComponent;
//...
}
```
{% endtab %}
{% endtabs %}
The following method operates over multiple rows edition.
| Method | Description |
| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `updateRowsInEdition()` | This method takes all valid rows which are not pristine and saves their changes. |
| `removeRows()` | It removes from the given rows only those rows that are not in the edition state and do not have the `Deleted` value in their row status. |
| `cancelRowsInEdition()` | It cancels the current edition state for every row, losing all the changes you have made. |
| `restoreRows()` | It takes the given rows to their immediate previous row state. It filters the given rows taking only those **modified** or **deleted** rows. |
| `setEditionFilter()` |
It displays the corresponding subset of rows editing. Invoking this method is equivalent to clicking on the contextual menu's Editing, Modified, or Removed options.
Since this method changes the view of the DikeGrid, you should have provided the allowEdition and editionMode input properties.
|
| `cancelEditionFilter()` | Invoking this method, the DikeGrid will show the **standard view**. It is equivalent to clicking on the **Back** option of the contextual menu. |
{% hint style="success" %}
For further details, see the [`DikeGridEdition`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridedition#methods) definition.
{% endhint %}
{% hint style="info" %}
It is enough to set the input property called `allowEdition` to use the edition API.
{% endhint %}
To see the API in action, consider the following additions to the UI:
{% tabs %}
{% tab title="multiple-rows-edition.component.html" %}
```markup
ModifiedRemoved
```
{% endtab %}
{% tab title="multiple-rows-edition.component.ts" %}
```typescript
onSaveRows(): void {
this.dikeGrid.edition.updateRowsInEdition();
}
onCancelEdition(): void {
this.dikeGrid.edition.cancelRowsInEdition();
}
onRemoveRows(): void {
// Delete the selected rows:
this.dikeGrid.edition.removeRows(this.dikeGrid.selection.getSelectedRows());
}
onRestoreRows(): void {
if (this.rowTypecontrol.valid) {
const rows = this.rowTypecontrol.value as string === 'modified' ? this.dikeGrid.edition.modifiedRows :
this.dikeGrid.edition.removedRows;
this.dikeGrid.edition.restoreRows(rows);
}
}
```
{% endtab %}
{% endtabs %}
The previous definition generates the following output:
We have added the following buttons:
1. **Save rows**. This action updates the rows in edition state. Remember that the DikeGrid will save only those valid rows that are not pristine.
2. **Cancel Edition**. Clicking on this button will cancel the edition state for every row editing.
3. **Remove rows**. Click on this button to delete the selected rows. The DikeGrid will not remove the rows in the edition state.
4. **Restore rows**. This action works over the **modified** or **deleted** rows. Therefore, you select which type of rows the DikeGrid will restore.
## Edition events
The edition events for multiple rows are the same when working over one row. Regarding the various rows edition, the DikeGrid emits an array of rows instead of one row.
We listen to these events:
{% tabs %}
{% tab title="multiple-rows-edition.component.html" %}
```markup
```
{% endtab %}
{% tab title="multiple-rows-edition.component.ts" %}
```typescript
onEditionRowChange(value: DikeGridDataRowEntry): void {
console.log('editionRowChange: ', value);
}
onUpdateRowChange(value: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('updateRowChange: ', value);
}
onCancelRowEditionChange(value: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('cancelRowEditionChange: ', value);
}
onRemoveRowChange(value: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('removeRowChangeChange: ', value);
}
onRestoreRowChange(value: DikeGridDataRowEntry | DikeGridDataRowEntry[]): void {
console.log('restoreRowChange: ', value);
}
```
{% endtab %}
{% endtabs %}
{% hint style="success" %}
You can also listen to these events from the [`DikeGridEdition`](https://docs.dikesoft.com/reference/dkgrid-api/dkgridedition#events) instance
{% endhint %}
{% hint style="success" %}
Please, open the **dev console** to see the events' output.
{% endhint %}
## Blocking the UI
When you click on any edition option from the contextual menu, the DikeGrid shows the **Processing Indicator** to block its UI until the updating ends.
{% hint style="info" %}
For further details on blocking the DikeGrid UI, see the [Grid Structure - Waiting Indicator](https://docs.dikesoft.com/fundamentals/grid-structure/waiting-indicator) section.
{% endhint %}
You can avoid the DikeGrid displaying the Processing Indicator by providing a `false` value through the related **Injection Token** or at the **grid** level.
You can provide any of the following Injection Tokens depending on the edition action:
| Edition action | Injection Token |
| -------------- | --------------------------------------------------------------------- |
| Save | `WAIT_FOR_MULTIPLE_ROWS_UPDATE` |
| Cancel | `WAIT_FOR_MULTIPLE_ROWS_CANCELATION` |
| Remove | `WAIT_FOR_MULTIPLE_ROWS_DELETION` |
| Restore | `WAIT_FOR_MULTIPLE_ROWS_RESTORATION` |
If you want to apply the value for a particular DikeGrid instance, provide the corresponding variable through the `DikeGridEditionsSettings` reference:
| Edition action | Variable |
| -------------- | -------------------------------- |
| Save | `waitForMultipleRowsUpdate` |
| Cancel | `waitForMultipleRowsCancelation` |
| Remove | `waitForMultipleRowsDeletion` |
| Restore | `waitForMultipleRowsRestoration` |
Let us provide the `WAIT_FOR_MULTIPLE_ROWS_CANCELATION` Injection Token to avoid displaying the Processing Indicator when canceling the edition.
{% code title="editing.module.ts" %}
```typescript
@NgModule({
providers: [
{ provide: WAIT_FOR_MULTIPLE_ROWS_CANCELATION, useValue: false }
]
})
export class EditingModule { }
```
{% endcode %}
## Summary
Apart from saving changes for one row, you can **update multiples rows** simultaneously. However, be aware that you must **enable** the **selection** operation for **deleting** and **restoring** multiple rows.
You must navigate to the edition view for **restoring** rows by clicking on the corresponding **edition filter**. Every row shows an icon with a **badge** conveying how many times the row has suffered changes.
You can perform the edition actions for multiple rows using the **edition API**. Moreover, the DikeGrid **emits** the related **event** for every edition action.
### Complete code for this section
{% tabs %}
{% tab title="multiple-rows-edition.component.html" %}
```markup