Opened 10 years ago

Closed 9 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 10 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 10 years ago.
Screen shot of table when div tags are used.
ff_debugger.PNG​ (16.8 KB) - added by fphan 10 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 10 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 10 years ago by fphan

Attachment: grid_w_div.PNG​ added

Screen shot of table when div tags are used.

Changed 10 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 10 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 10 years ago by Douglas Hays

Owner: changed from bryanforbes to Bryan Forbes

comment:3 Changed 9 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.