Custom Editing and Validation Controls

The Angular Grid enables you to use templates and customize the built-in editing functionality in Reactive Angular Forms. You can add custom validations, input controls, and take full control over the editing operations applied to the Grid.

By default, when a row or cell enters edit mode, the Grid renders a specific input control based on the editor property of the column. The default value is text, which renders a TextBox editor component. The other components are:

• DatePicker
• NumericTextBox
• CheckBox

Setting Up Custom Inputs

The following example demonstrates how to use the EditTemplateDirective and the Reactive Forms to build custom DropDownList editor.

Change Theme

Theme

Loading ...

To render custom input components depending on the specific configurations of the project:

1. Use the EditTemplateDirective of the Grid and configure the desired control.
2. To set the value of the editor control, use the formGroup field passed by the EditTemplateDirective.
   html

   <kendo-grid-column field="CategoryID" title="Category">
     <ng-template kendoGridEditTemplate let-formGroup="formGroup">
       <kendo-dropdownlist ... [formControl]="formGroup.get('CategoryID')">
       </kendo-dropdownlist>
     </ng-template>
   </kendo-grid-column>

3. To manually implement the editing functionality, handle the edit-related Grid events.
   html

   <kendo-grid
       ...
       (edit)="editHandler($event)"
       (cancel)="cancelHandler($event)"
       (save)="saveHandler($event)"
       (remove)="removeHandler($event)"
       (add)="addHandler($event)"
   ></kendo-grid>

4. To perform the required edit operations, use the following built-in Grid methods:
   • addRow()—Creates a new row editor at the beginning of the table.
   • editRow()—Places the specified row in edit mode. The EditTemplateDirective is evaluated.
   • closeRow()—Closes the editor for a given row.
   • editCell()—Puts a single cell in edit mode.
   • closeCell()—Closes the editor for the current cell in edit mode and fires the cellClose event.

Rendering Cell Template Editors

You can render editor components directly in the cells of the Grid 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.

The following example demonstrates how to render DropDownList and NumericTextBox components using the CellTemplateDirective.

Change Theme

Theme

Loading ...

To display the input editor controls:

1. Define the CellTemplateDirective for the columns that need to be edited.
2. Add an input component to each template so that all rows are ready for editing.
   html

   <kendo-grid-column field="ProductName">
       <ng-template kendoGridCellTemplate let-dataItem let-column="column">
           <kendo-dropdownlist
               [data]="names"
               [formControl]="getFormControl(dataItem, column.field)"
           ></kendo-dropdownlist>
       </ng-template>
   </kendo-grid-column>

3. (Optional) Add the kendoGridFocusable directive to the input to make it accessible with keyboard shortcuts. See Controlling the Focus.

Displaying Validation Messages

You can display validation messages when a field does not pass the set validations. As a result, the users will be notified that the form is invalid and instructed what to type to pass the validations of the field.

To do that, use the formGroup field passed by the template. Then use the state properties (such as invalid, untouched, and others) to toggle the validation messages dynamically based on the state of the form.

html

<ng-template kendoGridEditTemplate let-column="column" let-formGroup="formGroup" let-isNew="isNew">
    <kendo-textbox [formControl]="formGroup.get(column.field)"></kendo-textbox>
    <p *ngIf="formGroup.get(column.field).invalid && !(isNew && formGroup.get(column.field).untouched)">
        Product name is required
    </p>
</ng-template>

Popup Validation Messages

The following example demonstrates how to display a Popup validation message for a custom editor component.

Change Theme

Theme

Loading ...

To display a custom validation message inside a Kendo UI for Angular Popup:

1. Use a custom directive to expose the ElementRef of the custom editor component.
   ts

   @Directive({
     selector: '[popupAnchor]',
     exportAs: 'popupAnchor'
   })
   export class PopupAnchorDirective {
     constructor(public element: ElementRef) {}
   }

2. Link the custom editor component to the anchor property of the Popup.
   html

   <ng-template kendoGridEditTemplate>
       <kendo-textbox #input="popupAnchor" popupAnchor  ... ></kendo-textbox>
       <kendo-popup [anchor]="input.element" ... >
           Product name is required
       </kendo-popup>
   </ng-template>

Suggested Links

• Angular Grid Editing Basics
• Built-In Editing Directives
• Inline Editing
• In-Cell Editing
• API Reference of the GridComponent
• API Index of the Grid
• Popup Overview