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

i trying enable horizontal scrolling kendo grid. far i've heard if have added width columns definitions. do if data dynamic?

i've tried couple of things. code can 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 link page: http://jsfiddle.net/deostroll/497zm/3/

i want set size column, , hence enable horizontal scrolling.

the way can see of can destroy grid , re-bind every time new data arrives. , when arrives we'd have take first item, read properties , create columns array. we'd have set each object's width property here 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/