You can directly save JSON object in the data field of ValueType.OBJECT type.
Basically, in the grid data cell which is connected to the object type field, it will display the values returned from keyPath or keyCallback property which is specified in the corresponding field, and you can also use ValueColumn.displayCallback to create the display values like the other data type.
In "Company" column below, it is connected to the field in which saves the objects of the same type.
{ name: 'Apple', addr: 'NewYork' }
And, "name" is specified in keyPath of the corresponding field.
"Sales/Growth" and "Sales" columns are connected to the field which specifies the object of below type, and you can set keyCallback or specify ValueColumn.displayCallback to display them in the data cell.
{ amount: '1234', growth: '1.3' }
ds.setFields([{
"fieldName": "sales",
"dataType": "object",
"keyCallback": function (field, value) {
return value.amount + ' / ' + value.growth;
}
},
...
grid.setColumns([{
"fieldName": "sales",
"displayCallback": function (index, value) {
return value.amount;
}
},
...
In addition, the user cannot directly change the values in this kind of data cell, but should save them as GridDataSet.setValue with using another input method. At this point, the change of JSON object which is saved in the data set can only be checked in the object level. In other words, even if get the object saved in the data set (getValue), change the properties and save them again (setValue), change events will not be fired by default. They will be fired only if there is a change happened to the object itself.
If run 'SetValue' below, changes will not be reflected immediately in the grid as Dataset event has not fired. However, if call 'SetValueEx' which fires change events, they will be immediately reflected in the grid.
Change the value of the selected "Company" column cell.
The sorting of the object type columns is set based on the comparison value returned from DataField.compareCallback which has been set in the field. When callback is not specified, it will be sorted by the value returned from keyCallback or the property value of the object specified through keyPath.
{
"fieldName": "sales",
"dataType": "object",
compareCallback: function (v1, v2) {
return v1.growth - v2.growth;
}
}
When export to an Excel file, the value of the object type will be saved according to the conversion mode of objectCallback specified in Export Options according to the data type of the value returned from keyPath or keyCallback.
DataLudi.exportToExcel(grdMain, {
fileName: "dlgrid.xlsx",
objectCallback: function (row, column, v) {
if (column.name() == 'Sales3') {
return v.amount;
}
return v;
}
});