AnsweredAssumed Answered

Why won't my dojo grid display in my bootstrap dialog box?

Question asked by csergent08 Champion on Jul 31, 2015
Latest reply on Aug 12, 2015 by csergent08

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">&times;</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[a].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>

Outcomes