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>
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.
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.
I updated code you posted so that the store data was created in code and also changed the following
and
and it worked.