Opened 9 years ago

Closed 8 years ago

#10899 closed defect (invalid)

Grid fails to display data when table is surrounded by div tags

Reported by: fphan Owned by: Bryan Forbes
Priority: high Milestone: 1.6
Component: DojoX Grid Version: 1.4.2
Keywords: grid EnhancedGrid Cc:
Blocked By: Blocking:

Description

The below code will only display the header row unless the div tags are removed: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="../js/dijit/themes/tundra/tundra.css"/>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
        </style>
        <style type="text/css">
            /* @import "../js/dojox/grid/resources/Grid.css"; */
            @import "../js/dijit/themes/tundra/tundra.css";
            @import "../js/dojox/grid/enhanced/resources/tundraEnhancedGrid.css";
            /* @import "../js/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css"; */
            /* @import "../../_static/dojoGrid.css"; */
            .dojoxGrid table { margin: 0; }
            html, body { width: 100%; height: 100%; margin: 0; }
        </style>
    </head>
    
    <body class=" tundra ">
      <div>
        <span 
          dojoType="dojox.data.CsvStore" jsId="store1" url="../js/dojox/grid/tests/support/movies.csv">
        </span>

        <table id="grid" dojoType="dojox.grid.EnhancedGrid" store="store1" query="{ Title: '*' }"
                clientSort="true" style="width: 100%; height: 100%;" rowSelector="20px"
                plugins="{nestedSorting: true, dnd: true, indirectSelection: false,  // Each required feature must be turned on
            /* menus:{
            headerMenu:'headerMenu',  //References menus defined declaratively below
            rowMenu:'rowMenu',
            cellMenu:'cellMenu',
            selectedRegionMenu:'selectedRegionMenu'
            } */
            }" >
            <thead>
                <tr>
                    <th width="300px" field="Title">
                        Title of Movie
                    </th>
                    <th width="50px" field="Year">
                        Year
                    </th>
                    <th width="200px" field="Producer">
                        Producer
                    </th>
                </tr>
            </thead>
        </table>
      </div
    </body>
    <script type="text/javascript" src="../js/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
    <script type="text/javascript">
        // dojo.require("dojox.grid.DataGrid");
        dojo.require("dojox.data.CsvStore");
        
        dojo.require("dojox.grid.cells.dijit");
        // Required for all Enhanced features
        dojo.require("dojox.grid.EnhancedGrid");
        // Row/Column drag-drop feature
        dojo.require("dojox.grid.enhanced.plugins.DnD");
        // Declarative pop-up menu feature
        dojo.require("dojox.grid.enhanced.plugins.Menu");
        // Nested sorting feature
        dojo.require("dojox.grid.enhanced.plugins.NestedSorting");
        // Indirect selection(check box/radio button selection) feature
        dojo.require("dojox.grid.enhanced.plugins.IndirectSelection");

    </script>
    <!-- NOTE: the following script tag is not intended for usage in real
    world!! it is part of the CodeGlass and you should just remove it when
    you use the code -->
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (document.pub) {
                document.pub();
            }
        });
    </script>

</html>

Attachments (3)

grid_no_div.PNG​ (38.2 KB) - added by fphan 9 years ago.
Screen shot of table shows correct rendering of content when no div tags surround the table.
grid_w_div.PNG​ (32.4 KB) - added by fphan 9 years ago.
Screen shot of table when div tags are used.
ff_debugger.PNG​ (16.8 KB) - added by fphan 9 years ago.
Screen shot of Firefox debugger where the link shown, when clicked on, will show that data has been retrieved even though none is displayed.

Download all attachments as: .zip

Change History (6)

Changed 9 years ago by fphan

Attachment: grid_no_div.PNG​ added

Screen shot of table shows correct rendering of content when no div tags surround the table.

Changed 9 years ago by fphan

Attachment: grid_w_div.PNG​ added

Screen shot of table when div tags are used.

Changed 9 years ago by fphan

Attachment: ff_debugger.PNG​ added

Screen shot of Firefox debugger where the link shown, when clicked on, will show that data has been retrieved even though none is displayed.

comment:1 Changed 9 years ago by fphan

Setting the height style for the div solves the problem. The min-height style does not work. This has been painfully frustrating.

comment:2 Changed 9 years ago by Douglas Hays

Owner: changed from bryanforbes to Bryan Forbes

comment:3 Changed 8 years ago by evan

Milestone: tbd → 1.6
Resolution: → invalid
Status: new → closed

Closing, in the attached sample code, height/width are missed on the wrapper div.

Note: See TracTickets for help on using tickets.