How to observe jqgrid data using knockout.js?

Question

I am using knockout.js to create jqgrid and populate data with an observable array. (using the Knockout-jqGridBinding plugin) Array for jqgrid data:

var initialData = [{ id: ko.observable(1), name: ko.observable("Well-Travelled Kitten"), sales: ko.observable(352), price: ko.observable(75.95) }]; function viewModel() { var self = this; self.items = ko.observableArray(result); } ko.applyBindings(new viewModel()); 

HTML

  <table> <tbody data-bind="foreach: items"> <tr> <td><input data-bind="value: id"/></td> <td><input data-bind="value: name"/></td> <td><input data-bind="value: sales"/></td> <td><input data-bind="value: price"/></td> </tr> </tbody> </table> <table id="items" data-bind="grid: { data: items }" > <thead> <tr> <th data-field="actions" style="width:27px;" data-sortable="false"></th> <th data-field="name" width="150px" data-editable="true">Item Name</th> <th data-field="sales" data-editable="true">Sales Count</th> <th data-field="price" data-editable="true">Price</th> </tr> </thead> </table> 

Now it fills the data in jqgrid, and if I change the data outside, it is also reflected in the grid, but when I change the data in jqgrid using "cellEdit", it is not reflected.