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:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme: