How to bind column headers and rows dynamically using xml in jqgrid/Jtable

Question

Hi Have an xml which I need to display in the Jqgrid. Can any one please help in getting this working. If i am missing any other settings in the code please let me know

My xml data :

<entry>
<properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
  <property>
    <name>header1</name>
    <value>value 1.1</value>
  </property>
  <property>
    <name>Header2</name>
    <url>http://localhost/locator.aspx</url>
    <value>value 1.2 </value>
  </property>
  <property>
    <name>header 3</name>
    <value>value 1.3 </value>
  </property>
</properties>
</entry>
<entry>
  <properties xmlns="http://example.com" xmlns:i="http://www.w3.org/2001/XMLSchema-instance">
    <property>
      <name>header1</name>
      <value>value 2.1</value>
    </property>
    <property>
      <name>Header2</name>
      <url>http://localhost/locator.aspx</url>
      <value>value 2.2 </value>
    </property>
    <property>
      <name>header 3</name>
      <value>value 2.3</value>
    </property>
  </properties>
</entry>

Binding JqGrid like below but not working

function loadXMLDoc(data)
{
    $("#loadXMLData").jqGrid({
    url: 'local',
    datatype: "xml",
    height: 'auto',
    colModel: [
        { name:xmlmap: function (obj) {
                return $(obj).attr('name');
            }}
            , width: 80, sorttype: 'int',
            xmlmap: function (obj) {
                return $(obj).attr('value');
            }           
    ],
    xmlReader: {
        root: "properties",
        row: "property",
        repeatitems: false
    },
    loadonce: true,
    rowNum: 1000
});

I need the out put in below format

<table border=1>
  <tr>
    <th>
      header 1
      </th>
    <th>
      header 2
      </th>
    <th>
      header 3
      </th>
    </tr>
  <tr>
    <td>value 1.1</td>
    <td>value 1.2</td>
    <td>value 1.3</td>
    </tr>
  <tr>
    <td>value 2.1</td>
    <td>value 2.2</td>
    <td>value 2.3</td>
    </tr>
  <tr>
    <td>value 3.1</td>
    <td>value 3.2</td>
    <td>value 3.3</td>
    </tr>
  </table>

score 0 · Answer 1 · edited May 23 '17 at 12:14

You can try xmlstring datatype, mentioned in below example

<script>
var mystr =
"<?xml version='1.0' encoding='utf-8'?>
<invoices>
    <rows>
        <row>
            <cell>data1</cell>
            <cell>data2</cell>
            <cell>data3</cell>
            <cell>data4</cell>
            <cell>data5</cell>
            <cell>data6</cell>    
        </row>
    </rows>
</invoices>";

jQuery(document).ready(function(){ 
  jQuery("#list").jqGrid({
    datatype: 'xmlstring',
    datastr : mystr,
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55, sorttype:'int'}, 
      {name:'invdate', index:'invdate', width:90, sorttype:'date', datefmt:'Y-m-d'}, 
      {name:'amount', index:'amount', width:80, align:'right', sorttype:'float'}, 
      {name:'tax', index:'tax', width:80, align:'right', sorttype:'float'}, 
      {name:'total', index:'total', width:80, align:'right', sorttype:'float'}, 
      {name:'note', index:'note', width:150, sortable:false} ],
    pager: '#pager',
    rowNum:10,
    viewrecords: true,
    caption: 'My first grid'
  }); 
}); 
</script>

Reference

if you have seen my xml. It says my column and rows are dynamic. I need to decide based on the value given in xml. Like header 1, herader 2 etc. All this i need to pick it up from the xml itself — Sanju Rao, Oct 01 '15 at 04:35
Doesn't matter if it is dynamic or not, you can put it in a local `var` as mentioned in my example and move forward. — Gagan Jaura, Oct 01 '15 at 05:21

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

You may refer this SO post for Convert XML to JSON (and back) using Javascript or follow this link to Convert XML to JSON

If you have the provision of generating source XML file(s) then, instead of later converting it to JSON, it would be better to directly generate colModel and data in JSON format.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 02 '15 at 20:45

haraman

2,744
2
27
50

How to bind column headers and rows dynamically using xml in jqgrid/Jtable

2 Answers2