"refresh" does not really refresh

[robrichardMember]

Ok, I have a jqxgrid on an asp.net MVC view. When the page is loaded initially, it populates fine. There is an “edit” button on the grid which pops up a jqxwindow which allows the user to edit the data. After editing the data, if they close the window, it calls of the initialization code to re-populate the items on the page, including the grid. Now this USED to work in 2.6 and before, but now, it simply shows the loading image (which I turned off!) and nothing in the grid functions, such as sorting, grouping, or the buttons in the grid. I have tried all of the other methods such as destroy before re-creating the grid, that does not work. I have tried refresh, refreshdata, and even render, but these do not do what I need them to do. How can I “refresh”, or basically call the code to recreate my grid? I don’t recall seeing anything in breaking changes about this…

[Peter StoevKeymaster]

Hi robrichard,

1. If you report an issue regarding our product, please include the following information in your post:

– jQuery version, jQWidgets version, device type(PC, Mobile), browser name and version.
– Please, provide step by step instructions on how to reproduce the reported issue and provide a small sample which demonstrates it.

2. The following sample shows how to refresh the Grid’s Data: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/refreshdata.htm?web.

3. In the ASP .NET Integration documentation, you can find out how to use jqxGrid with ASP .NET, MVC 3 & 4: jquery-widgets-documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[robrichardMember]

Still not working (not updating the grid with latest data)… Something happened between 2.6 and 2.8 (I am now using 2.8.3). Here is the code to build the grid:

// prepare the data
var gridsource = {
datatype: “json”,
datafields: [
{ name: ‘addressId’ },
{ name: ‘address1’ },
{ name: ‘city’ },
{ name: ‘state’ },
{ name: ‘zipcode’ },
{ name: ‘municipality’ },
{ name: ‘name’ },
{ name: ‘femaname’ },
{ name: ‘damage’ }
],
url: ‘@Url.Action(“IncidentAddresses”)’ + “?IncidentID=” + incidentID
};

var dataAdapter = new $.jqx.dataAdapter(gridsource);

var settings = {
width: $(“#jqxExpanderGrid”).width() – 4,
source: dataAdapter,
autoheight: true,
groupable: true,
autoshowloadelement: false,
showdefaultloadelement: false,
pageable: true,
pagesize: 25,
pagesizeoptions: [25, 50, 100, 200, 500],
sortable: true,
theme: ‘orion’,
columns: [
{ text: ”, datafield: ‘addressId’, width: 78,
cellsrenderer: function (row, colum, value) {
var cell = ‘View / Edit‘;
cell += ‘Delete‘;
cell += ‘Property Report‘;
return cell;
}
},
{ text: ‘Address 1’, datafield: ‘address1’, width: 200 },
{ text: ‘City’, datafield: ‘city’, width: 150 },
{ text: ‘Municipality’, datafield: ‘municipality’, width: 150 },
{ text: ‘State’, datafield: ‘state’, width: 50 },
{ text: ‘Zip’, datafield: ‘zipcode’, width: 80 },
{ text: ‘Structure Type’, datafield: ‘name’, width: 150},
{ text: ‘Damage Level’, datafield: ‘femaname’, width: 130 },
{ text: ‘Damage Values’, datafield: ‘damage’, width: 100, cellsformat: ‘c0’, cellsalign: ‘right’, align: ‘right’ }
],
autoshowfiltericon: true
};

$(“#jqxgrid”).jqxGrid(settings);

$(“#expand”).jqxButton({});
$(“#collapse”).jqxButton({});
$(“#expandall”).jqxButton({});
$(“#collapseall”).jqxButton({});

$(“#jqxgrid”).bind(“pagechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
if ($(“#events”).find(‘.logged’).length >= 5) {
$(“#events”).jqxPanel(‘clearcontent’);
}
var args = event.args;
var eventData = “pagechanged

Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “

“;
$(‘#events’).jqxPanel(‘prepend’, ‘

‘ + eventData + ‘

‘);
// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“

Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount);
});
$(“#jqxgrid”).bind(“pagesizechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
$(“#events”).jqxPanel(‘clearcontent’);
var args = event.args;
var eventData = “pagesizechanged

Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “, Old Page Size: ” + args.oldpagesize + “

“;
$(‘#events’).jqxPanel(‘prepend’, ‘

‘ + eventData + ‘

‘);
// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“

Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount);
});

// expand group.
$(“#expand”).bind(‘click’, function () {
var groupnum = parseInt($(“#groupnum”).val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘expandgroup’, groupnum);
}
});
// collapse group.
$(“#collapse”).bind(‘click’, function () {
var groupnum = parseInt($(“#groupnum”).val());
if (!isNaN(groupnum)) {
$(“#jqxgrid”).jqxGrid(‘collapsegroup’, groupnum);
}
});
// expand all groups.
$(“#expandall”).bind(‘click’, function () {
$(“#jqxgrid”).jqxGrid(‘expandallgroups’);
});
// collapse all groups.
$(“#collapseall”).bind(‘click’, function () {
$(“#jqxgrid”).jqxGrid(‘collapseallgroups’);
});
// trigger expand and collapse events.
$(“#jqxgrid”).bind(‘groupexpand’, function (event) {
var args = event.args;
$(“#expandedgroup”).html(“Group: ” + args.group + “, Level: ” + args.level);
});
$(“#jqxgrid”).bind(‘groupcollapse’, function (event) {
var args = event.args;
$(“#collapsedgroup”).html(“Group: ” + args.group + “, Level: ” + args.level);
});

And then to “refresh” the grid, I use:

$(“#jqxGrid”).jqxGrid(‘updatebounddata’, ‘cells’);

It does nothing. The old data is still presented in the grid.

[Peter StoevKeymaster]

Hi,

The “updatebounddata” method of jqxGrid will call the dataAdapter’s dataBind method so it will perform a new Ajax request if you bind the Grid to remote data. After the Ajax request is completed the Grid will re-rerender itself using the new Data. Unfortunately, I do not know what exactly is the issue on your side and we are unable to reproduce it from the provided information as the provided code is not sufficient for testing your scenario locally.

– Please set the “type” field when you initialize the datafields array. That is very important and should not be omitted.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[SacrificeMember]

Hi robrichard,

.jqxGrid(‘updatebounddata’) This method didn’t work on v2.8.3 please using v2.8.2, this problem effect to KO case too.
In my case when KO model change filtering grid will refresh at first time only then I’ve use this method to resolved that problem.

[Peter StoevKeymaster]

Hi Sacrifice,

The method’s implementation is not changed between 2.8.3 and 2.8.2 so I do not think that there is a problem there. Btw. there is one minor change in jqxGrid 2.8.3 which was related to commenting out a line of code. There are no other changes in that widget and you can learn about the changes from the Release History page.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[sangadParticipant]

Grid not getting refresh after change the page size which is not the control on jqxgrid.
after pagesize change i have to refresh the jqxgrid.but it is not refreshing the grid

[Author]

Posts