How to display calculative column while Editing in Tree Grid

1 min read

This article explains how to show calculative columns in Tree Grid while Editing.

Solution:

We can display the Calculative columns using valueAccessor property of the 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 the Total column.

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

Display the calculated value in Total column