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 a built-in external dialog or a custom container specifically designed for this purpose. 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 external editing for the Grid both by using a quick approach with the built-in directive, and by manually handling the corresponding events.

The following example demonstrates the quick setup for implementing an external edit form using Reactive Forms.

Change Theme

Theme

Loading ...

Quick Setup

The kendoGridExternalEditing directive allows you to easily set up a Grid that opens a built-in external dialog for editing its data items using Reactive Forms.

To configure the Grid with the ExternalEditingDirective:

Provide a callback which returns the FormGroup for the edited item.

html

<kendo-grid [kendoGridExternalEditing]="createFormGroup">
    ...
</kendo-grid>

In the custom createFormGroup callback, create and return the FormGroup for the row model. For the newly added rows, create a new instance of the model.

public formGroup: FormGroup;
constructor(private formBuilder: FormBuilder) {
     this.createFormGroup = this.createFormGroup.bind(this);
}

public createFormGroup = (args: CreateFormGroupArgs): FormGroup => {
    const item = args.isNew ? new Product() : args.dataItem;

    this.formGroup = this.formBuilder.group({
        ProductID: item.ProductID,
        ProductName: [item.ProductName],
        /*...*/
    });

    return this.formGroup;
};

Use the built-in command or toolbar directives to create buttons that automatically perform the desired CRUD operations. For more details, refer to the Editing Action Buttons section.

Customizing the Built-In Editing Dialog

You have the ability to customize the edit form of the external editing dialog by utilizing the formSettings property that the kendoGridExternalEditing directive provides.

This property enables you to configure the orientation of the edit form, the hints, labels, and error messages of each field, as well as display FloatingLabels instead of the default Label components.

html
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [formSettings]="formSettings">
    ...
</kendo-grid>
ts
public formSettings: FormSettings = {
    fields: {
        'ProductName': {
            hint: 'Enter a name for this product.',
            errors: {
                required: 'A product name is required.'
            },
            label: 'Name'
        }
    },
    floatingLabels: true,
    orientation: 'vertical'
};

The kendoGridExternalEditing directive also provides a dialogSettings option, which allows you to customize the dialog containing the edit form by passing a FormDialogSettings object with the desired properties.

html
<kendo-grid 
    [kendoGridExternalEditing]="createFormGroup"
    [dialogSettings]="dialogSettings">
    ...
</kendo-grid>
ts
public dialogSettings: FormDialogSettings = { 
    actionsLayout: 'end', 
    title: 'My Edit Form', 
    width: 400 
};

The following example demonstrates how to customize the default form and dialog settings of the kendoGridExternalEditing directive.

Change Theme

Theme

Loading ...

Manual Setup

For scenarios requiring full control over the editing behavior, you can manually handle the editing operations. The custom external form provides complete flexibility, but requires more code in order to implement the necessary editors and validators.

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 the kendoGridEditCommand directive applied 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

Quick Setup

Customizing the Built-In Editing Dialog

Manual Setup

Suggested Links