[Dojo-interest] Grid issue

[Kenton Smeltzer]

Guys I am having an issue that I have been chasing for three days and I cannot for the life of me figure out what the issue is, When I add my custom widget to any other widget, declaritive or programmaticlly, the grid inside my widget does not show up. for example the following dialog will not display the grid in my widget. If I add it to the main page it displays the grid just fine.

var planSelector = new widget.product.plan.selector.PlanSelector();
 planSelector.setProduct(product);
 planSelector.startup();

var dialog = new dijit.Dialog({title : "Select Plans", content : planSelector.domNode, style : "width : 400px, height : 400px"});
 dojo.body().appendChild(dialog.domNode);
 dialog.startup();
 dialog.show();



Here is the Widgets javascript file:

dojo.provide("widget.product.plan.selector.PlanSelector");
dojo.require("dojox.grid.DataGrid");

dojo.declare("widget.product.plan.selector.PlanSelector", [dijit._Widget, dijit._Templated], {
    widgetsInTemplate : true,
   templatePath : dojo.moduleUrl("widget", "widget/product/plan/selector/PlanSelector.html"),

   postCreate : function()
   {
       console.log(this.plansGridNode);
       this.plansGridNode.setStore(new dojo.data.ItemFileReadStore({data : {identifier : "id", label : "name", items : [{id : "1", name : "alvin"}, {id : "2", name : "simon"}]}}));
   }
});


and here is the template:

<div dojoAttachPoint="containerNode">

    <div style="width:300px; height : 300px">
        <table dojoAttachPoint ="plansGridNode" dojoType="dojox.grid.DataGrid" query="{ id : '*' }" autoHeight="true" style="width:300px;">
            <thead>
                <tr>
                    <th field="id"  width="99px">Record ID:</th>
                    <th field="name" width="198px" >Product Name:</th>
                    <th field="active" width="100px">Enabled:</th>
                </tr>
            </thead>
        </table>
    </div>

</div>




Here is the html pulled from firebug, the widget and grid are there they are just not showing up whentheir parrent widgets is inside another widget.


