Dojox Datagrid contains data, but shows up as empty

Question

I'd really appreciate any help on this. There is this Dojox Datagrid that I'm creating programatically and supplying JSON data. As of now, I'm creating this data within JavaScript itself. Please refer to the below code sample.

var upgradeStageStructure =[{
    cells:[
      {
        field: "stage",
        name: "Stage",
        width: "50%",
        styles: 'text-align: left;'
      },
      {
        field:"status",
        name: "Status",
        width: "50%",
        styles: 'text-align: left;'
      }
    ]
    }];

    var upgradeStageData =
      [
        {id:1, stage: "Preparation", status: "Complete"},
        {id:2, stage: "Formatting", status: "Complete"},
        {id:3, stage: "OS Installation", status: "Complete"},
        {id:4, stage: "OS Post-Installation", status: "In Progress"},
        {id:5, stage: "Application Installation", status: "Not Started"},
        {id:6, stage: "Application Post-Installation", status: "Not Started"}
      ];
    var stagestore = new dojo.data.ItemFileReadStore({data:{identifier:"id", items: upgradeStageData}});
var upgradeStatusGrid = new dojox.grid.DataGrid({
        autoHeight: true,
        style: "width:400px;padding:0em;margin:0em;",
        store: stagestore,
        clientSort: false,
        rowSelector: '20px',
        structure: upgradeStageStructure,
        columnReordering: false,
        selectable: false,
        singleClickEdit: false,
        selectionMode: 'none',
        loadingMessage: 'Loading Upgrade Stages',
        noDataMessage:'There is no data',
        errorMessage: 'Failed to load Upgrade Status'
    });

    dojo.byId('progressIndicator').innerHTML='';
    dojo.byId('progressIndicator').appendChild(upgradeStatusGrid.domNode);
    upgradeStatusGrid.startup();

The problem is that I am not seeing anything within the grid upon display (no headers, no data). But I know for sure that the data in the grid does exist and the grid is properly initialized, because I called alert (grid.domNode.innerHTML);. The resultant HTML that is thrown up does show a table containing header rows and the above data.

This link contains an image which illustrates what I'm seeing when I display the page. (Can't post images since my account is new here)

As you may notice, there are 6 rows for 6 pieces of data I have created but the grid is a mess. Please help out if you think you know what could be going wrong.

Thanks in advance, Viv

Answer 1

I probably should have mentioned before that I am trying to render this grid inside a dijit Dialog. Now, I saw several responses to this problem on stackoverflow itself, such as:

• Using fixed width and height for style (using px instead of %)
• Not using the 'id' field

Here is the thread I'm talking about: http://stackoverflow.com/questions/1652484/no-data-showing-in-dojox-grid-datagrid

But all to no avail in my case. Any inputs would be highly appreciated.

Answer 2

The first thing to do is to use something like Firebug, http://getfirebug.com/, to inspect the DOM to see if your datagrid is being inserted into the DOM (but is not visible). Look for something the the class of "dojoxGrid" If you see that, do you see any styling associated with it? If could be that your height is set to 0, or it's being styled as hidden, or ...

I ran into the problem you're descirbing when I didn't set set the height of my grid to a fix px number. So, once my grid looked something like the following, all worked well:

(In my HTML Markup:)
<div id="kgbHolder"></div>

(In my JavaScript:)
var kgbStore = new dojox.data.QueryReadStore({ url: "kgbService.php?kgbID=" + id });
var kgbGrid = new dojox.grid.DataGrid({
            store: kgbStore,
            noDataMessage: 'No kreits associated with selected query.',
            selectionMode: 'single',
            height: "400px",
            clientSort: true,
            structure: kgbGridLayout
        });
var kgbHolder = dojo.byId('kgbHolder'); 
kgbHolder.appendChild(kgbGrid.domNode);
kgbGrid.startup();
dijit.byId('kgbDialog').show();

Note: I had problems setting the height (with the width) using the style key. Give it a go with just height: "someNumpx" first.

Answer 3

I was able to fix this at last! In my HTML file, I had the following markup:

<center>
 <div id="gridArea">
   <div dojoType="dojox.data.DataGrid" dojoAttachPoint="myGrid"></div>
 </div> 
</center>

The problem was with the <center> tag. Removing it resulted in the grid showing up properly with data. This is weird, and I'd appreciate if anyone can reason out why this is happening.