jQuery UI Widgets Forums Grid Paging in jqxgrid

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 11 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Paging in jqxgrid #3860

    amitabha82
    Member

    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.

    Paging in jqxgrid #3889

    Peter Stoev
    Keymaster

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.