multi column headers iggrid with knockout issue

Question

I am using IgniteUI to place a grid on a site. The grid is bound using KnockoutJS. I've used this setup for many grids in my application, but I've run into a weird issue.

I need to have a grid that has a multi column header, and another column after that. I've used multi column headers and they work fine. In this instance, though, the grid will place the info from the column that should be after the group into the first column of the group, as seen in this fiddle: http://jsfiddle.net/rc5a4vbs/3/. The ColumnY column should have a bunch of Ys in it on both rows, as seen in the Javascript.

function ViewModel() {
    var self = this;   
    self.value = ko.observable(false);
    self.data = ko.observableArray([ 
        { "ColumnA": ko.observable(1), "ColumnD": ko.observable(21), "ColumnE": ko.observable("dkifhugb"),
          "ColumnF": ko.observable(true), "ColumnG": ko.observable("false"),
          "Procedure": ko.observable("Final Column"),
          "TestConditionGroup": {
              "ColumnY": ko.observable("YYYYYYYYYYYY"), "ColumnZ": ko.observable("ZZZZZZZZZ") 
          }
        },
        { "ColumnA": ko.observable(2), "ColumnD": ko.observable(14), "ColumnE": ko.observable("5347347"),
          "ColumnF": ko.observable(false), "ColumnG": ko.observable("string"),
          "Procedure": ko.observable("Final Column"),
          "TestConditionGroup": {
             "ColumnY": ko.observable("yyyyyyyyyyyy"), "ColumnZ": ko.observable("zzzzzzzzzzz") 
          }
        }
    ]);
    self.getColumns = function() {
        //debugger;
        var columns = [
                { key: 'ColumnA', headerText: '', width: '0px', hidden: true },
                { key: 'ColumnD', headerText: 'Sequence', width: '100px' },
                { key: 'ColumnE', headerText: 'Iteration', width: '100px' },
                { key: 'ColumnF', headerText: 'Risk', width: '100px' },
                { key: 'ColumnG', headerText: 'Sub-Chapter Title', width: '200px' }
            ];
        var columns2 = [
            { key: 'TestConditionGroup', headerText: 'ColumnY', width: '100px', 
              formatter: function(val){
                  return val[this.headerText];  
              } 
            },
            { key: 'TestConditionGroup', headerText: 'ColumnZ', width: '100px', 
              formatter: function(val){
                  return val[this.headerText];  
              } 
            }
        ];
        columns.push({ key: 'TestConditionGroup', headerText: 'Test Conditions', group: columns2 });
        columns.push({ key: 'Procedure', headerText: 'Procedure', width: '200px'});
        return columns;
    }
}

The grid was working correctly until I made the data that is in the grouped columns into an object within the row object. This is how the server will be sending me the info. When all of the columns were on the top level it worked fine.

How can I get the data to appear correctly with this set up for the supplied data? Any help would be greatly appreciated.

Martin Pavlov Martin Pavlov · Accepted Answer · 2015-03-10T15:18:20

The problem is not caused by the Multi-Column Headers, but from the complex object property that you have in your data.
If you want to bind the ColumnY and ColumnZ then you have to declare them as unbound columns and in the formatter function extract their values from the TestConditionGroup property of the data. You do that by using a second parameter in the formatter function which will give you a reference to the current row data.

var columns2 = [
{ key: 'ColumnY', headerText: 'ColumnY', width: '100px', unbound: true,
  formatter: function(val, row){
      return row["TestConditionGroup"][this.headerText];  
  } 
},
{ key: 'ColumnZ', headerText: 'ColumnZ', width: '100px', unbound: true, 
  formatter: function(val, row){
      return row["TestConditionGroup"][this.headerText];  
  } 
}];

Also to make the data from the TestConditionGroup column available in the formatter functions you have to configure localSchemaTransform to false. The last thing you need to do is to set the autoGenerateColumns to false, because it's true by default.
Here is the link to the updated fiddle: http://jsfiddle.net/rc5a4vbs/4/

multi column headers iggrid with knockout issue

1 Answers