As mentioned above, if we do not set the datatype and xmlReader parameter in the options array, the grid expects xml data, and the structure of this data is as described in our example. But what if we do not have the chance to manipulate the server response? The solution to this problem is xmlReader, again with some additions in colModel. Here is a brief description of xmlReader.

Important note: the rules of accessing the element from xml are the same as those used in jQuery library, i.e. CSS patterns. For more information refer to: http://www.w3.org/TR/REC-CSS2/selector.html

xmlReader : {
  root: "rows",
  row: "row",
  page: "rows>page",
  total: "rows>total",
  records : "rows>records",
  repeatitems: true,
  cell: "cell",
  id: "[id]", 
  userdata: "userdata", 
  subgrid: {
    root:"rows", 
    row: "row", 
    repeatitems: true, 
    cell:"cell"
  }
}

The first setting here defines the root element. This describes where our data begins and all other loops begin from this element. For example,

...
<invoices>
  <request>true</request>
      ...
     <result>
       <row>
         <cell>data1</cell>
         <cell>data2</cell>
         <cell>data3</cell>
         <cell>data4</cell>
         <cell>data5</cell>
         <cell>data6</cell>
       </row>
        ...
     </result>
</invoices>

If we set the root element to "result" all data will be processed from there. In this case, because our rows are tagged <row> and our cells tagged <cell>, all that is needed is to set

xmlReader: { root:"result" }

The next element is the row element. This describes the information for particular row. Note that row must be a child of the root element. Here, if the xml looks like this,

<invoices>
  <request>true</request>
     ...
  <result>
    <invoice>
      <cell>data1</cell>
      <cell>data2</cell>
      <cell>data3</cell>
      <cell>data4</cell>
      <cell>data5</cell>
      <cell>data6</cell>
    </invoice>
       ...
  </result>
</invoices>

the setting to properly interpret this data would be

xmlReader: { root:"result", row:"invoice" }

The page, total and record elements describe the information needed for the pager. These elements can be, but do not have to be, a child of the root element. For example, to interpret this data,

<invoices>
  <request>true</request>
    ...
    <currentpage>1</currentpage>
    <totalpages>10</totalpages>
    <totalrecords>20</totalrecords>
    <result>
      <invoice>
        <cell>data1</cell>
        <cell>data2</cell>
        <cell>data3</cell>
        <cell>data4</cell>
        <cell>data5</cell>
        <cell>data6</cell>
      </invoice>
          ...
    </result>
</invoices>

the xmlReader will have to look like this:

xmlReader : { 
  root:"result", 
  row:"invoice", 
  page:"invoices>currentpage", 
  total:"invoices>totalpages", 
  records:"invoices>totalrecords"
}

The repeatitems element tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. For this example,

<invoices>
  <request>true</request>
    ...
    <currentpage>1</currentpage>
    <totalpages>10</totalpages>
    <totalrecords>20</totalrecords>
    <result>
      <invoice>
        <invcell>data1</invcell>
        <invcell>data2</invcell>
        <invcell>data3</invcell>
        <invcell>data4</invcell>
        <invcell>data5</invcell>
        <invcell>data6</invcell>
      </invoice>
        ...
    </result>
</invoices>

the xmlReader will look like this:

xmlReader : { 
  root:"result", 
  row:"invoice",
  page:"invoices>currentpage", 
  total:"invoices>totalpages", 
  records:"invoices>totalrecords", 
  repeatitems:true,
  cell:"invcell"
}

Next is the id element. If repeatitems is set to true the id, if present in xml data, must be a attribute of the row element. Lets look at the example:

<invoices>
  <request>true</request>
    ...
    <currentpage>1</currentpage>
    <totalpages>10</totalpages>
    <totalrecords>20</totalrecords>
    <result>
      <invoice asin='12345'>
        <invcell>data1</invcell>
        <invcell>data2</invcell>
        <invcell>data3</invcell>
        <invcell>data4</invcell>
        <invcell>data5</invcell>
        <invcell>data6</invcell>
      </invoice>
        ...
    </result>
</invoices>

In this case the xmlReader is:

xmlReader: { 
  root:"result", 
  row:"invoice", 
  page:"invoices>currentpage", 
  total:"invoices>totalpages", 
  records:"invoices>totalrecords", 
  repeatitems:true,
  cell:"invcell", 
  id:"[asin]" 
}

Let's suppose that the structure of the xml document returned from the server has the following format:

<invoices>
  <request>true</request>
    ...
    <currentpage>1</currentpage>
    <totalpages>10</totalpages>
    <totalrecords>20</totalrecords>
    <result>
      <invoice>
        <asin>12345</asin>
        <invoiceno>data1</invoiceno>
        <invoicedate>data2</invoicedate>
        <invoiceamount>data3</invoiceamount>
        <invoicetax>data4</invoicetax>
        <invoicetotal>data5</invoicetotal>
        <notes>data6</notes>
      </invoice>
        ...
    </result>
</invoices>

where the <asin> tag describes the unique id and this should be set as the row id in the grid and not displayed in the grid. Following the rules we can construct the following:

xmlReader: { 
  root:"result", 
  row:"invoice", 
  page:"invoices>currentpage", 
  total:"invoices>totalpages", 
  records:"invoices>totalrecords", 
  repeatitems:false, 
  id:"asin"
}

and our colModel from the example should look like this:

colModel :[ 
  {name:'invid', index:'invid', width:55, xmlmap:"invoiceno"}, 
  {name:'invdate', index:'invdate', width:90, xmlmap:"invoicedate"}, 
  {name:'amount', index:'amount', width:80, align:'right', xmlmap:"invoiceamount"}, 
  {name:'tax', index:'tax', width:80, align:'right', xmlmap:"invoicetax"}, 
  {name:'total', index:'total', width:80, align:'right', xmlmap:"invoicetotal"}, 
  {name:'note', index:'note', width:150, sortable:false, xmlmap:"notes"} 
],

We can use another trick. If the names in colModel are not important for you, you can do the following.

colModel :[ 
  { name:"invoiceno", index:'invid', width:55}, 
  { name:"invoicedate", index:'invdate', width:90}, 
  { name:"invoiceamount", index:'amount', width:80, align:'right'}, 
  { name:"invoicetax", index:'tax', width:80, align:'right'}, 
  { name:"invoicetotal", index:'total', width:80, align:'right'}, 
  { name:"notes", index:'note', width:150, sortable:false} 
],

In other words, jqGrid first looks to see if there is an xmlmap option available; if this option is not available the name is used as the xmlmap. But all of this is true only if the repeatitems element in xmlReader is set to false.

The subgrid option is included in several of the xmlReader examples above. The principles in constructing the rules for this data are the same as those described above. More details about subgrids can be found in the section on Subgrids.