resize columns if kendo grid is bound to dynamic data source? - grid

Question

I am trying to enable horizontal scrolling for my kendo grid. So far I've heard if you have added width to the columns definitions. But what do you do if data is dynamic?
I've tried a couple of things. This code can help you understand that.
var kgrid = $("#grid").kendoGrid({
height: 155,
pageable: true,
dataSource:ds,
dataBound:function(e){
var m = kgrid.data('kendoGrid');
console.log('dataBound: ', m.columns);
},
dataBinding:function(e){
var m = kgrid.data('kendoGrid');
var obj = ds.view()[0];
console.log('dataBinding columns before: ', m.columns);
//for(x in obj){
// if(x[0] == '_')
// continue;
// m.columns.push({field: x, width:'200px'});
//}
console.log('dataBinding columns after: ', m.columns);
}//,
//columns:[
// {field:'col1', width: '200px'},
//{field:'col2', width: '200px'},
//{field:'col3', width: '200px'},
//{field:'col4', width: '200px'}
//]
});
Also here is the link to my page: http://jsfiddle.net/deostroll/497zM/3/
I want to set some size to the column, and hence enable horizontal scrolling.

Answer 1

The only way I can see as of now you can do this is to completely destroy the grid and re-bind it every time new data arrives. And when it arrives we'd have to take the first item, read the properties and create the columns array. We'd have to set each object's width property here like mentioned below:
success: function (data) {
var cols = [];
var item = data[0];
$.each(item, function (key, val) {
cols.push({
field: key,
width: '325px'
});
});
theGrid.kendoGrid({
dataSource: {
data: data,
pageSize: 5
},
pageable: true,
columns: cols,
height: 225
});
} //end success
Fiddle: http://jsfiddle.net/deostroll/497zM/5/