1

I have a wijmo grid which is setting the column header same as the datakey. I would like to set the column header different than how the datakey appears. But my data returns different number of columns. I tried with the following approach but its not working.

JS

 var columnList = ['a','b','c','d'];
 setColumnHeaders(columnList);// this a call from a different VM

 self.setColumnHeaders = function (columnList) {
   $.each(columnList, function (index) {
     self.columnsHeader.push(columnList[index]);                   
   });

 ko.applyBindings(viewModel, $(".container")[0]);

HTML

 <table id="grid" data-bind="wijgrid: {
            data: data ,                
            columnsAutogenerationMode: false,                
            columns: [{headerText: columnsHeader}],
           "></table>
Nathan Fisher
  • 7,961
  • 3
  • 47
  • 68
user2904389
  • 43
  • 1
  • 7
  • I can do it after binding the grid ,replacing the column header and then refresh the grid. But is there a way to bind with the dynamic column header. – user2904389 Jun 26 '15 at 20:14
  • As such, column headers does not exist as independent collection nor it supports two way binding so you cannot set them dynamically while initializing the grid. The only possible workaround is to create the complete columns collection manually including dataKey property, visible property etc. and then, set this collection to the columns property instead of headerText property. – Ashish Jun 29 '15 at 08:55

2 Answers2

1

As such, column headers does not exist as independent collection nor it supports two way binding so you cannot set them dynamically while initializing the grid. The only possible workaround is to create the complete columns collection manually including dataKey property, visible property etc. and then, set this collection to the columns property instead of headerText property

Ashish
  • 594
  • 1
  • 6
  • 12
0

You can set dynamic column's header like this:
grid.columns[1].header = 'header-name';

Duong Chu
  • 41
  • 6