Reputation: 594

Show/Hide or Toggle a Dojo Grid

What is the best way to show/hide a Dojo data Grid?

I am coding a page that needs some user input before it displays a data grid. So, ideally, the grid section of the page should be blank/empty when the page loads. Once the user provides specific input the grid should show up in designated place.

I have tried setting the style="display:none" and then coding js to set display="block" and toggle between none and block but it only shows the outline of the grid.

If I omit the style="display:none" the gird shows up on load and, I can hide/unhide it subsequently without any issue with the same code.

I am perplexed why it behaves differently when I set the display=none on load. What is the way around or alternative to solve this issue?

Any insight is much appreciated.

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Dojo Test</title>

        <link rel="stylesheet" href="/cv/static/css/demo.css" media="screen">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js" data-dojo-config="isDebug: true, async: true"></script>
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/resources/dojo.css">

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/Grid.css">
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojox/grid/resources/claroGrid.css">

        <style type="text/css">

        #target-grid{
                width: 950px;
                height: 350px;
                /*visibility:hidden;*/
                display: none;
                position:relative; left:0; top:0; z-index:10;
               border:1px solid #ebebeb; border-top:1px solid #f2f2f2;
               -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;
               behavior:url('/media/css/PIE.htc');
               float: left;


        }   
        </style>




        <script>

        var myStore, dataStore, grid;

        require([

            "dojo/store/JsonRest",

            "dojo/store/Memory",

            "dojo/store/Cache",

            "dojox/grid/DataGrid",

            "dojo/data/ObjectStore",

            "dojo/query",

            "dojo/domReady!"

        ], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){

            myStore = Cache(JsonRest({target:"http://127.0.0.1:8080/cv/insight/data/2/"}), Memory());

            grid = new DataGrid({

                store: dataStore = ObjectStore({objectStore: myStore}),

                structure: [

                    {name:"State Name", field:"name", width: "200px"},

                    {name:"Abbreviation", field:"id", width: "200px", editable: true}

                ]

            }, "target-node-id"); // make sure you have a target HTML element with this id


                            grid.startup();

            query("#save").onclick(function(){

                dataStore.save();

            });

        });

    </script>





        <script>
        require(["dijit/form/Button", "dojo/_base/Deferred", "dojo/_base/xhr", "dojo/_base/array", "dojo/dom-construct", "dojo/dom","dojo/domReady!"],
                            function(Button,Deferred, xhr, baseArray, domConstruct, dom) {
            var button = new Button({
                label: "Click Me!",
                onClick: function(){

                                        .......





                                    }
            }, "btn");
            button.startup();

            var button2 = new Button({
                iconClass:"dijitIconNewTask",
                showLabel:false,
                label: "Click Me!", // analogous to title when showLabel is false
                onClick: function(){




                                        var ele = dom.byId("target-grid");

                                        if(ele.style.display == "block") {

                                                dojo.setStyle("target-grid", {"display": "none"});
                                                //dojo.style(ele.domNode, 'display', 'none');

                                        }
                                        else {


                                                dojo.setStyle("target-grid", {"display": "block"});
                                               //dojo.style(ele.domNode, 'display', 'block');
                                                //ele.startup();
                                                ele.resize();


                                        }
                                    }

            }, "btn2");

            button2.startup();
        });

    </script>
        </script>

</head>
<body class="claro">
    <h1>Demo</h1>
            <button id="btn"></button>
            <button id="btn2"></button>
    <ul id="userlist"></ul>
            <div id="result1"></div>

            <div id="target-grid"></div>



</body>

Upvotes: 3

Answers (3)

Tom

Reputation: 1

You could position it initially off screen and move it onscreen when you want it to show (Dojo does this with tooltips).

Upvotes: 0

rhm2012

Reputation: 594

There is a hack for this:

I used a fieldset and then called a sort() on the grid upon display. Seems to work.

<fieldset id="target-grid1" style="display:none"> 
  <div id="target-grid"></div> 
</fieldset>

Then in your toggle procedure call:

dojo.setStyle("target-grid", {"display": "block"}); 
grid.sort();

Upvotes: 0

Craig Swing

Reputation: 8162

I think setting the display attribute is correct. If I remember correctly, you should also call resize on the grid. If the grid is hidden, does it's startup method get called? You may need to do this as well.

// to hide grid
dojo.style(grid.domNode, 'display', 'none');

// to show grid
dojo.style(grid.domNode, 'display', '');
// grid.startup(); // needed???
grid.resize();

In response to the comment

I used the following html. Without the resize call, I get see the outline of the grid. With the resize call it works.

<div dojoType="dojo.data.ItemFileReadStore" jsId="jsonStore" url="dojox/grid/tests/support/countryStore.json" ></div>

<table dojoType="dojox.grid.DataGrid"
    jsid="grid" id="grid" 
    store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"
    style="width: 400px; height: 200px; display:none;">
    <thead>
        <tr>
            <th field="name" width="300px">Country/Continent Name</th>
            <th field="type" width="auto">Type</th>
        </tr>
    </thead>
</table>

I updated code you posted so that the store data was created in code and also changed the following

}, "target-node-id"); // make sure you have a target HTML element with this id
//to
}, "target-grid"); // make sure you have a target HTML element with this id

and

ele.resize();
// to
grid.resize();

and it worked.

Upvotes: 3

Show/Hide or Toggle a Dojo Grid

Answers (3)

Related Questions