Preventing Editing for Specific Fields

The Grid enables you to restrict user input and updates for specific fields, cells, and columns.

You can prevent undesired user interfering with data, such as product ids or company names, by using any of the following approaches:

  • Set the editable option of the column to false.

  • Omit the field declaration in the FormGroup.

    public 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 calling of the editCell method from the cellClick event handler.

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

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?