multiple dojo DataGrid on same page not working

Question

I have a requirement to display three dojo Datagrid in same page. Each data grid will use its own data stores to display the data.

I use JsonRestStore to query my REST service to display in the grid. If I use one DataGrid in the page it works fine. But When I tend to use second datagrid, it only displays the first datagrid. If I remove either of the Grid it works fine but not working together.

I spend quite a bit of time by trying so many alternatives but I am not able to solve this issue. I even tried calling the resize() method but didnt work.

Below is the example code my code. One store uses the json rest store and another uses the hard coded data with itemfile read store.

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My ECM Groups</title>
        <link rel="stylesheet" href="scripts/dojo/../dijit/themes/claro/claro.css">
        <style type="text/css">@import "scripts/dojo/../dojox/grid/resources/claroGrid.css";

            /*Grid needs an explicit height by default*/
            #grid {
                height: 60em;
            }</style>
 <script src='scripts/dojo/dojo.js'></script>
        <script> 

            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojox.data.JsonRestStore");
            dojo.require("dojo.data.ItemFileWriteStore");

             dojo.require("dojo._base.lang");
              dojo.require("dojo.dom");
               dojo.require("dojo.domReady!");

            var allGroupsGrid, allGroupsStore;
            dojo.ready(function(){



  var data = {
      identifier: "id",
      items: []
    };
    var data_list = [
      { col1: "normal", col2: false, col3: 'But are not followed by two hexadecimal', col4: 29.91},
      { col1: "important", col2: false, col3: 'Because a % sign always indicates', col4: 9.33},
      { col1: "important", col2: false, col3: 'Signs can be selectively', col4: 19.34}
    ];
    var rows = 60;
    for(var i = 0, l = data_list.length; i < rows; i++){
        data.items.push(dojo._base.lang.mixin({ id: i+1 }, data_list[i%l]));
    }
    var store = new dojo.data.ItemFileWriteStore({data: data});

    /*set up layout*/
    var layout = [[
      {'name': 'Column 1', 'field': 'id', 'width': '100px'},
      {'name': 'Column 2', 'field': 'col2', 'width': '100px'},
      {'name': 'Column 3', 'field': 'col3', 'width': '200px'},
      {'name': 'Column 4', 'field': 'col4', 'width': '150px'}
    ]];

    /*create a new grid*/
    var grid = new dojox.grid.DataGrid({
        id: 'grid3',
        store: store,
        structure: layout,
        rowSelector: '20px'});

        /*append the new grid to the div*/
        grid.placeAt("gridDiv");

        /*Call startup() to render the grid*/
        grid.startup();




     allGroupsStore = new dojox.data.JsonRestStore({target:"resources/ecmgroups/allgroups/", idAttribute:"sid"});  
    var allGroupsLayout = [{'name': 'My ECM Groups', 'field': 'displayName', 'width': 'auto'}];

    /*create a new grid*/
    allGroupsGrid = new dojox.grid.DataGrid({
        id: 'grid',
        store: allGroupsStore,     
        structure: allGroupsLayout,
        rowSelector: '20px'});
          allGroupsGrid.placeAt("allGroupsGridDiv");
        allGroupsGrid.startup();



    });

</script>

<script>
    function renderSecondGrid()
    {
        alert(dijit.byId('grid'));


//dojo.query('div[id^="myGroupsGridDiv"]').forEach(function(node, index, arr) { 

    dijit.byId('grid3').resize(); 
    dijit.byId('grid').resize(); 
    }


</script>


    </head>
    <body>
        <input type="button" value="click" onclick="javascript:renderSecondGrid();">

        <div style="display:block ;width: 30%;height: 50%; float: right" id="allGroupsGridDiv">right</div>      
        <div style="display:block ;width: 30%;height: 50%; " id="gridDiv">custom</div>
    </body>
</html>

If I have answered your question, please accept and upvote. – Jess Apr 03 '13 at 12:56 — Jess, Apr 03 '13 at 12:56

score 0 · Answer 1 · answered Jan 23 '13 at 21:03

I have created a page with multiple DataGrids. Here's some sample code from my page. This is all javascript.

aHTML += "<div id='techDiv" + _userNumber + "'></div>";

...  aHTML has more <table> type tags too ...

var _optionsTable = dojo.create('table', {
    innerHTML : aHTML,
    id : 'optionsTable' + _userNumber,
    class : "UserTechTable"
});
_div.appendChild(_optionsTable);


_techStore = new dojo.data.ItemFileWriteStore({
    data : {
        identifier : 'uniqueId',
        items : techs
    }
});

...
var layout = [ [ {
    name : 'Delete',
    field : 'uniqueId',
    width : '80px',
    formatter : _makeDeleteButton
}, {
    'name' : 'Device',
    'field' : 'deviceCode',
    'width' : '40px'
}, {
    'name' : 'MAC',
    'field' : 'macCode',
    'width' : '40px'
}, {
    'name' : 'Layer',
    'field' : 'layerCode',
    'width' : '80px'
} ] ];

var _techGrid = new dojox.grid.DataGrid({
    id : 'techGrid' + _userNumber,
    store : _techStore,
    structure : layout
}, 'techDiv' + _userNumber);
_techGrid.startup();

Let me know if you need more info.

PS: You may want to consider separating your code from your markup. Move the js to an external *.js file.

multiple dojo DataGrid on same page not working

1 Answers1