jQuery Grid Plugin - jqGridForum

Topic RSS

Related Topics sp_TopicIcon

populate XML data in JQGrid

Tags: xml data jqgrid data binding data rendering

07/04/2014
16:04

ajayporwal

New Member

Members

Forum Posts: 1

Member Since:
04/04/2014

Offline

Hi All, I have to bind xml data to JQGrid, but not able to do so. Following is the code in my GridClient.Html file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
    <link href="Scripts/jquery-ui-1.10.4.custom.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/jquery.jqGrid.js" type="text/javascript"></script>
    <link href="Scripts/ui.jqgrid.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/grid.locale-en.js" type="text/javascript"></script>
   <script type="text/javascript">
       var xmlstr;
       function RefreshGrid() {
       //just to test if data is coming or not
       xmlstr="<NewDataSet><uom><uom_id>0</uom_id><description>Pieces</description><abbreviation>Pcs.</abbreviation><last_edit_by>sqladmin</last_edit_by><last_edit_at>2014-03-26T15:41:03</last_edit_at></uom></NewDataSet>";

           jQuery("#grdUOM").jqGrid({
               datatype: 'xmlstring',
               datastr: xmlstr,
               colNames: ['Id', 'Description', 'Abbr.', 'Last Edit By', 'Last Edit At'],
               colModel: [
               { name: 'uom_id', index: 'uom_id', width: 20, stype: 'text' },
               { name: 'description', index: 'uom_id', width: 100 },
               { name: 'abbreviation', index: 'abbreviation', width: 80 },
               { name: 'last_edit_by', index: 'last_edit_by', width: 100 },
               { name: 'last_edit_at', index: 'last_edit_at', width: 100}],
               xmlReader: { root: "NewDataSet", rows: "uom", repeatitems: false },
               rowNum: 10,
               sortName: 'uom_id',
               viewRecords: true,

               sortOrder: "desc",
               caption: "List Unit of Measurement"
           });
       }
   </script>
</head>
<body>
<input type="button" id="btn1" value="Refresh Grid" onclick="RefreshGrid();" />
<div id="logdiv"></div>
<div>
<table id="grdUOM">
</table>
    </div>
</body>
</html>

Please help, thank you very much in advance…

10/04/2014
11:01

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

Hello,

The problem you have is in xmlReader configuration.

You misspeled the word rows instead of row as described into the docs.

So your working code shouild look like this:

xmlReader: { root: "NewDataSet", row: "uom", repeatitems: false }

Regards

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
38 Guest(s)

Currently Browsing this Page:
1 Guest(s)