Geek Answers Handbook

KoGrid will empty our grid instead of updating with KnockoutJS with Asp.Net MVC 3

We are working on ASP.Net MVC 3 + knockout-2.1.0, and we are trying to display koGrid, but we have an Ajax problem (we believe) that frees koGrid instead of updating.

In the initial state, the data source for koGrid is an array with two rows, this is ViewModel (vm):

var viewModel = function() { var self = this; self.radioSelectedOptionValue = ko.observable('-1'); self.AvailableActiveProducts = ko.mapping.fromJS(availableActiveProductsObject); }; ko.applyBindings(new viewModel());

AvailableActiveProducts is the data source for the grid. This is html:

 <div data-bind="koGrid: { data: AvailableActiveProducts }" />

And the grid first displays the penalty:

IMG

The problem begins here when the radioSelectedOptionValue parameter changes (it does with the change of radio control), the grid should be updated, but it will be empty.

IMG

We expect the radio volume to be updated / changed by calling the knockout subscription function:

 self.radioSelectedOptionValue.subscribe(function() { $.get('/SalesOrderManagement/GetProductsBySelection', { typeCriteria: "g", id: 1, seasonType: "1" }, function(data) { self.AvailableActiveProducts(data.AvailableActiveProducts); }); }, this);

In the controller, the method that answers this Ajax call:

 public JsonResult GetProductsBySelection(string typeCriteria, long id, string seasonType) { var model = _orchestrator.GetProductsByUserCriteria(typeCriteria, id, seasonType); return Json(model, JsonRequestBehavior.AllowGet); }

Debugging with fiddler returns a json object (with the 3 lines we expect), but the grid remains empty after the call.

IMG

Our hypothesis is that the question of how data is set into an observable array is part of the problem. How can we get this update to render / work correctly?

We think we found someone else who suffers from the same problem, but there was no answer on the KO list: https://groups.google.com/forum/?fromgroups#!topic/knockoutjs/BS4ugQfV14g

Here is a jsFiddle that exhibits the same behavior: http://jsfiddle.net/wabe/H4ZXM/7/

UPDATE: solved!

We noted after Tyrsius comment that the grid will be updated after a few clicks.

Thus, adding pop and push to force update (for @Keith) makes it all work, the grid updates as expected. So javascript chages:

  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);

Click and pop update update / koGrid. This is the Keith fiddle: http://jsfiddle.net/keith_nicholas/MYYNw/

+4
source share
2 answers

It looks like it is not updating properly, if you click the top columns to sort, then the data appears ....

and if I click and display a dummy element, the code “looks” to work as you expect

http://jsfiddle.net/keith_nicholas/MYYNw/

Notice, I took the mapping, since you are not matching your source data, either match them or not (depending on whether you want to observe changes in the actual data items)

+3
source

I have this exact problem and it works around it, moving the viewModel binding inside an ajax call.

Old and Busted:

  var API_URL = "/api/vendor/"; window.viewModel = { items: ko.observableArray([]), item: ko.observableArray([]) } ko.applyBindings(viewModel); function getVendors() { $.ajax({ type: 'GET', url: API_URL, dataType: 'json', success: function (data) { newData = ko.mapping.fromJS(data); viewModel.items(newData); } }); }; getVendors();

New heat:

  var API_URL = "/api/vendor/"; $.ajax({ type: 'GET', url: API_URL, dataType: 'json', success: function (data) { window.viewModel = { items: ko.mapping.fromJS(data), item: ko.observableArray([]) } ko.applyBindings(viewModel); } });
+1
source

More articles:


All Articles