Issue with using KoGrid in Single Page Application

[IvanSokalskyi]

I got strange behavior with using KoGrid in single page app - it's adding one more row selection checkbox each time, when I am switching between tabs in my application. To explain better, I have reproduced it here: http://jsfiddle.net/ArmHorse/vXjK7/. Please, advice.

[IvanSokalskyi]

Frankly, I am not sure that it's good solution, so posting possible fix for this behavior:

in the grid.js at buildColumns function, now I have: columnDefs.splice(0, 0, { but it should be if (columnDefs[0].field != '\u2714') { columnDefs.splice(0, 0, { ... }

[rpallas]

Hi ArmHorse, I have this issue as well. I tried your suggested solution, but columnDefs[0] was sometimes undefined so i added an extra check as follows:

if (columnDefs.length > 0 && columnDefs[0].field != '\u2714') {
        columnDefs.splice(0, 0, {
       ...
       }
}

Otherwise, the fix seems to work.

[rpallas]

Submitted a pull request - https://github.com/Knockout-Contrib/KoGrid/pull/213

[dotNetFollower]

Here is a custom binding to solve the issue and avoid the koGrid source code changing (I really don't like 3rd party source code changing in my project, even if it seems to be abandoned like this one)

ko.bindingHandlers["koGridFixed"] = {
   init: function (element, valueAccessor, allBindingsAccessor, data, context) {
      var gridOptions = ko.utils.unwrapObservable(valueAccessor());
      if (gridOptions && gridOptions.columnDefs) {
         var columnDefsArr = ko.utils.unwrapObservable(gridOptions.columnDefs);
         if (columnDefsArr && columnDefsArr.length > 0 && columnDefsArr[0].field === '\u2714')
            columnDefsArr.splice(0, 1);
      }
 
      return ko.bindingHandlers["koGrid"].init(element, valueAccessor, allBindingsAccessor, data, context);
   }
};

Replace all koGrid binding in views with koGridFixed. I've described these bug and fix in my blog - koGrid: Bug – Checkboxes column duplication.