<div id="widget_product_plan_selector_PlanSelector_0" dojoattachpoint="containerNode" widgetid="lbs_widget_product_plan_selector_PlanSelector_0">
    <div style="width: 300px; height: 300px;">
        <div id="dojox_grid_DataGrid_0" class="dojoxGrid" dojoattachevent="onmouseout:_mouseOut" wairole="grid" hidefocus="hidefocus" role="grid" tabindex="0" aria-multiselectable="true" style="width: 300px; height: auto; -moz-user-select: none;" widgetid="dojox_grid_DataGrid_0" aria-readonly="true" aria-activedescendant="dojox_grid_DataGrid_0Hdr0">
            <div class="dojoxGridMasterHeader" wairole="presentation" dojoattachpoint="viewsHeaderNode" role="presentation" style="display: block; height: 0px;">
                <div class="dojoxGridHeader" wairole="presentation" dojoattachpoint="headerNode" role="presentation" style="width: 0px; left: 1px; top: 0pt;">
                    <div wairole="presentation" style="width: 9000em;" dojoattachpoint="headerNodeContainer" role="presentation">
                        <div wairole="row" dojoattachpoint="headerContentNode" role="row">
                            <table class="dojoxGridRowTable" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                <tbody>
                                    <tr>
                                        <th id="dojox_grid_DataGrid_0Hdr0" class="dojoxGridCell dojoDndItem dojoxGridCellFocus" dndtype="gridColumn_dojox_grid_DataGrid_0" style="width: 99px;" idx="0" colspan="1" role="columnheader" aria-readonly="true" tabindex="-1">
                                            <div class="dojoxGridSortNode">Record ID:</div>
                                        </th>
                                        <th id="dojox_grid_DataGrid_0Hdr1" class="dojoxGridCell dojoDndItem " dndtype="gridColumn_dojox_grid_DataGrid_0" style="width: 198px;" idx="1" colspan="1" role="columnheader" aria-readonly="true" tabindex="-1">
                                            <div class="dojoxGridSortNode">Product Name:</div>
                                        </th>
                                        <th id="dojox_grid_DataGrid_0Hdr2" class="dojoxGridCell dojoDndItem " dndtype="gridColumn_dojox_grid_DataGrid_0" style="width: 100px;" idx="2" colspan="1" role="columnheader" aria-readonly="true" tabindex="-1">
                                            <div class="dojoxGridSortNode">Enabled:</div>
                                        </th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dojoxGridMasterView" wairole="presentation" dojoattachpoint="viewsNode" role="presentation" style="height: 0px;">
                <div id="dojox_grid__View_1" class="dojoxGridView" wairole="presentation" role="presentation" widgetid="dojox_grid__View_1" style="width: 0px; left: 1px; top: 0px;">
                    <input class="dojoxGridHiddenFocus" type="checkbox" wairole="presentation" dojoattachpoint="hiddenFocusNode" role="presentation"/>
                    <input class="dojoxGridHiddenFocus" type="checkbox" wairole="presentation" role="presentation"/>
                    <div class="dojoxGridScrollbox" wairole="presentation" dojoattachpoint="scrollboxNode" role="presentation">
                        <div class="dojoxGridContent" wairole="presentation" hidefocus="hidefocus" dojoattachpoint="contentNode" role="presentation" style="height: 1px; width: 0px;">
                            <div role="presentation" style="position: absolute; left: 0pt; top: 0px;">
                                <div class="dojoxGridRow" role="row" aria-selected="false" style="">
                                    <table class="dojoxGridRowTable" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                        <tbody>
                                            <tr>
                                                <td class="dojoxGridCell " style="width: 99px;" idx="0" colspan="1" role="gridcell" tabindex="-1">1</td>
                                                <td class="dojoxGridCell " style="width: 198px;" idx="1" colspan="1" role="gridcell" tabindex="-1">alvin</td>
                                                <td class="dojoxGridCell " style="width: 100px;" idx="2" colspan="1" role="gridcell" tabindex="-1">...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="dojoxGridRow dojoxGridRowOdd" role="row" aria-selected="false" style="">
                                    <table class="dojoxGridRowTable" cellspacing="0" cellpadding="0" border="0" role="presentation">
                                        <tbody>
                                            <tr>
                                                <td class="dojoxGridCell " style="width: 99px;" idx="0" colspan="1" role="gridcell" tabindex="-1">2</td>
                                                <td class="dojoxGridCell " style="width: 198px;" idx="1" colspan="1" role="gridcell" tabindex="-1">simon</td>
                                                <td class="dojoxGridCell " style="width: 100px;" idx="2" colspan="1" role="gridcell" tabindex="-1">...</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dojoxGridMasterMessages" dojoattachpoint="messagesNode" style="display: none;"/>
            <span tabindex="0" dojoattachpoint="lastFocusNode"/>
        </div>
    </div>
</div>



Any help would be greatly appreciated.

[Peter Svensson]

Hi Kenton. Without having the time right now to check out all your info (but it's good that you have copied it :) my basic rules when working with grids are that the DOM node where they are to be created must be visible on the page at the time of creation. After that it can be hidden or moved, but if you try to create a grid inside a ContentPane that is not visible in a TabContainer (for example), that grid will have weird proeprties and not be shown when you finally switch to the tab where it should be.

It sounds like you are experiencing something similar. Again, something else might be the matter, but it could be worth double-checking.

Cheers,
PS

_______________________________________________
FAQ: http://dojotoolkit.org/support/faq
Book: http://docs.dojocampus.org
Dojo-i...@mail.dojotoolkit.org
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest

--
Don't miss the hottest event of 2010: Scandinavian Web Developer Conference: http://www.swdc-central.com
--
http://se.linkedin.com/in/petersvensson

[Kenton Smeltzer]

The only thing different is that it is being programaticly created and place inside of a dialog which I suppos is hidden untill you call show but I don't know of a way to change that sequence of events I could try to set the content of the dialog after I cann it's show but I would imaging that would have ramifications within itself.

Thanks,
Kenton

[Peter Svensson]

OK, there you have it then.

What I do is detect when the container is shown, and then if the grid is not created, I create it.

Check out the source of dijit.Dialog, I bet it has a function you could connect to.

Let's see..

I think this would work;

dojo.connect(my_dialog, "_onShow", this, function()

{

  // Check if grid is created, else create it

});

Cheers,
PS

[Kenton Smeltzer]

got it I had to add the dialog to the dom then call its show, then set its content and then set the store of the grid inside the content for it to work correctly.