Hello,
I am working on a project that will make heavy use of the igGrid. We require certain features such as updating, selecting, virtualization and knockout binding. Everything has been great so far but eventually we noticed that selection no longer worked in Internet Explorer 8. After a few days of looking for the problem, I found out that selection works fine when using data generated from the client side, but selection no longer works when using an ajax call to get the data. It also doesn't work in Chrome (which is fine, our requirements don't include developing for Chrome), but it works in IE9+ and Firefox.
This is an MVC project and I've included the files needed to reproduce this bug. The ajax call simply gets a JSON object from an Action method in the Controller. It then binds the data to the grid using knockout. In my code, I've included the client side data that can be uncommented to see that it works when the ajax call isn't being made.
Some things I have noticed is that selection will work if you remove virtualization or even change its mode to "fixed" (for our project, we need "continuous"), if you don't bind with knockout, or if you don't use AJAX to get data. However, combining all three of these features and running IE8 seems to break selection (and by association, Updating).
Any help offered would be greatly appreciated.
Thank you,
Joey Kronawetter
Hello Joey ,
Thank you for posting in our forum.
It seems like the issue is with the order in which the mapping and binding are applied, since in the case where the data is static json on the page you’re applying the mapping directly when the view model is created and then apply the binding, while in the case where the data is retrieved remotely during an asynchronous call the binding will be applied before the mapping with the data is done.
You can modify the code so that the binding is also applied in the success function:
<script>
var vm = ViewModel();
function ViewModel() {
var self = this;
self.Models = ko.observableArray();
//get JSON from the server
$.ajax({
type: 'get',
dataType: 'json',
url: "/Home/GetData",
success: function (response, textStatus, jqXHR) {
ko.mapping.fromJS(response, [], self.Models);
ko.applyBindings(vm);
},
error: function (jqXHR, textStatus, errorThrown) {
alert("error " + errorThrown);
}
});
</script>
In which case it will work as expected in all browsers.
Best Regards,
Maya Kirova
Developer Support Engineer II
Infragistics, Inc.
http://es.infragistics.com/support
That worked perfectly! Thanks for the fast reply!