Angular TreeList Preventing Editing for Specific Fields

Updated on Jun 11, 2026

The Angular TreeList 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, by setting the built-in editable option of the respective column(s) to false.

  html

  <kendo-treelist ... >
      <kendo-treelist-column field="id" [editable]="false"></kendo-treelist-column>
      ...
  </kendo-treelist>

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

  ts

  private createFormGroup(item: any): FormGroup {
      return new FormGroup({
          id: new FormControl(item.id),
          parentId: new FormControl(item.parentId),
          name: new FormControl(item.name, Validators.required),
          role: new FormControl(item.role),
          // specialty field is intentionally omitted to prevent editing
      });
  }

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

  ts

  public cellClickHandler({ sender, column, columnIndex, dataItem, isEdited }: CellClickEvent): void {
      const readonly = this.readOnlyColumns.has(column.field);
      if (!isEdited && !readonly) {
          sender.editCell(dataItem, columnIndex, this.createFormGroup(dataItem));
      }
  }

See Also

• API Reference of the TreeListComponent
• Angular TreeList Editing Basics
• API Index of the TreeList