Paging in jqxgrid

[amitabha82Member]

I am implementing paging in jqxgrid. I have slightly modified the demo version code.But it is giving error.Plz hep me.I am giving my code below.

Index

Index

Create New

$(document).ready(
function () {

var theme = ‘energyblue’
var data = {

datatype: “json”,
datafields: [
{ name: ‘CustomerID’ },
{ name: ‘CompanyName’ },
{ name: ‘ContactName’ },
{ name: ‘Address’ },
{ name: ‘City’ },
{ name: ‘PostalCode’ },
{ name: ‘Country’ },

],

url: ‘Customer/GetCustomers’
};

var editrowindex = -1;
$(‘#jqxgrid’).jqxGrid(
{
width: 1000,
source: data,
theme: ‘energyblue’,
sortable: true,
pageable: true,
autoheight: true,
columns: [
{ text: ‘CustomerID’, datafield: ‘CustomerID’, hidden: ‘true’ },
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Company Name’, datafield: ‘CompanyName’, width: 250 },
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 150 },
{ text: ‘Address’, datafield: ‘Address’, width: 150 },
{ text: ‘City’, datafield: ‘City’, width: 150 },
{ text: ‘Postal Code’, datafield: ‘PostalCode’, width: 150 },
{ text: ‘Country’, datafield: ‘Country’, width: 150 },
{ text: ‘Edit’, datafield: ‘Edit’, columntype: ‘button’, width: 150, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {

editrowindex = row;
var id = $(“#jqxgrid”).jqxGrid(‘getcellvalue’, row, “CustomerID”);
window.location = ‘/Customer/Edit/?id=’ + id;
}
}

]

});

$(‘#events’).jqxPanel({ width: 300, height: 300, theme: theme });
$(“#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);
});

}

);

Event Log:

Paging Details:

when running givinng error in $(‘#events’).jqxPanel({ width: 300, height: 300, theme: theme });
Error is:Microsoft JScript runtime error: Object doesn’t support this property or method.
Plz help me.

[Peter StoevKeymaster]

Hi amitabha82,

The reported error means that the jqxpanel.js file is not loaded into your project.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts