Preventing Editing for Specific Fields

The TreeList 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.

  Copy Codeprivate createFormGroup(item: any): FormGroup {
      const group = new FormGroup({
          'ReportsTo': new FormControl(item.ReportsTo),
          'FirstName': new FormControl(item.FirstName, Validators.required),
          'LastName': new FormControl(item.LastName, Validators.required),
          // 'Position': new FormControl(item.Position),
          'Extension': new FormControl(item.Extension, Validators.compose([Validators.required, Validators.min(0)]))
      });
  
      if (item.EmployeeId) {
          group.addControl('EmployeeId', new FormControl(item.EmployeeId));
      }
  
      return group;
  }

• Skip the calling of the editCell method from the cellClick event handler.

  Copy Codepublic 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));
      }
  }

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

Suggested Links

• API Reference of the TreeListComponent
• Overview of Editing
• API Index of the TreeList