Each DataColumn of the grid is connected to a field of the DataSet to display or update the corresponding value, and if use Calculated Column, you can configure the grid column without directly connecting to the data set field.
The values displayed in the data cells which are contained in Calculated Column, are calculated each time through the settings specified in valueExpression or valueCallback, and if specify cached property as true, you can improve the display performance by storing the value calculated once. In the grid below, cached of "Sum2" column has been set as true.
var columns = [
...
{
"name": "Amount",
"type": "calced", // Calculated column
"valueType": "number", // Data type
"valueExpression": "unit_price * quantity",
}, {
"name": "Amount2",
"type": "calced",
"valueType": "number",
"valueCallback": function (column, row) {
return row.getValue('unit_price') * row.getValue('quantity');
},
"cached": true,
}, ...
]
In the column settings, Calculated Column specifies "type" as "calced", and also specifies the value to be displayed through valueExpression or valueCallback. Also, you should specify valueType to set the data type of the calculated value. If do not set, it will be set as NUMBER.
Since the values displayed in Calculated Column are temporary values, you cannot group by this column or display the sum in the footer basically, either. If you must display the sum, you can use ValueColumn.summaryCallback. In the grid above, summaryCallback has been set in "Sum2" column.
"footer": {
"summaryCallback": function (column) {
var grid = column.grid();
var fld = grid.dataSource().getFieldIndex('quantity');
var fld2 = grid.dataSource().getFieldIndex('unit_price');
var v = 0;
for (var i = grid.rowCount(); i--;) {
v += grid.getValueAt(i, fld) * grid.getValueAt(i, fld2);
}
return v;
},
"styles": {
"numberFormat": "#,##0.00",
}
}