Refresh Data in Grid

[marchipMember]

Hi

I have a grid that take data from server by ajax call (dataType:json).

What is the best way to refresh data of the grid ?

I tried method ‘refresh’ and ‘refreshdata’ but nobody re-call the server.

 

Thanks

[DimitarParticipant]

Hello marchip,

Please check out the jqxGrid demo Refresh Data. We hope it is helpful to you.

Best Regards,
Dimitar

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

[darindMember]

Yes great demo…however i cant figure out how to update the total record count in the pager. The demo doesn’t have a pager and i have tried setting the object property manually with no success.

[ekaperintisParticipant]

hi darind ….

please you captured your project

[darindMember]

Im sorry ekaperinits I dont understand your response.

[ekaperintisParticipant]

Ohh im sorry master …..

may I see the code that you have created, I want to try to correct

[darindMember]

here ya go:

function InitalizeGrid() {

// prepare the data
var source =
{
async: false,
datatype: “jsonp”,
datafields: [
{ name: ‘PropID’ },
{ name: ‘VendorHotelID’ },
{ name: ‘VendorSource’ },
{ name: ‘Name’ },
{ name: ‘Address1’ },
{ name: ‘AddressCity’ },
{ name: ‘AddressZip’ }
],
url: wcfHotelListServiceUrlBase + unmatchMethod,
formatdata: function (data) {
var qs = ‘&queryparams={“pagenum”:’ + data.pagenum + ‘,”pagesize”:’ + data.pagesize + ‘,”state”:”‘ + stateFilter + ‘”}’;
return qs;
}
};

$.ajax({
url: wcfHotelListServiceUrlBase + countMethod + ‘{“state”:”‘ + stateFilter + ‘”}’,
dataType: “jsonp”,
async: false,

success: function (data) { source.totalrecords = data; }

});

var pagerrenderer = function () {
var element = $(“

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

var buttonRenderer = function (row, column, value) {
return ”;
}

var radioRenderer = function (row, column, value) {
return ”;
}

var titleRenderer = function (row, column, value) {

return ‘

‘ + value + ‘

‘

}

var dataAdapter = new $.jqx.dataAdapter(source);
$(“#jqxgrid”).jqxGrid(
{

pagesizeoptions: [’10’, ’20’, ’30’],
width: 925,
source: dataAdapter,
theme: ‘energyblue’,
pageable: true,
autoheight: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},

columns: [
{ text: ”, datafield: ‘VendorHotelID’, cellsrenderer: buttonRenderer, width: 63 },
{ text: ”, datafield: ‘VendorHotelID’, cellsrenderer: radioRenderer, width: 15 },
{ text: ‘PropID’, datafield: ‘PropID’, width: 90 },
{ text: ‘HotelID’, datafield: ‘VendorHotelID’, width: 75 },
{ text: ‘Vendor’, datafield: ‘VendorSource’, width: 75 },
{ text: ‘Name’, datafield: ‘Name’, cellsrenderer: titleRenderer, width: 285 },
{ text: ‘Address’, datafield: ‘Address1’, cellsrenderer: titleRenderer, width: 152 },
{ text: ‘City’, datafield: ‘AddressCity’, cellsrenderer: titleRenderer, width: 80 },
{ text: ‘Zip’, datafield: ‘AddressZip’, width: 80 }
]
});

}

function initializeButton() {

$(“#filterButton”).jqxButton({ theme: ‘energyblue’, width: ‘150’, height: ’25’ });
$(“#filterButton”).bind(‘click’, function () {
UpdateGridCount();
$(“#jqxgrid”).jqxGrid(‘updatebounddata’);

});
}

function UpdateGridCount() {

?????????????????????????????????????
}

$(document).ready(function () {

InitializeTimer();

InitalizeGrid();

initializeStateDDL();

initializeButton();

});

[Author]

Posts