Built-In Directives
The Grid provides built-in directives which simplify the implementation of its editing operations.
Basic Concepts
The Kendo UI Grid for Angular provides built-in directive options for:
- Implementing a custom editing service
- Displaying a confirmation dialog when a row is about to be removed
The Grid also delivers directives which automate common editing scenarios:
Automating Editing
To automate editing, use the template, reactive, and in-cell directives which handle the necessary Grid events.
The Template Directive
The kendoGridTemplateEditing directive simplifies the setup when you use the Angular Template-Driven Forms in your project. The directive requires a createNewItem input (which has to be set to a function) that creates a new instance of the edited model.
The following example demonstrates how to use the kendoGridTemplateEditing directive.
The Reactive Directive
The kendoGridReactiveEditing directive helps you to skip the boilerplate code, which is required to set up the Grid for editing with Reactive Forms. The directive requires a createFormGroup input that has to be set to a function, which creates a FormGroup for the row model or for the new model when the user adds a new row.
The following example demonstrates how to use the kendoGridReactiveEditing directive.
The In-Cell Directive
The kendoGridInCellEditing directive sets up the Grid for in-cell editing with Reactive Forms. The directive requires a createFormGroup input that has to be set to a function, which creates a FormGroup for the row model or for the new model when the user adds a new row.
For more information on how to disable the clicking on specific elements, refer to the article on in-cell editing.
The following example demonstrates how to use the kendoGridInCellEditing directive.
Custom Service
By default, the built-in editing directives modify the data that is passed to the Grid. You can customize this behavior by implementing a custom service through the editService input. The custom service handles the create, update, and remove data operations and implements the EditService interface.
If the Grid is not bound to a plain array, specify
EditService.
The following example demonstrates how to implement a custom service.
Confirmation Dialog on Row Removal
If you apply any of the built-in editing directives in your project, you can also display a confirmation dialog when the user is about to remove a row. To show the Remove dialog, set a function to the removeConfirmation input. The function is expected to return a Boolean value which will indicate if the record will be removed. If the function returns an observable or a promise, resolve it with a Boolean value.
The following example demonstrates how to display a Remove confirmation dialog.
