多列标题iggrid与淘汰问题

我正在使用IgniteUI在站点上放置网格。使用KnockoutJS绑定网格。我在应用程序中的许多网格中都使用了这种设置，但我遇到了一个奇怪的问题。

我需要一个有多列标题的网格，然后是另一列。我使用了多列标题，它们运行良好。然而，在这种情况下，网格将把组后面的列中的信息放在组的第一列中，如图所示：http://jsfiddle.net/rc5a4vbs/3/.ColumnY列的两行中都应该有一堆Y，如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;
    }
} 

在我将分组列中的数据放入行对象中的对象之前，网格一直工作正常。这就是服务器向我发送信息的方式。当所有的柱子都在顶层时，效果很好。

如何通过对所提供数据的设置使数据正确显示？如有任何帮助，我们将不胜感激。