CODEWITHSUNDEEP
htmldojodojox.grid.datagrid
DemiSheep
DemiSheep

Reputation: 698

How do I get my dojo DataGrid working within a dojo ContentPane that is part of a dojo TabContainer?

I think the problem is that with these widgets separate, one has parseOnLoad = true while the other is false. I tried them both as true and as false with no luck. I created three different web pages, two contain the TabContainer and DataGrid by themselves while the third combine them as stated above. I used TabContainer and DataGrid examples I found. I think I may need to activate the DataGrid after the TabContainer and the ContentPanes are loaded.

Code from TabContainer html page I wrote:

<!DOCTYPE html>
<html dir="ltr">
<head>
<title>Test Widget 2</title>

    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
    <script src="dojo-release-1.10.0/dojo/dojo.js"
        djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");
    </script>
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" />
</head>

    <body class=" claro ">
        <div dojoType="dijit.layout.TabContainer" style="width: 1000px; height: 300px;">
            <div dojoType="dijit.layout.TabContainer" title="Identity" nested="true">
                <div dojoType="dijit.layout.ContentPane" title="Item 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Item 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Item 3">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Security" nested="true">
                <div dojoType="dijit.layout.ContentPane" title="Release-Declass" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Caveats and more">
                    Lorem ipsum and all around - second...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Source Selection" nested="true">
                <div dojoType="dijit.layout.ContentPane" title="Source 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Source 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Source 3">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Output Products" nested="true">
                <div dojoType="dijit.layout.ContentPane" title="Product 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Product 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Product 3">
                    Lorem ipsum and all around - last...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Product 4">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Advanced" nested="true">
                <div dojoType="dijit.layout.ContentPane" title="Advanced 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dijit.layout.ContentPane" title="Advanced 2">
                    Lorem ipsum and all around - second...
                </div>
            </div>

        </div>
    </body>

</html>

Code from datagrid html page I wrote:

<!DOCTYPE html>
<html >
<head>
<title>Test Widget</title>
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" />
    <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/claroGrid.css" />
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script src="dojo-release-1.10.0/dojo/dojo.js"></script>

    <script>
require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale',  'dijit/form/Button',  'dojo/domReady!'],
    function(DataGrid, ItemFileReadStore, stamp, locale, Button){
        function formatter(){
            var w = new Button({
                label: "Click me!",
                onClick: function() {
                    alert("Thanks for all the salmon.  ");
                }
            });
            w._destroyOnRemove=true;
            return w;
        }
        function formatDate(datum){
            /* Format the value in store, so as to be displayed.*/
            var d = stamp.fromISOString(datum);
            return locale.format(d, {selector: 'date', formatLength: 'long'});
        }

        var layout = [
            {name: 'Index', field: 'id'},
            {name: 'Date', field: 'date', width: 10,
                formatter: formatDate    /*Custom format, change the format in store. */
            },
            {name: 'Message', field: 'message', width: 8,
                formatter: formatter    /*Custom format, add a button. */
            }
        ];

        var store = new ItemFileReadStore({
            data: {
                identifier: "id",
                items: [
                    {id: 1, date: '2010-01-01'},
                    {id: 2, date: '2011-03-04'},
                    {id: 3, date: '2011-03-08'},
                    {id: 4, date: '2007-02-14'},
                    {id: 5, date: '2008-12-26'}
                ]
            }
        });
        var grid = new DataGrid({
            id: 'grid',
            store: store,
            structure: layout,
            autoWidth: true,
            autoHeight: true
        });
        grid.placeAt('gridContainer');
        grid.startup();
    });
    </script>
</head>
<body class="claro">
    <div id="gridContainer" style="width: 100%; height: 200px;"></div>
</body>
</html>

Code of combined dojo widgets html page I wrote:

<!DOCTYPE html>
<html dir="ltr">
<head>
<title>Test Widget 3</title>

    <style type="text/css">
        body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
    </style>
<!--    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" -->
<!--        djConfig="parseOnLoad: true"> -->
<!--    </script> -->
    <script type="text/javascript">
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dojox.layout.ContentPane");
    </script>
<!--    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" /> -->

    <!-- Dojo stuff for the datagrid -->
    <link rel="stylesheet" type="text/css" href="dojo-release-1.10.0/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" href="dojo-release-1.10.0/dojo/resources/dojo.css" />
    <link rel="stylesheet" href="dojo-release-1.10.0/dojox/grid/resources/claroGrid.css" />
    <script>dojoConfig = {async: true, parseOnLoad: false}</script>
    <script src="dojo-release-1.10.0/dojo/dojo.js"></script>


    <script>
