2

I'm using the Knockout-Kendo.js library to bind a Kendo Grid with Knockout bindings. I've built a system that loads multiple datasources that each have their own set of columns assigned to them. I have everything working great with the exception of getting the new columns collection assigned to the Knockout bound Kendo Grid.

I've read a few ways to get the columns reinitialized but all of these require the grid to be destroyed and recreated. I'm not sure how I would go about this with the Knockout bound grid. I'm using the code below.

HTML:

<div data-bind="kendoGrid: gridOptions"></div>

Knockout/JS:

self.SearchResults and self.GridColumns are both observable arrays.

self.gridOptions = {
    data: self.SearchResults,
    columns: self.GridColumns
};

When I update self.SearchResults, the grid updates correctly. Updating self.GridColumns has no effect on the displayed columns in the grid.

If anyone can point me in the right direction on how I would get the columns collection updated and displayed in conjunction with using the Knockout binding provided by the library linked above I would be greatly appreciative.

Sherman
  • 853
  • 5
  • 16
  • `self.gridOptions` should be an observable so the data binding will know when it has been updated. Upon updating a member, call `self.gridOptions.valueHasMutated()`. I'm just basing this on how things *should* work; I don't know how the binding actually *does* work. – Roy J Aug 09 '16 at 12:45

1 Answers1

0

So, I just figured this out. Turned out to be really simple.

What I ended up doing was this:

  1. Get a reference to the grid and the current grid options
  2. Assign the updated self.GridColumns() computed to the options

  3. Set the grid options to the updated options

        var grid = $("#grid").data("kendoGrid");
    var options = grid.getOptions();
    options.columns = self.GridColumns();
    grid.setOptions(options);
Sherman
  • 853
  • 5
  • 16