Category / Section
How to disable Editing for particular row/cell based on condition
3 mins read
This article explains how to disable Editing of a particular row or cell based on specific conditions using Events in different modes such as Row and Cell.
Row Editing:
You can disable editing for a particular row by using the actionBegin event of TreeGrid based on the “requestType” as “beginEdit”
This is demonstrated in the below sample code below, where rows with the value `false` in the 'approved' column are prevented from editing.
JS
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
allowPaging:true,
height: 400,
childMapping: 'subtasks',
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Row'},
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right'},
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'startDate', headerText: 'Start Date', width: 90,textAlign: 'Right', type: 'date', format: 'yMd'},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'approved', headerText: 'Approved', width: 110 }
],
});
treeGridObj.appendTo('#TreeGrid');
treeGridObj.actionBegin = function(args) {
if (args.requestType === 'beginEdit') {
if (args.rowData.approved == false) {
args.cancel = true; //prevented RowEditing when`approved` column as “false”
}
}
}
You can find the samples here:
Cell Editing:
You can disable Editing for a particular cell based on the cell value using the cellEdit event of the TreeGrid.
This is demonstrated in the below sample code, in which the cell value as “false” is prevented from being edited.
JS
let treeGridObj: TreeGrid = new TreeGrid({
dataSource: sampleData,
allowPaging:true,
height: 400,
childMapping: 'subtasks',
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Cell'},
treeColumnIndex: 1,
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, width: 90, textAlign: 'Right'},
{ field: 'taskName', headerText: 'Task Name', width: 180 },
{ field: 'startDate', headerText: 'Start Date', width: 90,textAlign: 'Right', type: 'date', format: 'yMd'},
{ field: 'duration', headerText: 'Duration', width: 80, textAlign: 'Right' },
{ field: 'approved', headerText: 'Approved', width: 110 }
],
});
treeGridObj.appendTo('#TreeGrid');
treeGridObj.cellEdit = function(args) {
if (args.value == false) {
args.cancel = true; //prevented cellEditing where value as false
}
}
You can find the samples here:
