Creating multiple grids in dojo

Question

Suppose I have multiple sources for which I want to have a dojo-grid and populate by their data. When one source is selected, I am able to create and populate the grid. But when it comes to the selecting all sources at a time suppose I have selected 3. So , I have to create 3 grids in same page instead of one. I guess I have to use loops so that I can create the grids as many as source.

But I am not able to write the code for creating multiple dojo jata grid. Please give some suggestions or suggest with some code examples.

For single grid I have code like this:

     require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp',      'dojo/date/locale', 'dojo/domReady!'],
          function(DataGrid, ItemFileReadStore){
            var layout = [
                {name:'srcrecno',field:'srcrecno',width:20},
                {name: 'Score', field: 'Score', width:20},
                {name: 'Members', field: 'Members', width:20},
                {name:'Entities', field:'Entities',width:20}
                ];

            var store = new ItemFileReadStore({
                data: {
                    items:<%=fa.jsonstring()%>
                }
            });
            var grid = DataGrid({
                id: 'grid',
                store: store,
                structure: layout,

            });
            grid.placeAt('gridDiv');
            grid.startup();
        }); 

Answer 1

var data1 =  {
        items : <brp:json value="${display1}"/>,
        identifier : "id"
    };
 var store = new dojo.data.ItemFileReadStore({
    data : data1
}); 

        var layout = [ {
            field : 'id',
            name : 'Column1',
            width : '150px'
        },{
            field : 'Column2',
            name : 'Column2',
            width : '200px'
            },{
            field : 'Column3',
            name : 'Column3',
            width : '490px'
        } ];
        var grid = new dojox.grid.EnhancedGrid({
            id : 'grid',
             query : {
                id : '*'
            }, 
            store : store, 
            clientSort : false,
            rowSelector : '20px',
            plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}},
            height : "380px",   
            structure : layout,
        }, document.createElement('div'));

        dojo.byId("div1").appendChild(grid.domNode);



         var data2 =  {
                items : <brp:json value="${display1}"/>,
                identifier : "id"
            };
         var store2 = new dojo.data.ItemFileReadStore({
            data : data2
        });  

        var Structure2 = [ {
            field : 'id',
            name : 'Column1',
            width : '150px'
        },{
            field : 'Column2',
            name : 'Column2',
            width : '200px'
            },{
            field : 'Column3',
            name : 'Column3',
            width : '490px'
        } ];
        var grid2 = new dojox.grid.EnhancedGrid({
             id : 'grid2',
             query : {
             id : '*' 
            }, 
            store : store2,
            clientSort : false,
            rowSelector : '20px',
            plugins: {indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}},
            height : "380px",   
            structure : Structure2,

        }, document.createElement('div'));

        dojo.byId("div2").appendChild(grid2.domNode); 

        grid.startup();
        grid2.startup();

You have to do one more thing - Inside div where you want to display the div put with height

Notes - grid.startup(); --> indicate starting of your div where grid is your specified grid

div1 and div2 ---> your div-id

plugins:
{indirectSelection: {headerSelector:true, width:"40px", styles:"text-align: center;"}}
-->is for check boxes for your grid data's

Like this we can populate no. of grid using dojo.