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>
Solved! Go to Solution.
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.
without looking into the code, I'd suggest calling .startup() on the grid after the modal is .shown() - grids (and many dojo comopnents) don't won't update their UI if they in a hidden container (i.e. a non-active tab, or a modal dialog that is not displaying) and you need to force them to redraw once they become visible.
I tried this block, but it does not seem to do anything.
What is
var adresses = addressCandidates.map(function {
return x.address;
});
?
This doesn't make sense to me.
Every time I've had problems populating my grid, it turns out there is something not formatted correctly in the data I'm trying to use. I'm not sure you can use the addressCandidates as-is. You may have to lift just the address out of the list instead of using the whole object.
That was added in when I was at the UC. I commented it out. It appears to have no value.
That function was incomplete. It should have been
var adresses = addressCandidates.map(function (x) { return x.address; });
That's actually what it was in my original code in my application. I am not sure why it's missing here, but I don't think I need it.
I've been using dGrid for a while, so I might be wrong about this, but you might need to have an identifier in your data. That could be a problem, since there's not one built into your AddressCandidates.
I had a breakpoint set and once I went it after typing that last message, I resumed the code and it worked. Maybe you have a situation where you need to have it set up as some sort of deferred.
Where did you set the breakpoint?