Custom Editing in Reactive Forms
The Grid enables you to use templates and customize its built-in editing functionality in Reactive Forms.
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.
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.
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.
- Create a cell template for each column that needs to be edited.
- Add an input component to each template so that all rows are ready for editing.
- (Optional) Add the
kendoGridFocusabledirective to the input to make it navigable. See Controlling the Focus.