jquery - koGrid empties our grid instead of updating with KnockoutJS with Asp.Net MVC 3 -

we're working on asp.net mvc 3 + knockout-2.1.0 , we're trying render kogrid have ajax issue (we think) emptying kogrid instead of updating it.

in initial state, datasource kogrid array 2 rows, viewmodel (vm):

var viewmodel = function() {     var self = this;     self.radioselectedoptionvalue = ko.observable('-1');     self.availableactiveproducts = ko.mapping.fromjs(availableactiveproductsobject); }; ko.applybindings(new viewmodel()); 

availableactiveproducts datasource grid. html:

<div data-bind="kogrid: { data: availableactiveproducts }" /> 

and grid renders fine initially:

the problem starts here, when radioselectedoptionvalue changes (it radiobutton control change), grid should updated, emptied.

we expect radiobutton update/change knockout subscribe function call:

self.radioselectedoptionvalue.subscribe(function() {     $.get('/salesordermanagement/getproductsbyselection', {          typecriteria: "g", id: 1, seasontype: "1" }, function(data) {             self.availableactiveproducts(data.availableactiveproducts);         });     }, this); 

in controller, method responds ajax call is:

public jsonresult getproductsbyselection(string typecriteria, long id, string seasontype) {     var model = _orchestrator.getproductsbyusercriteria(typecriteria, id, seasontype);     return json(model, jsonrequestbehavior.allowget); } 

debugging fiddler, json object returns (with 3 rows expect) grid goes empty after call.

our hypothesis how data set observablearray part problem. how can update render/work properly?

we think we've found else suffering same issue, there no response on ko list: https://groups.google.com/forum/?fromgroups#!topic/knockoutjs/bs4ugqfv14g

here jsfiddle exhibits same behavior: http://jsfiddle.net/wabe/h4zxm/7/

update: solved!

we noted after tyrsius' comment grid refresh after several clicks.

so adding pop , push force refresh (per @keith) makes work, grid updates in expected way. javascript chages to:

    self.radioselectedoptionvalue.subscribe(function() {         $.get('/salesordermanagement/getproductsbyselection', { typecriteria: "gender", id: 1, seasontype: "inseason" }, function(data) {             self.availableactiveproducts(data);             self.availableactiveproducts.push({});             self.availableactiveproducts.pop();         });      }, this); 

the push , pop makes final update/kogrid refresh. keith's fiddle: http://jsfiddle.net/keith_nicholas/myynw/

it looks not updating, if click top columns sort, data appears....

and if push , pop dummy item, code "looks" work expecting

http://jsfiddle.net/keith_nicholas/myynw/

note, took mapping out, don't map initial data, either map both, or neither (depending if want observe changes on actual data elements)