Category / Section
How to disable Editing for particular row/cell based on condition
2 mins read
This Knowledge base explains how to disable Editing of particular row or cell based on specific conditions using Events in different modes such as Row and Cell
Row Editing:-
You can disable the editing for a particular row by using the actionBegin event of TreeGrid based on “requestType” as “beginEdit”
This is demonstrated in the below sample code in which the rows having the value for `approved` column as “false” is 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”
}
}
}
Cell Editing:-
You can disable Editing for particular cell based on cell value using cellEdit event of the TreeGrid.
This is demonstrated in the below sample code in which cell value as “false” is 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: '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
}
}
