Hello,
First, we don’t support doT.js array syntax directly, that is to say, that you can’t write presenter like {{~it.array:value:index}} and you need use presenter and column value format callback together to do that.
In order to binding to array in one record, need define a column to mapping to one field in that array and then in the column value format call back you can use the column id to get the mapping index since it’s defined by yourself.
The format callback function takes a params object with the following values:-
colId: The id of the column to be formatted
value: The underline value of that column
data: The data item of that row
In your case, value will be null because there is not a directly mapping (the value is a array),but using the colId you can know the field index since it’s defined by yourself in the previous column configuration. Like what we did in the previous reply (check the colId to figure out the column index). Then get the value for that column, like data[field_index], and then check the datatype and format specific value.
The following is a running example, Hope it helps.
var data = [{
city: null,
createdDate: "0001-01-01T00:00:00",
createdUser: null,
Fields: [{
"Id": 0,
"Name": "Field01",
"Value": "01",
"FieldDataType": "1"
},
{
"Id": 1,
"Name": "field02",
"Value": "02",
"FieldDataType": "2"
},
{
"Id": 2,
"Name": "Field03",
"Value": "03",
"FieldDataType": "1"
},
{
"Id": 3,
"Name": "Field04",
"Value": "04",
"FieldDataType": "3"
}
]
},
{
city: null,
createdDate: "0001-01-01T00:00:00",
createdUser: null,
Fields: [{
"Id": 0,
"Name": "Field11",
"Value": "11",
"FieldDataType": "3"
},
{
"Id": 1,
"Name": "field12",
"Value": "12",
"FieldDataType": "4"
},
{
"Id": 2,
"Name": "Field13",
"Value": "13",
"FieldDataType": "5"
},
{
"Id": 3,
"Name": "Field14",
"Value": "14",
"FieldDataType": "3"
}
]
}
];
var YOUR_FORMAT_FUN = function (data) {
return 'YOUR_FORMAT(' + data + ')';
}
var getFieldIndex = function(colId) {
if (colId === 'Custom10') {
return 0
} else if (colId === 'Custom21') {
return 1
} else if (colId === 'Custom32') {
return 2
} else if (colId === 'Custom43') {
return 3
}
}
var formatDataFn = function (args) {
var rowFields = args.data.Fields;
var colValue;
var colId = args.colId;
var colData = rowFields[getFieldIndex(colId)];
return colData.FieldDataType === '5' ? YOUR_FORMAT_FUN(colData.Value) : colData.Value;
}
var FieldHeader = [{
FieldName: 'Custom1'
}, {
FieldName: 'Custom2'
}, {
FieldName: 'Custom3'
}, {
FieldName: 'Custom4'
}]
//use a hidden column to refere the array data.
var columns = [{
id: 'fields',
dataField: 'Fields',
visible: false
}];
for (var i = 0; i < FieldHeader.length; i++) {
var Cus = FieldHeader[i];
var id = Cus.FieldName + i;
var localIndex = i; //fix Closure issue
n = {
id: id,
caption: Cus.FieldName,
dataField: '',
width: 200,
format: formatDataFn,
presenter: '<div><span>{{=it.' + id + '}}</div></span>' //change the presenter to use it.[COL_ID] to bind the data.
}
columns.push(n);
}
var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
Thanks,
Reeva