Search code examples
javascripthtmldojodojox.grid

Dojo, referenced page in href of Contentpane not loading grid


<script type="text/javascript">
dojo.ready(function(){
    var dataStore;
    var grid;
    dojo.xhrGet({
            url: "/mediation1.0.1/processConfig/getAll",
            handleAs: "json",
            headers:{"Accept" : "application/json"}
    }).then(function(data) {
    dataStore = new dojo.data.ObjectStore({ objectStore:new dojo.store.Memory({ data: data }) });
    grid = new dojox.grid.EnhancedGrid({
    id : "gatewayGrid",
    name : "gatewayGrid",
    store : dataStore,
    query : {id : "*"},
    plugins: {indirectSelection: true,
        pagination: {
        pageSizes: ["10", "20", "30", "All"],
        description: true,
        sizeSwitch: true,
        pageStepper: true,
        gotoButton: true,
        maxPageStep: 2,
        position: "bottom"
    }},
    selectionMode:'single',
    structure : [ 
          {name:"ID", field:"id",hidden:"true"},
          {name : "Name",           field : "name",         width : "auto"}, 
          {name : "IP Address",     field : "_item",    width : "auto",
          formatter: function(item){
              return item.collectorParams.host;
          }}
          , 
          {name : "Cron Interval",  field : "cronExpression",   width : "auto"}, 
          {name : "Status",         field : "active",   width : "auto"}
          ]
}, document.createElement('div'));
dojo.byId("cmdGateway").appendChild(grid.domNode);
grid.startup();
});  
});
</script>
<div id="switchConfigBorder" dojoType="dijit.layout.BorderContainer"
    style="background-color: white">
    <div id="switchConfigWholePane" dojoType="dojox.layout.ContentPane"
        style="background-color: white" region="top">
        <div id="cmdGateway">

        </div>
    </div>
</div>

This is the contents of the page which is referenced from the dojox.layout.ContentPane with href. I can see in the firebug that xhrGet request is fired and data is coming. Surprisingly, this technique work if I populate select. But this EnhancedGrid is not getting rendered.


Solution

  • what is the overflow property of div cmdGateway? It should be auto or scroll. Also try setting the autoHeight property of grid to some integer.

    Couple of days back I also faced same problem with DataGrid. I will suggest to start with setting the height of cmdGateway div and see if Grid is viewable.