Why won't my dojo grid display in my bootstrap dialog box?
by
I am using this sample here: http://www.w3schools.com/bootstrap/bootstrap_modal.asp to attempt to create a bootstrap dialog box. The only problem is I can't get the dojo grid to display inside of my modal dialog box. What am I doing wrong?
Here is my code with references as to where I am trying to display the modal and the grid.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dojox/grid/resources/Grid.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.14/dojox/grid/resources/claroGrid.css"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <title></title> <style> #myModal { height:80%; } </style> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> <script type="text/javascript"> var dojoConfig = { parseOnLoad: true, isDebug: true, locale: 'en-us', extraLocale: ['ja-jp'] }; </script> <!-- This will not work if you set the html lang https://community.esri.com/thread/81475 --> <script src="http://js.arcgis.com/3.14/"></script> <style> .modal-body, #grid { height:500px; } </style> </head> <body class="claro"> <label id="lblOwnerAddress" for="ownerAddress">Owner's Address</label> <input type="text" id="ownerAddress" name="ownerAddress" value="111 S Main" /> <div class="container"> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'"> <thead> <tr> <th field="address" width="200px">Address</th> <!--<th field="score">Scrore</th>--> </tr> </thead> </table> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <script> var items; require([ "dojo/on", "dojo/_base/array", "esri/tasks/locator", "dojox/grid/DataGrid", "dojo/data/ItemFileReadStore", "dijit/registry", "dojo/parser", "dijit/layout/ContentPane", "dojo/domReady!" ], function (on, arrayUtils, Locator, DataGrid, ItemFileReadStore, registry, parser) { parser.parse(); document.getElementById("grid").style.display = "none"; on(document.getElementById('ownerAddress'), 'focusout', checkAddress); function checkAddress() { var locator = new Locator("http://maps.decaturil.gov/arcgis/rest/services/Public/WebAddressLocator/GeocodeServer"); //console.log(document.getElementById('ownerAddress').value); var node = document.getElementById('ownerAddress'); // according to your service it takes Single Line var params = { "Single Line Input": node.value }; locator.addressToLocations(params).then(function (addressCandidates) { //console.log('success', addressCandidates); //console.log(addressCandidates.length); if (addressCandidates.length > 1) { for (a = 0; a < addressCandidates.length; a++) { // This is the address that should go into a grid cell console.log(addressCandidates.address); } console.log(addressCandidates); items = arrayUtils.map(addressCandidates, function (result) { console.log(result); return result; }); console.log(items); } var data = { items: items }; console.log("Log" + data); store = new ItemFileReadStore({ data: data }); // display grid document.getElementById("grid").style.display = "block"; // Show modal $("#myModal").modal("show"); var grid = registry.byId("grid"); grid.setStore(store); //registry.byId("grid").display=block; grid.on("rowclick", onRowClickHandler); //console.log(addressCandidates.length); var adresses = addressCandidates.map(function{ return x.address; }); //console.log(adresses); }).otherwise(function (err) { console.log('somethings wrong', err); }); } function onRowClickHandler(evt) { console.log(evt); var clickedAddress = evt.grid.getItem(evt.rowIndex).address; console.log(clickedAddress); alert(clickedAddress); // console.log(evt.explicitOriginalTarget.data); } }); </script> </body> </html>
1 Solution
Accepted Solutions
by
Chris,
in follow-up to our discussion in How do I write address candidates to a grid?, I think you have the right idea trying to construct this declaratively. I have had problems in the past when trying to render stuff in the modal dialog programmatically. I hacked something together, though, that accomplishes this:
Sorry, it's messy... I haven't had a chance to clean it up. Essentially, I had to trigger an event to render the grid after the modal dialog was visible, otherwise, it didn't know how to render completely on startup. While the modal dialog appears responsive, the grid does not... but it should get you in the right direction.
