How to create a dgrid inside a programatically created Dojo Dialog

Question

I am trying to use a Dojo dgrid inside a programmatically created Dojo Dialog using the following code:

define(["dojo/_base/declare","dgrid/Grid", "dijit/Dialog"], function (declare, Grid, Dialog){
    return declare("modules.egisDataGrid", null, {

showFeedBack:function(){

var myDialog = new Dialog({
    title: "FeedBackList",
    style: "width: 600px; height:320px;",
    content: ""
});

var data = [
        { first: "Bob", last: "Barker", age: 89 },
        { first: "Vanna", last: "White", age: 55 },
        { first: "Pat", last: "Sajak", age: 65 }
    ];

    var grid = new Grid({
        columns: {
            first: "First Name",
            last: "Last Name",
            age: "Age"
        }
    }, myDialog.containerNode);


    grid.renderArray(data);
    grid.startup();
      myDialog.show();
 }
 });

});

The dialog appears, but the layout is horribly messed up as follows: enter image description here

I think this is due to the order in which the dgrid is initilized. I have tried everything I could think of, but I still can't figure out how to initilize it properly/

Have you tried removing the second param (`myDialog.containerNode`) from your Grid constructor and setting the Grid (or Grid's `domNode` property) as the Dialog's content? Using something like `myDialog.set("content", grid.domNode)`. — Default, Jul 01 '13 at 13:23
That solution dont work cause the problem is about when you create the grid, and it must be created after the dialog is created and showed on screen so the grid can calculate the size. — cabaji99, May 28 '15 at 19:08

score 0 · Answer 1 · answered Jul 02 '13 at 07:35

You need to make sure the grid calls its resize method when the dialog is shown. At the moment your grid is started while the dialog is not shown, so it has no idea what to do as far as layout and size goes.

myDialog.on('show', someGridResizeFunction);

And call grid.resize() somewhere in that function

How to create a dgrid inside a programatically created Dojo Dialog

1 Answers1