[Dojo-interest] Grid note rendering detail data when Grid's div wrapped in another div

Thu Jun 10 08:58:32 EDT 2010

Ok.... found the issue. If the enclosing div does not have a specified
Height and Width style, then the only thing that will render is the
header of the grid.

Is this a bug?

On Thu, Jun 10, 2010 at 8:27 AM, Rob Weiss <j105.rob at gmail.com> wrote:
> I know I posted this as a reply to another question, but I want to
> make sure hat the title reflected the issue I found, sorry for the
> double post!!
>
> Ok This is weird....
>
>
>               <div id="persona">
>               <div id="personaGrid"  style="width: 100%; height: 100%;"></div>
>               </div>
>
> Causes the grid not to render the data, even though the data is there using
> the dom inspector, its just not visible on the page.
>
> This.....
>
>
> <div id="personaGrid"  style="width: 100%; height: 100%;"></div>
>
>
> Renders the grid as expected.
>
> Anyone have any ideas as to why wrapping the "personaGrid" div within
> another div causes the data not to render as one would expect?
>
> Here is the code I used to test (local dojo):
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
> <html>
>   <head>
>       <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
>       <title>KARMA - v0.0.3a</title>
>       <style type="text/css">
>           @IMPORT url("./js/dojo/resources/dojo.css");
>           @IMPORT url("./js/dijit/themes/soria/soria.css");
>           @IMPORT url("./js/dojox/grid/resources/Grid.css");
>           @IMPORT url("./js/dojox/grid/resources/soriaGrid.css");
>           @IMPORT
> url("./js/dojox/editor/plugins/resources/css/FindReplace.css");
>           @IMPORT url("./js/dojox/editor/plugins/resources/css/Save.css");
>
>           html, body {
>               height: 100%;
>               width: 100%;
>               margin: 0;
>               padding: 0;
>
>           }
>       </style>
>
>       <script type="text/javascript">
>
>
>           djConfig = {
>               parseOnLoad: true,
>               baseScriptUri: "../js/dojo/"
>           };
>       </script>
>       <script language='JavaScript' type="text/javascript"
> src="./js/dojo/dojo.js">
>
>       </script>
>       <script type="text/javascript">
>
>
>                       function loader(){
>
>
> dojo.require("dojo.data.ItemFileReadStore");
>
> dojo.require("dijit.form.Button");
>
> dojo.require("dojo.parser");
>
> dojo.require("dojox.grid.EnhancedGrid");
>
>
>                           dojo.addOnLoad(loaderCallback);
>                       }
>                       function loaderCallback(){
>                                                       var gridStore =
> new dojo.data.ItemFileReadStore({data:{
>
> identifier : "id",
>                                                               label: "name",
>                                                               jsId:
> "GridStore",
>                                                               id: "GridStore",
>                                                               items:
>                                                                       [
>
>        {"id":"5","name":"IFE","curp":"curp"},
>
>
>        {"id":"6","name":"IFE 1","curp":"curp 1"}
>                                                                       ]
>                                                                       }});
>
>
>                                                       var gridlayout = [
>                                                       { name:
> "ID",field: "id"  , width: "100%",editable:"false"},
>                                                       { name:
> "NAME",field: "name", width: "100%",editable:"false"},
>                                                       { name:
> "CURP",field: "curp", width: "100%",editable:"false"}
>
>                                                       ];
>
>
>                                                       var grid = new
> dojox.grid.EnhancedGrid({
>                                                       id: 'personaGrid',
>
>                                                       jsid: 'personaGrid',
>                                                       store: gridStore,
>                                                       //clientSort: true,
>                                                       rowSelector: '20px',
>                                                       structure: gridlayout,
>
>                                                       noDataMessage:"test"
>                                                       },'personaGrid');
>
>                                                       grid.startup();
>
>
>                                           };
>
>                       dojo.addOnLoad(loader);
>
>       </script>
>   </head>
>   <body class='soria'>
>
>                       <div id="persona">
>               <div id="personaGrid"  style="width: 100%; height: 100%;"></div>
>               </div>
>
>
>   </body>
> </html>
>