Reputation: 1098
I work in durandal project and enjoy using your kendo-ui-grid.
In my project, I need to build the grid-columns array dynamically. i.e, I get (by ajax request) data-array of info about every grid-column and build the grid by loop over the data-array.
Here is my code:
function initGrid(formInfo, FormFieldsInfo) {
//=========================================
//region: build dinamic fridColumns, gridSchema
//=========================================
var columns = [];
var fields = {};
var primaryKey = null;
$.each(FormFieldsInfo, function addGridColumn(index, fieldInfo) {
var column = {};
column.field = fieldInfo.FieldName;
column.headerTemplate = "<span class='headerGrid-att'>" + fieldInfo.DisplayTitle + "</span>";
column.attributes = { "class": "columnBorder" };
column.template = getColumnTemplate(fieldInfo.ComponentType, fieldInfo.FieldName);
column.editor = getColumnEditor(fieldInfo.ComponentType);
columns.add(column);
var field = {};
field.type = global.enums.fieldType[fieldInfo.FieldType];
field.editable = true;
fields[fieldInfo.FieldName] = field;
if (fieldInfo.isKey == true) {
primaryKey = fieldInfo.FieldName;
}
});
vm.grid.gridOptions.columns = columns;
vm.grid.schema = {
data: 'Data',
model: {
id: primaryKey,
fields: fields
}
};
var dataQuery = {
UserNo: global.cache.get(global.enums.cacheItems.USER).Id,
ProcedureName: formInfo.SelectProcedure
};
//=========================================
//end region: build dinamic fridColumns, gridSchema
//=========================================
vm.grid.dataSourceUrl = global.webApiConfig.getApiPath(global.enums.httpPath.GetETableGridData.path + '?query=' + JSON.stringify(dataQuery));
vm.grid.remoteDataSource = true;
vm.grid.setDataSource();
vm.grid.setGridOptionsSetting({ editable: "popup" });
}
function getColumnTemplate(type, fieldName) {
switch (type) {
case global.enums.componentType.checkBox:
return function checkBoxTemplate(dataItem) {
return vm.grid.activeNotActiveTemplate(dataItem[fieldName])
};
case global.enums.componentType.dateTime:
return function dateTemplate(dataItem) {
return vm.grid.ParseDateFormat(dataItem, fieldName)
};
default: //simple edit, combo
return ???
}
}
function getColumnEditor(type, fieldName) {
switch (type) {
case global.enums.componentType.date:
return function dateEditor(container, options) {
vm.grid.datePickerEditor(container, options, false);
}
case global.enums.componentType.time:
return function timeEditor(container, options) {
vm.grid.inputTimeEditor(container, options, new timeInput())
}
default: //simple edit,checkBox, combo
return ???
}
}
My question is:
At regular grid, with consts columns array, I don't give any template or editor for regular fields (such as simple string data), and don't give any editor to boolean-checkBox column.
But, in this case, I must return template/editor function always. So, what can I do? What is the defult code that I have to write? (What do I have to write insead of the ??? marks?)
Thank you!
Upvotes: 0
Views: 892