Prevent Editing for Specific Fields

The Grid enables you to restrict users from editing specific fields. This is suitable when the users are allowed to edit the Grid data, but at the same time, you want to keep certain fields in a read-only state.

You can prevent fields (such as IDs or company names) from being edited by using any of the following approaches:

• Set the editable option of the respective column(s) to false.

  Copy Code<kendo-grid ... >
      <kendo-grid-column field="ProductID" [editable]="false"></kendo-grid-column>
      ...
  </kendo-grid>

• Omit the field(s) declaration in the FormGroup.

  Copy Codepublic createFormGroup(dataItem: any): FormGroup {
      return this.formBuilder.group({
          // 'ProductID': dataItem.ProductID,
          'UnitPrice': dataItem.UnitPrice,
          'UnitsInStock': [dataItem.UnitsInStock, Validators.compose([Validators.required, Validators.pattern('^[0-9]{1,3}')])],
          'Discontinued': dataItem.Discontinued
      });
  }

• Skip the editCell method invocation in the cellClick event handler.

  Copy Codepublic cellClickHandler({ sender, column, rowIndex, columnIndex, dataItem, isEdited }) {
      if (!isReadOnly(column.field)) {
          sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
      }
  }

The following example demonstrates the complete implementation of the cellClick event-handler approach.

Suggested Links

• API Reference of the GridComponent
• Overview of Editing
• API Index of the Grid