jQuery Grid Plugin – jqGrid

Hi,

I add paging to books sample and it works just fine without the 'page', 'total', and 'records' parameters. 

<table id="booksGrid"></table>

<div id="booksPager"></div>

jQuery("#booksGrid").jqGrid({

url: 'BooksGrid',

datatype: "xml",

colNames:["Author","Title", "Price", "Published Date"],

colModel:[

{name:"Author",index:"Author", width:120, xmlmap:"ItemAttributes>Author"},

{name:"Title",index:"Title", width:180,xmlmap:"ItemAttributes>Title"},

{name:"Price",index:"Manufacturer", width:100, align:"right",xmlmap:"ItemAttributes>Price", sorttype:"float"},

{name:"DatePub",index:"ProductGroup", width:130,xmlmap:"ItemAttributes>DatePub",sorttype:"date"}

],

height:250,

rowNum:10,

rowList:[10,20,30, 40],

viewrecords: true,

loadonce: true,

pager: '#booksPager',

multiselect: true,

xmlReader: {

root : "Items",

row: "Item",

repeatitems: false,

id: "ASIN"

}

});

// even though the data contains only 2 items, the paging works ok. 

<?xml version="1.0″ encoding="UTF-8″?><Books> <Items> <Request> <IsValid>True</IsValid> <ItemSearchRequest> <SearchIndex>Books</SearchIndex> </ItemSearchRequest> </Request> <Item> <DetailPageURL></DetailPageURL> <ItemAttributes> <Author>John Grisham</Author> <Title>A Time to Kill</Title> <Price>12.99</Price> <DatePub>1998-05-01</DatePub> <ASIN>0446351230</ASIN> </ItemAttributes> </Item> <Item> <DetailPageURL></DetailPageURL> <ItemAttributes> <Author>Stephen King</Author> <Title>Blood and Smoke</Title> <Price>24.00</Price> <DatePub>2000-01-01</DatePub> <ASIN>0446355453</ASIN> </ItemAttributes> </Item> </Items></Books>

But, I can't get paging working on the similar code below.  I get 'b.jgrid.formatter.integer' is null or not an object error.  I also tried adding page, total, and records, that mentioned in other help topics, but the same error occurs.  Any help is greatly appreciated.

// js includes

<link rel="stylesheet" type="text/css" media="screen" href="jQuery/themes/redmond/ui.all.css" />

 

<link rel="stylesheet" type="text/css" media="screen" href="/jQuery/themes/jqGrid/ui.jqgrid.css" />

 

 

<script src="jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>

 

<script src="jQuery/grid.locale-en.js" type="text/javascript"></script>

<script src="jqGrid-3.6.4/jquery.jqGrid.min.js" type="text/javascript"></script>

// jqGrid code

<table id="groupsGrid"></table>

<div id="groupsGridPager"></div>

$(document).ready(function () {

$("#groupsGrid").jqGrid({

url: 'getGroups.do',

datatype: "xml",

colNames:["Name", "Description", "Default", "Modify", "Delete"],

colModel:[

{name:"Name", index:"Name", width:150, align:"center", xmlmap:"name"},

{name:"Description", index:"Description", width:150, align:"center", xmlmap:"description"},

{name:"IsDefault", index:"IsDefault", width:40, align:"center", formatter:yesNoFormatter, xmlmap:"isDefault"},

{name:"EditImage", index:"EditImage", width:110, align:"center", formatter:editImageFormatter},

{name:"DeleteImage", index:"DeleteImage", width:110, align:"center", formatter:deleteImageFormatter}

],

rowNum: 10,

rowList:[10,20,30],

viewrecords: true,

autowidth: true,

height: "auto",

altRows: true,

loadonce: true,

pager: '#groupsGridPager',

multiselect: true,

loadtext: 'Loading groups…',

xmlReader: {

root : "groups",

row: "group",

repeatitems: false,

id: "[id]"

}

});

});

 

// data

<?xml version="1.0″ encoding="utf-8″?>
<groups>
  <group id="1″>
    <name>Accounting</name>
    <description>Accounting Department</description>
    <isDefault>1</isDefault>
  </group>
  <group id="2″>
    <name>Dev</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="3″>
    <name>Finance</name>
    <description>Finance Department</description>
    <isDefault>0</isDefault>
  </group>
  <group id="4″>
    <name>Group3</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="5″>
    <name>Group4</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="6″>
    <name>HR</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="7″>
    <name>aa</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="8″>
    <name>abc</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
</groups>

hi tony,

thanks for your response.  i did add the pagination data in the response xml last week, but the pagination still wasn't working properly.  the weird thing was i kept getting " '$.jgrid.formatter.integer' is null or not an object" error from updatepager in grid.base.js in the dev version once i enabled the pager.  the offending line is.

if(pgboxes) {
                fmt = $.jgrid.formatter.integer || {};

In the min version, i'd to make the following change to suppress the js error in order to work on other features such as add, edit, etc. as well as the pager.

from: if(o){r=b.jgrid.formatter.integer||{};

to: if(o){r=b.fmatter||{};

After modifying the code in the min version and setting the 'loadonce' to false, the row list drop down did make an ajax call to the server; however, record text, page text still didn't show up.  i really don't know what the side effect might be by blindly changing the core code.  i shouldn't need to modify the core library for the pager to work properly, should i?

i've been stuck on this feature for almost a week.  any help will be greatly appreciate.  please see the latest code below.

thanks again for your help,

dash

p.s. how's life in sofia? i was there couple weeks, working with folks at sciant, an outsourcing dev firm, in 03/04.  you might even know some guys working there back then.  sciant was acquired by vmware a few years back.  i'm sure sofia also has got a complete facelift since then…

$(document).ready(function () {

        $("#groupsGrid").jqGrid({
            url: 'getGroups.do',
            datatype: "xml",
               colNames:["Name", "Description", "Default"],
               colModel:[
                   {name:"Name", index:"Name", width:150, align:"center", xmlmap:"name", editable:true, editoptions:{size:20}},
                   {name:"Description", index:"Description", width:150, align:"center", xmlmap:"description", editable:true, editoptions:{size:30}},
                   {name:"IsDefault", index:"IsDefault", width:40, align:"center", formatter:yesNoFormatter, xmlmap:"isDefault", editable:true, edittype:"checkbox", editoptions:{value:"Yes:No"}}
               ],
               pager: $('#groupsGridPager'),
            pginput: true,
               rowNum: 5,
               rowList: [5,10,15],
               sortorder: "asc",
            sortname: "Name",
            viewrecords: true,
            autowidth: true,
            height: "auto",
            altRows: true,
            loadonce: false,
            multiselect: true,
            loadtext: 'Loading groups…',
            xmlReader: {
                    root : "groups",
                    row: "group",
                    repeatitems: false,
                    page: "groups>page",
                    total: "groups>total",
                    records:"groups>records",
                    id: "[id]"
            }
        });

// xml

<?xml version="1.0″ encoding="utf-8″?>

<groups>
  <page>1</page>
  <total>3</total>
  <records>12</records>
  <group id="1″>
    <name>Accounting</name>
    <description>Accounting Department</description>
    <isDefault>1</isDefault>
  </group>
  <group id="2″>
    <name>Dev</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="3″>
    <name>Finance</name>
    <description>Finance Department</description>
    <isDefault>0</isDefault>
  </group>
  <group id="4″>
    <name>Group4</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>
  <group id="5″>
    <name>Group5</name>
    <description>Created to test the createGroup feature</description>
    <isDefault>0</isDefault>
  </group>

</groups>