Updating SlickGrid with Knockoutjs via dependObservable

Question

I am using SlickGrid with knockout.js using the example http://jsfiddle.net/rniemeyer/A9NrP/

I have a grid fill and an add button that works according to an example. The problem I am facing is when I update the rows property of my view model through ko.dependentObservable, the update section of ko.bindingHandlers starts, but the weak grid does not accept the changes.

html that defines the binding:

<div id="grid" data-bind="slickGrid: { data: rows, columns: columns }"></div> 

SlickGrid code (same as in the example):

 var grid; ko.bindingHandlers.slickGrid = { init: function (element, valueAccessor) { var settings = valueAccessor(); var data = ko.utils.unwrapObservable(settings.data); var columns = ko.utils.unwrapObservable(settings.columns); var options = ko.utils.unwrapObservable(settings.options) || {}; grid = new Slick.Grid(element, data, columns, options); }, update: function (element, valueAccessor, allBindingAccessor, viewModel) { var settings = valueAccessor(); // I can see the correct data here but the grid does not update var data = ko.utils.unwrapObservable(settings.data); grid.render(); } } 

my model:

 myViewModel = { data : ko.observableArray(), tabs: ['High', 'Medium', 'Low'], rows : ko.observableArray([]), columns : [ { id: "id", name: "ID", field: "id" }, { id: "Location", name: "Location", field: "Location" }, { id: "Comment", name: "Comment", field: "Comment" } ], addItem: function() { // this works and SlickGrid adds a new row this.rows.push(new ModelRow(0, "New", 5.00)); }, 

}

The code that makes the ajax call and runs ko.bindingHandlers.slickGrid.update, but slickgrid does not seem to pick up the changes, ajax really returns valid data and quits when the user clicks on the link:

 ko.dependentObservable(function () { if (this.data.lastAlarmRequest) this.data.lastAlarmRequest.abort(); this.data.lastAlarmRequest = $.get("/audit/alarmsdata/high", null, this.rows); }, i2owater.viewmodels.AlarmsForViewModel); 

Why does the addItem function work, but not ko.bindingHandlers.slickGrid.update? In the update function, I can see the correct data to which the grid is attached. Is it because all the data in the row properties is overwritten?

UPDATE: I tried using grid.invalidate (); but it does not work and also saw that the addItem function stops working after ko.dependentObservable is executed

Answer 1

I updated rniemeyer a very useful jsfiddle to fix the scroll error. In the original, try adding 20 lines, then use the vertical scroll bar and you will see a problem with the user interface. The problem is that scrollpane does not correctly calculate the size of the view, so the scrollbar fluctuates.

Here is the updated version.

EDIT: the knockout and slickgrid were updated, so I updated the fiddle: EDIT: And again:

http://jsfiddle.net/5ddNM/79/

Please note the following:

 grid.resizeCanvas(); 

Answer 2

I had the same problem and found a solution by changing the update code to the following:

 update: function (element, valueAccessor, allBindingAccessor, viewModel) { var settings = valueAccessor(); // I can see the correct data here but the grid does not update var data = ko.utils.unwrapObservable(settings.data); grid.setData(data,true) grid.render(); } 

By the way, the true parameter in setData indicates whether you want the grid to scroll backward or not.

Answer 3

In my case, I needed to use slickgrid and knockout with other view modes tied to various controls. I used http://jsfiddle.net/hlascelles/5ddNM/ as an example and fixed a few things there. Use http://jsfiddle.net/Schnapz/z4YLD/2/ or see below.

You can leave the declaration of the grid, element and view of the Model as written in the example. But the binding should be common to all models, including viewModel (name it in pageLoad or else):

 ko.applyBindings(); 

And addItem should look like this:

 addItem: function () { viewModel.items.push(new Item(0, "New", 5.00)); }, 

Because using 'this' here will not work.

Then the custom binder should look like this (token from another example somewhere):

 ko.bindingHandlers.slickGrid = { init: function (element, valueAccessor) { var settings = valueAccessor(); var data = ko.utils.unwrapObservable(settings.data); var columns = ko.utils.unwrapObservable(settings.columns); var options = ko.utils.unwrapObservable(settings.options) || {}; grid = new Slick.Grid(element, data, columns, options); }, update: function (element, valueAccessor, allBindingAccessor, viewModel) { var settings = valueAccessor(); var data = ko.utils.unwrapObservable(settings.data); //just for subscription grid.setData(data, true); grid.resizeCanvas(); // NB Very important for when a scrollbar appears grid.render(); } 

}

In addition, I had a problem with adding elements, but I could not see the result. After some research on slickgrid sources, I found this solution:

 <div id="grid" class="grid-canvas" data-bind="slickGrid: { data: viewModel.items, columns: viewModel.columns, options: { enableColumnReorder: false, rowHeight: 20, enableAddRow: true, autoHeight: true } }"></div> <a href="#" class="btn-link" data-bind="click: viewModel.addItem">Add Item</a> 

Because somehow, by default, grid-viewport had 0px height :) Just added some parameters during the binding.