Home/ Questions/Q 738877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T08:20:11+00:00

I’m trying to create a DataGrid dynamically. Declarative creation is working fine: A source

  • 0

I’m trying to create a DataGrid dynamically. Declarative creation is working fine:

A source of data:

<span dojoType="dojo.data.ItemFileReadStore" 
    jsId="theStore" url="dataonly001.json">
  </span>

a simple layout:

<script type="text/javascript" >    
  var layout = [ {
            field: 'custId',
            name: 'Id',                   
        } // more items elided ...
     ]; 
</script>

The grid:

<body class="tundra" id="mainbody"> 
   <div id="grid"
     dojoType="dojox.grid.DataGrid"
     store="theStore"
     structure="layout"  
     autoWidth="true"     
 ></div>   
</body>

And I get the grid displayed nicely. Instead, I want to create the grid dynamically. For the sake of figuring out what’s broken I’ve tried to use exactly the same layout and store, removing just the grid declaration and adding this script:

  <script type="text/javascript" djConfig="parseOnLoad: true, debugAtAllCosts: true">

  dojo.addOnLoad(function(){
        // initialise and lay out home page
        console.log("Have a store:" + theStore);
        console.log("Have a structure:" + layout);

        var grid = new dojox.grid.DataGrid({
                id : "grid",
                store : theStore,
                clientSort : "true",
                structure : layout
        });
        grid.startup();

    dojo.place(grid.domNode, dojo.body(), "first");                     
  });

 </script>

The effect that I get is a completely empty rectangle is displayed. Using FireBug I can see that the DataGrid widget is created but that it has no rows or columns. So my guess is that the datastore or layout are not being passed correctly. However, it does appear that at the point of creation the values of theStore and layout are correct.

Suggestions please, or indeed a working example of a programmatic grid might solve the problem.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First attach the grid to the DOM and create the widget instance then.

    So simply instead of 

    grid.startup();
dojo.place(grid.domNode, dojo.body(), "first");

    write

    dojo.place(grid.domNode, dojo.body(), "first");  
grid.startup();

    You can even set the container node of every Dojo widget right in the constructor.

    var grid = new dojox.grid.DataGrid({
    ⋮                     
}, dojo.byId('grid_container'));
grid.startup();
    • 0