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

Angular Data Grid Inline Editing

The inline editing mode lets the user click the Edit command button on the row and put that row cells in editing mode. This type of editing is suitable when you want to edit all row cells in a single transaction.

This article includes a step-by-step guide on how to enable the inline editing approach by manually handling the corresponding edit events.

Data-Binding Directives vs. Manual Setup

The Grid provides a Reactive Editing Directive and Template Editing Directive that significantly reduce the amount of boiler plate code required for implementing inline editing. Try them out before using the more flexible, but verbose manual setup.

To enable this functionality, the Grid uses either Angular Reactive Forms or Template-Driven Forms. This gives you the choice between two inline editing approaches:

Using Reactive Forms
Using Template-Driven Forms

Using Reactive Forms

The following example demonstrates an inline editing Grid with Reactive Forms.

Change Theme

Theme

Loading ...

To configure the inline editing mode of the Grid when using Reactive Forms in Angular:

Set the editor property of each column in accordance with the type of data that will be edited. The default is the text editor—a textbox for editing string values. Internally, the built-in column editors utilize the Angular Reactive Forms directives.
html
```
<kendo-grid-column
    field="UnitPrice"
    title="Price"
    editor="numeric"
></kendo-grid-column>
```

Configure the CommandColumnComponent by defining the built-in command directives for the required editing operations. For more details, check the Command Column Directives section.

html

<kendo-grid-command-column title="command">
    <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand >Edit</button>
        <!-- more command buttons here -->
    </ng-template>
</kendo-grid-command-column>

When a button with an associated command directive is clicked, the Grid emits the corresponding event. Handle the events and use the necessary Grid editing methods to process the data manually.

html

<kendo-grid
    (edit)="editHandler($event)"
    (cancel)="cancelHandler($event)"
    (save)="saveHandler($event)"
    (remove)="removeHandler($event)"
    (add)="addHandler($event)"
>
    <!-- the rest of configuration -->
</kendo-grid>

Editing Records

The edit event fires when a button with kendoGridEditCommand directive is clicked. Inside the event handler, put the row in editing mode by calling the editRow method. Pass the row index and the FormGroup instance that contains form controls for each editable data item field.

protected editHandler(args: EditEvent): void {
    const group = new FormGroup({
        'ProductID': new FormControl(args.dataItem.ProductID),
         // other fields
    });

    args.sender.editRow(args.rowIndex, group);
}

Adding Records

The add event fires when a button with kendoGridAddCommand directive is clicked. Inside the event handler, show the newly added row in editing mode by calling the addRow method. Provide a FormGroup configuration based on the default values for a newly added data item.

public addHandler(args: AddEvent): void {
    const group = new FormGroup({
        'ProductID': new FormControl(),
      // other fields
    });

    args.sender.addRow(group);
}

Canceling Editing

The cancel event fires when a button with kendoGridCancelCommand directive is clicked. Inside the event handler, switch the row back to readonly mode by calling the closeRow method.

public cancelHandler(args: CancelEvent): void {
    ...
    args.sender.closeRow(args.rowIndex)
}

Saving Records

The save event fires when the kendoGridSaveCommand is clicked. Inside the event handler, you have access to the latest form value. Use it to update the Grid data accordingly. Call the closeRow method to switch the current row back to readonly mode.

public saveHandler(args: SaveEvent): void {
    ...
    sender.closeRow(rowIndex);
}

Removing Records

The remove event fires when the kendoGridRemoveCommand is clicked. Inside the event handler, remove the respective data item from the data source.

public removeHandler(args: RemoveEvent): void {
    this.editService.remove(args.dataItem);
}

Using Template-Driven Forms

The Grid provides an option for editing its data by using the Angular Template-Driven Forms. This type of editing relies on binding all editable data item fields with a form control using two-way ngModel binding.

The following example demonstrates a Grid with inline editing using Template-Driven Forms.

Change Theme

Theme

Loading ...

To configure the inline editing mode of the Grid with Template-Driven Forms:

Wrap the Grid component in a form tag.

html

<form novalidate #myForm="ngForm">
    <kendo-grid>...</kendo-grid>
</form>

Use the EditTemplateDirective of the Grid to define the custom input control to be rendered when a row is being edited. The data item associated with the edited row is exposed in the template context as dataItem. Use the ngModel directive to bind the form control to the respective data item field.

html

<kendo-grid-column field="ProductName" title="Product Name">
    <ng-template kendoGridEditTemplate let-dataItem="dataItem">
        <kendo-textbox
            [(ngModel)]="dataItem.ProductName"
            name="ProductName"
            required
        ></kendo-textbox>
    </ng-template>
</kendo-grid-column>

Configure the CommandColumnComponent component by defining the built-in command directives for the required editing operations. For more details, check the Built-in Command Directives article.

html

<kendo-grid-command-column title="command">
    <ng-template kendoGridCellTemplate>
        <button kendoGridEditCommand >Edit</button>
        <!-- more command buttons here -->
    </ng-template>
</kendo-grid-command-column>

When a button with an associated command directive is clicked, the Grid emits the corresponding event. Handle the events and use the necessary Grid editing methods to process the data manually.

html

<kendo-grid
    (edit)="editHandler($event)"
    (cancel)="cancelHandler($event)"
    (save)="saveHandler($event)"
    (remove)="removeHandler($event)"
    (add)="addHandler($event)"
>
    <!-- the rest of the configuration -->
</kendo-grid>

Editing Records

The edit event fires when a button with kendoGridEditCommand directive is clicked. Inside the event handler, put the row in editing mode by calling the editRow method.

public editHandler(args: EditEvent): void {
    ...
    args.sender.editRow(rowIndex);
}

Adding Records

The add event fires when a button with kendoGridAddCommand directive is clicked. Inside the event handler, show the new row in editing mode by calling the addRow method.

public addHandler(args: AddEvent): void {
    ...
    args.sender.addRow(new Product());
}

Canceling Editing

The cancel event fires when a button with kendoGridCancelCommand directive is clicked. Inside the event handler, switch the row back to readonly mode by calling the closeRow method.

public cancelHandler(args: CancelEvent): void {
    args.sender.closeRow(args.rowIndex);
}

Saving Records

The save event fires when a button with kendoGridSaveCommand directive is clicked. Inside the event handler, save the data and return the row back to readonly mode by calling the closeRow method.

public saveHandler(args: SaveEvent): void {
    ...
    args.sender.closeRow(rowIndex);
}

Removing Records

The remove event fires when a button with kendoGridRemoveCommand directive is clicked. Inside the event handler, remove the current data item from the data source.

public removeHandler(args: RemoveEvent): void {
    this.editService.remove(args.dataItem);
}