Show/Hide or Toggle a Dojo Grid
https://stackoverflow.com/questions/9504080
-
14-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
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>
Soluzione
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.
Altri suggerimenti
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();
You could position it initially off screen and move it onscreen when you want it to show (Dojo does this with tooltips).