require(['dojox/grid/DataGrid', 'dojo/data/ItemFileReadStore', 'dojo/date/stamp', 'dojo/date/locale',  'dijit/form/Button',  'dojo/domReady!'],
    function(DataGrid, ItemFileReadStore, stamp, locale, Button){
        function formatter(){
            var w = new Button({
                label: "Click me!",
                onClick: function() {
                    alert("Thanks for all the salmon.  ");
                }
            });
            w._destroyOnRemove=true;
            return w;
        }
        function formatDate(datum){
            /* Format the value in store, so as to be displayed.*/
            var d = stamp.fromISOString(datum);
            return locale.format(d, {selector: 'date', formatLength: 'long'});
        }

        var layout = [
            {name: 'Index', field: 'id'},
            {name: 'Date', field: 'date', width: 10,
                formatter: formatDate    /*Custom format, change the format in store. */
            },
            {name: 'Message', field: 'message', width: 8,
                formatter: formatter    /*Custom format, add a button. */
            }
        ];

        var store = new ItemFileReadStore({
            data: {
                identifier: "id",
                items: [
                    {id: 1, date: '2010-01-01'},
                    {id: 2, date: '2011-03-04'},
                    {id: 3, date: '2011-03-08'},
                    {id: 4, date: '2007-02-14'},
                    {id: 5, date: '2008-12-26'}
                ]
            }
        });
        var grid = new DataGrid({
            id: 'grid',
            store: store,
            structure: layout,
            autoWidth: true,
            autoHeight: true
        });
        grid.placeAt('gridContainer');
        grid.startup();
    });
    </script>   
</head>

    <body class="claro">
        <div dojoType="dijit.layout.TabContainer" style="width: 1000px; height: 300px;">
            <div dojoType="dijit.layout.TabContainer" title="Identity" nested="true">
                <div dojoType="dojox.layout.ContentPane" title="Item 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Item 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Item 3">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Security" nested="true">
                <div dojoType="dojox.layout.ContentPane" title="Release-Declass" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Caveats and more">
                    <div id="gridContainer" style="width: 100%; height: 200px;"></div>
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Source Selection" nested="true">
                <div dojoType="dojox.layout.ContentPane" title="Source 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Source 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Source 3">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Output Products" nested="true">
                <div dojoType="dojox.layout.ContentPane" title="Product 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Product 2">
                    Lorem ipsum and all around - second...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Product 3">
                    Lorem ipsum and all around - last...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Product 4">
                    Lorem ipsum and all around - last...
                </div>
            </div>

            <div dojoType="dijit.layout.TabContainer" title="Advanced" nested="true">
                <div dojoType="dojox.layout.ContentPane" title="Advanced 1" selected="true">
                    Lorem ipsum and all around...
                </div>
                <div dojoType="dojox.layout.ContentPane" title="Advanced 2">
                    Lorem ipsum and all around - second...
                </div>
            </div>

        </div>
    </body>

</html>

Upvotes: 1

Views: 1123

Answers (1)

xangxiong
xangxiong

Reputation: 596

The dojox.layout.ContentPane should have an onShow event. Connect to that event on the ContentPane you want to create the DataGrid. When the onShow gets called, you can trigger the portion of the code that will create the Grid. If you attempt to create the Grid before that Tab is shown, the gridContainer may not be present for the grid to place itself.

<div dojoType="dojox.layout.ContentPane" title="Caveats and more">
    <div id="gridContainer" style="width: 100%; height: 200px;"></div>
    <script type="dojo/connect" event="onShow">
        function formatter(){
            var w = new dijit.form.Button({
                label: "Click me!",
                onClick: function() {
                    alert("Thanks for all the salmon.  ");
                }
            });
            w._destroyOnRemove=true;
            return w;
        }
        function formatDate(datum){
            /* Format the value in store, so as to be displayed.*/
            var d = dojo.date.stamp.fromISOString(datum);
            return dojo.date.locale.format(d, {selector: 'date', formatLength: 'long'});
        }

        var layout = [
            {name: 'Index', field: 'id'},
            {name: 'Date', field: 'date', width: 10,
                formatter: formatDate    /*Custom format, change the format in store. */
            },
            {name: 'Message', field: 'message', width: 8,
                formatter: formatter    /*Custom format, add a button. */
            }
        ];

        var store = new dojo.data.ItemFileReadStore({
            data: {
                identifier: "id",
                items: [
                    {id: 1, date: '2010-01-01'},
                    {id: 2, date: '2011-03-04'},
                    {id: 3, date: '2011-03-08'},
                    {id: 4, date: '2007-02-14'},
                    {id: 5, date: '2008-12-26'}
                ]
            }
        });
        var grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: store,
            structure: layout,
            autoWidth: true,
            autoHeight: true
        }, 'gridContainer');
        grid.startup();
    </script>
</div>

Upvotes: 1

Related Questions