Custom Editing in Reactive Forms

The Grid enables you to use templates and customize its built-in editing functionality in Reactive Forms.

Setup

The following example demonstrates how to use the EditTemplateDirective column options and the Reactive Forms to build custom DropDownList and NumericTextBox editors. It also demonstrates how to integrate custom validation messages, which utilize the built-in Kendo UI styling and the Kendo UI for Angular Popup component, and the EditTemplateDirective of the Kendo UI Grid for Angular. When you implement components as custom Grid editors, use a custom directive to expose the ElementRef of the custom editor component and link it to the anchor property of the Popup.

Implementing Cascading Drop-Down Lists

You can implement cascading DropDownLists as custom editors for those columns of the Grid which contain related information. This means that when the user selects an option from the DropDownList of one of the columns, the values of the DropDownLists in the columns with dependent information will be correspondingly updated.

Rendering Editors in the Cell Templates

You can render editor elements directly in the cells of the Grid. This allows rows to be edited without the need to explicitly put them in editing mode.

Rendering many editors simultaneously will slow down the application. Try to limit the number of editable columns and rows, for example by using paging.

1. Create a cell template for each column that needs to be edited.
2. Add an input component to each template so that all rows are ready for editing.
3. (Optional) Add the kendoGridFocusable directive to the input to make it navigable. See Controlling the Focus.

Suggested Links

• EditTemplateDirective
• Built-In Editing Directives
• Editing in Reactive Forms
• API Reference of the GridComponent
• Overview of Editing
• API Index of the Grid