JQXGrid not refreshing to show new data

[ydb1mdParticipant]

I’m using a JQXGrid to display data arranged by dates. I’m using two jquery datepicker controls to specify a start and end date for my data. I’m using a button to call an AJAX Get but my JQXGrid is not displaying the new data that is being returned by my JSON get. What JQXGrid method do I need to call to rebind and display the new data. Below is the code for my grid and my JSON get.

$(document).ready(function () {
//Getting the source data with ajax GET request
source = {
datatype: “json”,
datafields: [
{ name: ‘AvailabilityDate’, type: ‘date’ },
{ name: ‘ACRequiredAM’, type: ‘int’ },
{ name: ‘ACRequiredPM’, type: ‘int’ },
{ name: ‘ACDeliveredAM’, type: ‘int’ },
{ name: ‘ACDeliveredPM’, type: ‘int’ },
{ name: ‘Comments’, type: ‘string’ }
],
id: ‘AvailabilityID’,
url: ‘GetAvailabilitySP2’,
data: {
Id1: $(“#datepicker1”).val(),
Id2: $(“#datepicker2”).val()
},
pager: function (pagenum, pagesize, oldpagenum) {
// callback called when a page or page size is changed.
},
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
var data = $.param(rowdata);
$.ajax({
dataType: ‘json’,
url: ‘UpdateAvailability’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
}
});
}
};

var dataAdapter = new $.jqx.dataAdapter(source, {
autoBind: true,
contentType: ‘application/json; charset=utf-8’
});

var cellrenderer = function (row, column, value) {
return ‘<div>’ + value + ‘</div>’;
};

var pagerrenderer = function () {
var element = $(“<div style=’margin-top: 5px; width: 100%; height: 100%;’></div>”);
var paginginfo = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
for (i = 0; i < paginginfo.pagescount; i++) {
// add anchor tag with the page number for each page.
var anchor = $(“” + i + ““);
anchor.appendTo(element);
anchor.click(function (event) {
// go to a page.
var pagenum = parseInt($(event.target).text());
$(“#jqxgrid”).jqxGrid(‘gotopage’, pagenum);
});
}
return element;
}
// grid
$(“#jqxgrid”).jqxGrid({
width: 900,
editable: true,
pageable: true,
autorowheight: false,
autoheight: true,
source: dataAdapter,
columns: [
{ text: ‘Date’, dataField: ‘AvailabilityDate’, width: 100, cellsformat: ‘d’ },
{ text: ‘AC Req AM’, dataField: ‘ACRequiredAM’, width: 70 },
{ text: ‘AC Req PM’, dataField: ‘ACRequiredPM’, width: 70 },
{ text: ‘AC Del AM’, dataField: ‘ACDeliveredAM’, width: 70 },
{ text: ‘AC Del PM’, dataField: ‘ACDeliveredPM’, width: 70 },
{ text: ‘Comments’, dataField: ‘Comments’, width: 300 }
]
});
$(‘#events’).jqxPanel({ width: 300, height: 300 });
// end objects
$(“#jqxgrid”).on(“pagechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
if ($(“#events”).find(‘.logged’).length >= 5) {
$(“#events”).jqxPanel(‘clearcontent’);
}

var args = event.args;
var eventData = “pagechanged <div>Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “</div>”;
$(‘#events’).jqxPanel(‘prepend’, ‘<div class=”logged” style=”margin-top: 5px;”>’ + eventData + ‘</div>’);

// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“<div style=’margin-top: 5px;’>Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount + “</div>”);
});
// grid page size changed
$(“#jqxgrid”).on(“pagesizechanged”, function (event) {
$(“#eventslog”).css(‘display’, ‘block’);
$(“#events”).jqxPanel(‘clearcontent’);

var args = event.args;
var eventData = “pagesizechanged <div>Page:” + args.pagenum + “, Page Size: ” + args.pagesize + “, Old Page Size: ” + args.oldpagesize + “</div>”;
$(‘#events’).jqxPanel(‘prepend’, ‘<div style=”margin-top: 5px;”>’ + eventData + ‘</div>’);

// get page information.
var paginginformation = $(“#jqxgrid”).jqxGrid(‘getpaginginformation’);
$(‘#paginginfo’).html(“<div style=’margin-top: 5px;’>Page:” + paginginformation.pagenum + “, Page Size: ” + paginginformation.pagesize + “, Pages Count: ” + paginginformation.pagescount + “</div>”);
});

});
</script>

}
<div id=’content’>

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<input id=”Submit1″ type=”submit” value=”submit” onclick=”refresh()” />
Start Date <input id=”datepicker1″ type=”text” />
End Date <input id=”datepicker2″ type=”text” />

<div style=”height:10px;”></div>
<div id=’jqxgrid’ style=”z-index:-5;”></div>

<div id=”eventslog” style=”display: none; margin-top: 30px;”>
<div style=”float: left;”>
Event Log:
<div style=”border: none;” id=”events”>
</div>
</div>
<div style=”float: left;”>
Paging Details:
<div id=”paginginfo”>
</div>
</div>
</div>
<script type=”text/javascript”>
function refresh() {
$.get(“GetAvailabilitySP2”, { Id1: “3/1/2017”, Id2: “3/14/2017” });
$(“#jqxgrid”).jqxGrid(‘refresh’);

}
$(function () {
$(“#datepicker1”).datepicker();
});
$(function () {
$(“#datepicker2”).datepicker();
});
</script>

public JsonResult GetAvailabilitySP2(DateTime Id1, DateTime Id2)
{
var dbResult = db.GetAvailability(Id1, Id2).ToList();// new List<Availability>();

var availabilities = (from availability in dbResult
select new
{
availability.AvailabilityID,
availability.AvailabilityDate,
availability.ACRequiredAM,
availability.ACRequiredPM,
availability.ACDeliveredAM,
availability.ACDeliveredPM,
availability.Comments
});
return Json(availabilities, JsonRequestBehavior.AllowGet);
}

[HristoParticipant]

Hello ydb1md,

I would like to ask you is there any error message?
Also, I would like to suggest you look at this example.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[ydb1mdParticipant]

Hristo,
There is no error message. In my refresh function, my “get” call makes it to the server.

$.get(“GetAvailabilitySP2”, { Id1: $(“#datepicker1”).val() , Id2: $(“#datepicker2”).val() });

After that, I call jqxgrid.updatebounddata:
$(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘cells’);

When that call reaches the server, it’s using the old value for Id2. Is there a different jqxgrid method I should be using?

[Peter StoevKeymaster]

The data param is unchanged and that’s why it uses the old/initial values. My suggestion is to use the formatData callback function instead. Please, refer to http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm to learn more about it.

Best Regards,
Peter Stoev

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

[ydb1mdParticipant]

Thanks Peter. I’ll give that a try. In the interim, I just called grid.destroy and added a function to reconstruct the grid.

[Author]

Posts