Category / Section
How to display calculative column while Editing in Tree Grid
1 min read
This Knowledge base explains how to show calculative columns in Tree Grid while Editing.
Solution:-
We can display the Calculative columns using valueAccessor property of Tree Grid column. Using valueAccessor property we can access/manipulate value of displayed data. Also we can perform Editing by defining field property for that column.
This is demonstrated in the below sample code in which we have displayed the calculated value of taskID and duration values in Total column.
JS
let grid: TreeGrid = new TreeGrid({
dataSource: sampleData,
childMapping: 'subtasks',
treeColumnIndex: 1,
height: 400,
editSettings: {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
mode: 'Row',
newRowPosition: 'Below'
},
toolbar: ['Add', 'Delete', 'Update', 'Cancel'],
columns: [
{ field: 'taskID', headerText: 'Task ID', isPrimaryKey: true, textAlign: 'Right',
validationRules: { required: true, number: true}, width: 90
},
{ field: 'taskName', headerText: 'Task Name', editType: 'stringedit', width: 220, validationRules: {required: true} },
{ field: 'startDate', headerText: 'Start Date', textAlign: 'Right', width: 130, editType: 'datepickeredit',
format: 'yMd', validationRules: { date: true} },
{ field: 'duration', headerText: 'Duration', textAlign: 'Right', width: 100, editType: 'numericedit',
validationRules: { number: true, min: 0}, edit: { params: { format: 'n'}} },
{ field:"progress",headerText: 'Total',type:"number",valueAccessor: totalPrice, allowEditing:false, textAlign: 'Right',
validationRules: { required: true, number: true}, width: 90
}
]
});
grid.appendTo('#Grid');
function totalPrice(field, data, column){
return data.taskID + data.duration; //display the calculated values of the column using valueAccessor
};
Output
Fig 1: Display the calculated value in Total column
