Question

I have an XML file that contains one set of data and this has to be represented in one of the many dojo content panes of a HTML page. I’ve tried dojox.grid.DataGrid and it works; however since the data grid is used to generally represent tabular data, I don’t want to use data grid.

Is there any other way to represent this data in a simple format?

The XML file is something like this:

<Summary>
   <neName>abc</neName>
   <neType>pqr</neType>
   <neRelease>2.0</neRelease>
   <neAddress>10.10.82.105</neAddress>
   <supervisionState>SUPERVISED</supervisionState>
   <operationalState>ENABLED</operationalState>
   <alignmentState>ALIGNED</alignmentState>
   <criticalAlarms>0</criticalAlarms>
   <majorAlarms>0</majorAlarms>
   <minorAlarms>0</minorAlarms>
   <noOfShelves>5</noOfShelves>
</Summary>

I want this data to be represented something like this:

Answer 1

If you’re feeling frisky, you can make a sort-of generic, XML data widget. Here’s an example I have from some time ago.

dojo.declare("foo.XmlDisplay", dijit._Widget, {

    postCreate: function()
    {
        this.inherited(arguments);
        dojo.xhrGet({
            url: this.href,
            handleAs: "xml",
            load: dojo.hitch(this, "setData")
        });

    },

    setData: function(data)
    {
        // All items with a xmldisp-tag attribute should get data
        dojo.query("*[data-xmldisp-tag]", this.containerNode).forEach(
            function(item) {
                var tag   = dojo.attr(item, "data-xmldisp-tag");
                var value = data.getElementsByTagName(tag);
                if(value.length == 1) item.innerHTML = value[0].textContent;
                else console.warn("No data in xml for",tag);
            }
        );
    }
});

You can then use it something like this in your HTML (i.e. the widget doesn’t care how you display the data, it just uses the given tag names to lookup data in the XML from the server):

<div data-dojo-type="foo.XmlDisplay" href="/MyXmlStuff?id=42">
    <dl>
        <dt>NE name</dt><dd data-xmldisp-tag="nename">-</dd>
        <dt>NE type</dt><dd data-xmldisp-tag="netype">-</dd>
    </dl>
    <dl>
        <dt>Alarms</dt><dd data-xmldisp-tag="majoralarms">-</dd>
        <dt>Minor</dt><dd data-xmldisp-tag="minoralarms">-</dd>
    </dl>
</div>

Here’s a modified jsfiddle you can try: http://fiddle.jshell.net/K4UnJ/3/

Not sure if this fits your task at all, but since I had very similar code lying around, I thought I’d share.