New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid External Editing

You can add new records or edit row data in the Angular Grid 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.

This article includes a step-by-step guide on how to implement the external editing approach by manually handling the corresponding events.

Data-Binding Directives vs. Manual Setup

The Grid provides an External Editing Directive that significantly reduces the amount of boiler plate code required to implement the editing functionality. Try it out before using the more flexible, but verbose manual setup.

The following example demonstrates how to implement a custom external edit form by using the Kendo UI for 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):

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>

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>

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

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

html

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

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

@Input() public set model(product: Product) {
    this.editForm.reset(product);
}

public editForm: FormGroup = new FormGroup({
    ProductName: new FormControl()
    ...
})

Angular Data Grid External Editing

Suggested Links