Angular Data Grid External Editing

You can add new records or edit row data by using an external modal dialog or another container specifically designed for this purpose. The external form provides greater flexibility and allows you to implement the necessary input controls and validators. This adds another layer of verification and ensures that the inserted data is valid.

The following example demonstrates an external editing form using Kendo Angular Dialog component.

Change Theme

Theme

Loading ...

Based on the project requirements, the form field components and validations may vary. To implement an external edit form by using the Kendo UI for Angular Dialog component and Reactive Forms (Model-Driven Forms):

1. Create a Dialog component and define the required input controls in a Reactive Form. Ensure that the controls match the type of data that will be edited.

   html

   <kendo-dialog *ngIf="active">
       <form novalidate class="k-form k-form-md" [formGroup]="editForm">
           <kendo-formfield>
           ...
               <kendo-textbox formControlName="ProductName"  #ProductName required></kendo-textbox>
           <kendo-formfield>
       ...
       </form>
   </kendo-dialog>

2. Handle the Grid edit event. The event is fired when a button with kendoGridEditCommand directive is clicked.

   html

   <kendo-grid ... (edit)="editHandler($event)">
       <kendo-grid-command-column>
           <ng-template kendoGridCellTemplate>
               <button kendoGridEditCommand>Edit</button>
               ...
           </ng-template>
       </kendo-grid-command-column>
   </kendo-grid>

3. In the edit event handler, pass the edited dataItem to the custom external editing component.

   ts

   public editHandler(args: AddEvent): void {
       ...
       this.editDataItem = args.dataItem;
   }

   html

   <kendo-grid-edit-form [model]="editDataItem"> </kendo-grid-edit-form>

4. In the external editing component, create a FormGroup with controls, based on the received dataItem object.

   ts

   @Input() public set model(product: Product) {
       this.editForm.reset(product);
   }
   
   public editForm: FormGroup = new FormGroup({
       ProductName: new FormControl()
       ...
   })

Suggested Links

• API Reference of the DialogComponent
• API Reference of the GridComponent
• Overview of Editing
• Editing in Reactive Forms
• API Index of the Grid