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.
- 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
kendoGridFocusable
directive to the input to make it navigable. See Controlling the Focus.