New to Kendo UI for Angular? Start a free 30-day trial
Prevent Editing for Specific Fields
The Grid allows you to restrict users from editing specific fields. This is suitable when you want some columns to stay the same, while still letting users edit the rest of the information.
Change Theme
Theme
Loading ...
To prevent editing specific cells, you can use any of the following approaches:
-
Disable editing for selected fields, such as IDs or company names, by setting the built-in
editable
option of the respective column(s) tofalse
.html<kendo-grid ... > <kendo-grid-column field="ProductID" [editable]="false"></kendo-grid-column> ... </kendo-grid>
-
Omit the field(s) declaration in the
FormGroup
.tspublic 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 thecellClick
event handler.tspublic 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.
Change Theme
Theme
Loading ...