In every example of the WijGrid the columns are created manually in an array like this:
<table id="dataGrid" data-bind="wijgrid: {
data: dataRows,
pageSize: pageSize,
pageIndex: pageIndex,
totalRows: totalRows,
allowPaging: true,
allowSorting: true,
sorted: sorted,
pageIndexChanged: paged,
columns: [
{ sortDirection: 'ascending', dataType: 'number', dataFormatString: 'n0', headerText: 'ID', width: 60 },
{ headerText: 'Product' },
{ dataType: 'currency', headerText: 'Price', width: 100},
{ dataType: 'number', dataFormatString: 'n0', headerText: 'Units', width: 100}]
}">
</table>
OR in the WijGrid object like this:
$('#activejobs').wijgrid({
columns: [
{ headerText:'Customer',allowSort:true, dataType:'string' },
{ headerText:'Job Number',allowSort:true, dataType:'string'},
{ headerText:'Scheduled Completion',allowSort:true, dataType:'datetime', sortDirection:'ascending'},
{ headerText:'Description',allowSort:false, dataType:'string', ensurePxWidth:true, width:250 },
{ headerText:'Total Hours',allowSort:true, dataType:'number'}
],
columnsAutogenerationMode: "merge",
dynamic:true
});
When using knockout, however, I can't find a way to edit or manipulate automatically generated columns based on server data. For example, the project I am working on returns the amount of hours that a particular job will spend in each manufacturing process, or department. The customer can add or delete processes or departments over time, so I cannot guarantee that these columns will always be the same, nor can I guarantee their data type, sorting options, classes, formatting and etc.
With knockout, I can iterate through my data and add the columns on demand, and although this works well, I have no way of changing each column parameter.
Below is the code I am using:
var viewModel = {
pageSize: ko.observable(10),
pageIndex: ko.observable(0),
sortCommand: ko.observable("EndDate asc"),
dataRows: ko.observableArray([]),
totalRows: ko.observable(0),
sorted:function(e,data){
viewModel.sortCommand(data.sortCommand);
},
paged:function(e,data){
viewModel.pageIndex(data.newPageIndex);
},
load:function(){
$.ajax({
url:"/workcenters/get-active-jobs/",
datatype:'json',
data:{
format: 'json',
inlinecount: "allpages",
orderby: viewModel.sortCommand(),
top: viewModel.pageSize(),
skip: viewModel.pageIndex() * viewModel.pageSize(),
page:viewModel.pageIndex()
},
success:function(result){
var data = result.d.results;
var arr = [];
$.each(data,function(i){
var collection = data[i];
arr.push(new job(collection));
});
viewModel.totalRows(result.d.__count);
viewModel.dataRows(arr);
}
});
}
};
var job = function(data){
var collection = {
"Customer Name": ko.observable(data.customername),
"Job Number": ko.observable(data.jobnumber),
"Delivery Date": ko.observable(data.projectedend),
Description: ko.observable(data.description),
Hours: ko.observable(data.hours)
};
var workhoursCollection = data.workhours;
$.each(workhoursCollection,function(i,workhours){
var heading = workhours.elements.heading;
collection[heading] = ko.observable(workhours.elements.value);
});
return collection;
};
$(document).ready(function(){
$('#pagesize').wijdropdown();
$('#activejobs').wijgrid({
allowColSizing:true,
allowColMoving:true,
allowKeyboardNavigation:true,
allowPaging:true,
allowSorting:true,
cellStyleFormatter: function(args){
},
rowStyleFormatter: function(args){
},
columns: [
{ headerText:'Customer',allowSort:true, dataType:'string' },
{ headerText:'Job Number',allowSort:true, dataType:'string'},
{ headerText:'Scheduled Completion',allowSort:true, dataType:'datetime', sortDirection:'ascending'},
{ headerText:'Description',allowSort:false, dataType:'string', ensurePxWidth:true, width:250 },
{ headerText:'Total Hours',allowSort:true, dataType:'number'}
],
columnsAutogenerationMode: "merge",
culture:"en",
dynamic:true,
highlightCurrentCell: true,
loadingText:"Please wait a moment...",
scrollMode:"auto",
//showGroupArea:true,
staticRowIndex:0,
staticColumnIndex:0
});
ko.applyBindings(viewModel);
viewModel.load();
viewModel.sortCommand.subscribe(function(newValue){
viewModel.load();
});
viewModel.pageIndex.subscribe(function(newValue){
viewModel.load();
});
viewModel.pageSize.subscribe(function(newValue){
viewModel.load();
$('#pagesize').wijdropdown("refresh");
});
});
function addColumn(rowObject){
var grid = $('#activejobs');
options = grid.wijgrid('option');
grid.wijgrid('destroy');
options.columns.push(rowObject);
grid.wijgrid(options);
}
The Object that the server returns looks like this (PHP):
d = array(
'results'=>array{
"customername"=>$data->name,
"jobnumber"=>$data->number,
"projectedend"=>$data->projectedenddate,
"description"=>$data->description,
"hours"=>$data->estimatedhours,
"workhours"=>$workgroupCollection
}, '__count'=>$count
)
$workgroupCollection = array{
'info'=>array('heading'=>$workgroup->name,'name'=>$workgroupName),
'elements'=>array(
'name'=>$element,
'heading'=>$workAreaModel->name,
'value'=>$hours
)
}
Eventually, I want to use this data to create Bands as well, but the first step is to be able to edit dynamically generated column properties.
Summary: How can I build a wijmo Grid with some default columns, then add new columns at run time?
