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;
    }
}

Мрежата работеше правилно, докато не направих данните, които са в групираните колони, в обект в обекта на реда. Ето как сървърът ще ми изпрати информацията. Когато всички колони бяха на най-високо ниво, работеше добре.

Как мога да накарам данните да се показват правилно с тази настройка за предоставените данни? Всяка помощ ще бъде високо оценена.


javascript knockout.js infragistics ignite-ui
person mpinales    schedule 20.02.2015    source източник

Отговори (1)


arrow_upward
1
arrow_downward

Проблемът не е причинен от заглавките с няколко колони, а от свойството на сложния обект, което имате във вашите данни.
Ако искате да обвържете ColumnY и ColumnZ, тогава трябва да ги декларирате като необвързани колони и във форматиращия функция извлича техните стойности от свойството TestConditionGroup на данните. Правите това, като използвате втори параметър във функцията за форматиране, който ще ви даде препратка към текущите данни на реда.

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];  
  } 
}];

Също така, за да направите данните от колоната TestConditionGroup достъпни във функциите на формататора, трябва да конфигурирате localSchemaTransform на false. Последното нещо, което трябва да направите, е да зададете autoGenerateColumns на false, защото е true по подразбиране.
Ето връзката към актуализираната цигулка: http://jsfiddle.net/rc5a4vbs/4/

person Martin Pavlov    schedule 10.03.2015