New to Kendo UI for Angular? Start a free 30-day trial

Preventing Editing for Specific Fields

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

The following example demonstrates how to prevent editing the Position column cells.

Change Theme

Theme

Loading ...

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.

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

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

Preventing Editing for Specific Fields

Suggested Links