Angular Data Grid Inline Editing

The inline editing mode in the Angular Grid allows users to click an Edit command button to switch an entire row into edit mode. This type of editing is suitable when you want to edit all cells of a given row in a single transaction.

The Grid offers flexible options for implementing inline editing—from quick setup with built-in directives that handle the operations automatically, to manual implementation for scenarios requiring complete control over the editing process.

The following example demonstrates the quick setup for implementing inline editing using Reactive Forms.

Change Theme

Theme

Loading ...

Quick Setup

The Grid's built-in editing directives provide the fastest and most straightforward way to implement inline editing. These directives handle all the necessary Grid events automatically, reducing boilerplate code and providing a clean, maintainable solution that integrates seamlessly with Angular Forms.

Based on your preferred Angular Forms methodology, you can choose from the following built-in approaches:

• Using Reactive Forms
• Using Template-Driven Forms

Using Reactive Forms

The kendoGridReactiveEditing directive simplifies the setup when implementing an editable Grid with Reactive Forms. This directive handles all the necessary Grid events internally, reducing repetitive code and providing a cleaner, more maintainable solution.

To configure the Grid with the ReactiveEditingDirective:

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

   html

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

2. 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.

   ts

   public formGroup: FormGroup = this.formBuilder.group({
       patientId: null,
       fullName: '',
       totalCharges: null,
       lastVisitDate: null,
       primaryDiagnosis: '',
       hasInsurance: false,
   });
   
   constructor(private formBuilder: FormBuilder) {
       this.createFormGroup = this.createFormGroup.bind(this);
   }
   
   public createFormGroup = (args: any): FormGroup => {
       const item = args.isNew ? new Patient() : args.dataItem;
   
       this.formGroup = this.formBuilder.group({
           patientId: item.patientId,
           fullName: [item.fullName, Validators.required],
           totalCharges: [item.totalCharges, Validators.required],
           ...
       });
   
       return this.formGroup;
   };

3. 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.

Using Template-Driven Forms

The kendoGridTemplateEditing directive simplifies the setup when implementing an editable Grid with Template-Driven Forms. Like the reactive editing directive, it handles the necessary Grid events internally and reduces boilerplate code.

The following example demonstrates the kendoGridTemplateEditing directive in action.

Change Theme

Theme

Loading ...

To configure the Grid with the TemplateEditingDirective:

1. Use the EditTemplateDirective of the Grid to display any custom control when the row is in edit mode. Bind the ngModel directive of the custom control to the corresponding value by using the dataItem field provided by the template context.

   html

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

2. Provide a function that creates a new instance of the edited model.

   HTML

   <form novalidate #myForm="ngForm">
       <kendo-grid [kendoGridTemplateEditing]="createNewPatient">
       ...
       </kendo-grid>
   </form>

   TypeScript

   export class Patient {
       public patientId: number;
       public fullName = '';
       ...
   }
   
   public createNewPatient(): Patient {
       return new Patient();
   }

3. 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.

Manual Setup

For scenarios requiring full control over the editing behavior, you can manually handle the editing operations. This approach gives you complete flexibility but requires more code to implement.

Built-In Directives vs. Manual Setup

The Grid provides built-in editing directives that significantly reduce the amount of boilerplate code required for implementing inline editing. Consider using the Reactive Editing Directive or Template Editing Directive before implementing the manual setup.

The manual implementation uses either Angular Reactive Forms or Template-Driven Forms. This gives you the choice between two approaches:

• Using Reactive Forms
• Using Template-Driven Forms

Using Reactive Forms

The following example demonstrates how to manually implement an inline-editing Grid with Reactive Forms.

Change Theme

Theme

Loading ...

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

1. 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="totalCharges"
       title="Price"
       editor="numeric"
   ></kendo-grid-column>

2. Configure the CommandColumnComponent by defining the built-in command directives for the required editing operations. For more details, check the Editing Action Buttons 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>

3. 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.

ts

protected editHandler(args: EditEvent): void {
    const group = new FormGroup({
        'patientId': new FormControl(args.dataItem.patientId),
         // 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.

ts

public addHandler(args: AddEvent): void {
    const group = new FormGroup({
        'patientId': 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.

ts

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.

ts

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.

ts

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 how to manyally implement a Grid with inline editing using Template-Driven Forms.

Change Theme

Theme

Loading ...

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

1. Wrap the Grid component in a form tag.

   html

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

2. 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="fullName" title="Patient Name">
       <ng-template kendoGridEditTemplate let-dataItem="dataItem">
           <kendo-textbox
               [(ngModel)]="dataItem.fullName"
               name="fullName"
               required
           ></kendo-textbox>
       </ng-template>
   </kendo-grid-column>

3. Configure the CommandColumnComponent component by defining the built-in command directives for the required editing operations. For more details, check the Editing Action Buttons 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>

4. 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.

ts

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.

ts

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

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.

ts

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.

ts

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.

ts

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

Inline Editing on Row Click

The Angular Grid supports inline editing triggered by clicking anywhere on a row. This approach requires a manual implementation that handles the cellClick event of the Grid to put the clicked row into edit mode, eliminating the need for users to locate and click a specific Edit button.

The following example demonstrates how to achieve inline editing in the Grid by clicking anywhere on a row.

Change Theme

Theme

Loading ...

To implement the inline editing through a row click:

1. Handle the cellClick event that contains references to both the index of the clicked row and the respective data item in its event data.

   html

   <kendo-grid
       id="productsGrid"
       (cellClick)="editClick($event)" ...>
   </kendo-grid>

2. Depending on the behavior you wish to achieve, handle the click action outside the Kendo UI Grid for Angular by applying custom logic—for example, to save the currently edited item, use the following approach:

   ts

   // common constants
   const matches = (el, selector) => (el.matches || el.msMatchesSelector).call(el, selector);
   
   // component class code
   
   @ViewChild(GridComponent) private grid: GridComponent;
   
   public ngOnInit(): void {
     this.view = this.service.products();
   
     this.docClickSubscription = this.renderer.listen('document', 'click', this.onDocumentClick.bind(this));
   }
   
   public ngOnDestroy(): void {
       this.docClickSubscription();
   }
   
   private onDocumentClick(e: any): void {
       if (this.formGroup && this.formGroup.valid &&
           !matches(e.target, '#productsGrid tbody *, #productsGrid .k-grid-toolbar .k-button')) {
           this.saveCurrent();
       }
   }
   
   private saveCurrent(): void {
       if (this.formGroup) {
           this.service.save(this.formGroup.value, this.isNew);
           this.closeEditor();
       }
   }
   
   private closeEditor(): void {
       this.grid.closeRow(this.editedRowIndex);
   
       this.isNew = false;
       this.editedRowIndex = undefined;
       this.formGroup = undefined;
   }

Managing Focus

By default, when the user opens a row for editing, the Grid focuses the first available cell editor. To disable this behavior or focus the editor of a different cell, pass an options object to the editRow method with a columnIndex or skipFocus set.

The following example demonstrates how to focus the editor which corresponds to the clicked cell in the Grid.

Change Theme

Theme

Loading ...

Suggested Links

• Angular Grid Editing Basics
• Grid Editing Validation
• Setting Up Custom Editors
• API Reference of the GridComponent
• API Index of the Grid