javascript - how to move dojo datagrid after a hidden control is shown -
1 - simple form contains select (let's call select1) , dojo datagrid below it.
2 - when change value of select1 toggles visibility of select, let's call select2, located between select1 , datagrid1
3 - when select2 appears, datagrid1 doesn't move make room it. need happen
please note: due arcgis.com, snippet not run @ first click.
thank you
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/clarogrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/floatingpane.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/resizehandle.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } , </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script> <script src="http://js.arcgis.com/3.13/"></script> <script> var dojoconfig = { parseonload: true } require( [ "dojo/parser", 'dijit/layout/bordercontainer', "dojo/domready!" ], function(parser, bordercontainer) { parser.parse(); var layout = [{ name: "f1", field: "f1", width: '165px', noresize: 'true' }, { name: "f2", field: "f2", width: '125px', noresize: 'true' }, { name: "id", field: "id", width: '40px', noresize: 'true' }, ]; initgrid(layout, "_mygrid", "mygrid", "id"); }); function initgrid(layout, gridid, divid, itemid) { require(['dojo/data/itemfilewritestore', 'dojox/grid/datagrid'], function(itemfilewritestore, datagrid) { var grid = new datagrid({ id: gridid, store: new itemfilewritestore({ data: { items: [] } }), structure: layout, rowselector: '0px' }); grid.placeat(divid); grid.startup(); }); } function changeselect() { if (document.getelementbyid("secondarytable").style.display == 'none') { document.getelementbyid("secondarytable").style.display = "block"; } else { document.getelementbyid("secondarytable").style.display = "none"; } } </script> </head> <body class="claro" style="font-family: verdana; font-size: 11px;"> <div id="mainwindow" data-dojo-type="dijit.layout.bordercontainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;"> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'right'" style="width:30%;"> <div data-dojo-type="dijit.layout.bordercontainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;"> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'top'"> <table> <tr> <td> <select onchange="changeselect()"> <option value="op1" selected="selected">op1</option> <option value="op2">op2</option> </select> </td> </tr> </table> <div> <table id="secondarytable" style="display:none;"> <tr> <td>xxxx</td> <td> <select></select> </td> </tr> </table> </div> </div> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'center'"> <div id="mygrid" style="height:76%;"></div> </div> </div> </div> </div> </body> </html>
what need resize bordercontainer after changing content height. need call bordercontainer.resize();
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css" /> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/grid/resources/clarogrid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/floatingpane.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dojox/layout/resources/resizehandle.css"> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="//code.jquery.com/jquery-1.12.0.min.js"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <style type="text/css"> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } , </style> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script> <script src="http://js.arcgis.com/3.13/"></script> <script> var dojoconfig = { parseonload: true } require( [ "dojo/parser", 'dijit/layout/bordercontainer', "dojo/domready!" ], function(parser, bordercontainer) { parser.parse(); var layout = [{ name: "f1", field: "f1", width: '165px', noresize: 'true' }, { name: "f2", field: "f2", width: '125px', noresize: 'true' }, { name: "id", field: "id", width: '40px', noresize: 'true' }, ]; initgrid(layout, "_mygrid", "mygrid", "id"); }); function initgrid(layout, gridid, divid, itemid) { require(['dojo/data/itemfilewritestore', 'dojox/grid/datagrid'], function(itemfilewritestore, datagrid) { var grid = new datagrid({ id: gridid, store: new itemfilewritestore({ data: { items: [] } }), structure: layout, rowselector: '0px' }); grid.placeat(divid); grid.startup(); }); } function changeselect() { if (document.getelementbyid("secondarytable").style.display == 'none') { document.getelementbyid("secondarytable").style.display = "block"; } else { document.getelementbyid("secondarytable").style.display = "none"; } bordercontainer.resize(); } </script> </head> <body class="claro" style="font-family: verdana; font-size: 11px;"> <div id="mainwindow" data-dojo-type="dijit.layout.bordercontainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;"> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'right'" style="width:30%;"> <div data-dojo-id="bordercontainer" data-dojo-type="dijit.layout.bordercontainer" data-dojo-props="design:'headline',gutters:false" style="height:100%;"> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'top'"> <table> <tr> <td> <select onchange="changeselect()"> <option value="op1" selected="selected">op1</option> <option value="op2">op2</option> </select> </td> </tr> </table> <div> <table id="secondarytable" style="display:none;"> <tr> <td>xxxx</td> <td> <select></select> </td> </tr> </table> </div> </div> <div data-dojo-type="dijit.layout.contentpane" data-dojo-props="region:'center'"> <div id="mygrid" style="height:76%;"></div> </div> </div> </div> </div> </body> </html>
Comments
Post a Comment