Extending In-Cell Editing Directive to Prevent Editing Specific Cells

Environment

Product

Progress® Kendo UI® Data Grid for Angular

Description

I want to extend the kendoGridInCellEditing directive to prevent editing on specific cells based on conditions from the cellClick event arguments. For example, I want to prevent editing in the first column of the Grid. The default behavior of the kendoGridInCellEditing directive is to allow editing for all cells, and it uses the k-grid-ignore-click class to disable the click handler for specific elements.

The goal is to allow more flexible editing behavior without relying on the k-grid-ignore-click class.

This knowledge base article also answers the following questions:

• How to disable editing for specific cells in Kendo UI for Angular Grid?
• How to extend the Kendo UI for Angular Grid In-Cell Editing directive?
• How to conditionally allow editing in Kendo UI for Angular Grid cells?

Solution

To achieve this, extend the kendoGridInCellEditing directive and manually define the logic to prevent editing for specific cells based on your application requirements.

1. Create a custom directive that extends the InCellEditingDirective.

   ts

   import { Directive, Input } from '@angular/core';
   import { InCellEditingDirective, CellClickEvent } from '@progress/kendo-angular-grid';
   import { CreateFormGroup } from '@progress/kendo-angular-grid';
   
   @Directive({
     selector: '[customGridInCellEditing]',
     standalone: true,
   })
   export class CustomInCellEditingDirective extends InCellEditingDirective {
   }

2. Override the cellClickHandler method to define conditional logic for editable cells.

   ts

   protected override cellClickHandler(args: CellClickEvent): void {
     // Prevent editing for the first column
     // You can customize this condition based on your requirements
     if (args.columnIndex === 0) {
       return;
     }
   
     // Invoke the default behavior for other cells
     super.cellClickHandler(args);
   }

3. Create a form group for the cell editing and bind the custom directive to it.

   html

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

The following example demonstrates how to extend the kendoGridInCellEditing directive to prevent editing in the first column of the Grid.

Change Theme

Theme

Loading ...

See Also

• Kendo UI for Angular Grid Editing Overview
• Kendo UI for Angular Grid In-Cell Editing
• Grid Editing Directives