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

6290
19
Jump to solution
07-31-2015 11:57 AM
ChrisSergent
Regular Contributor III

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.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>

Tags (3)
Reply
0 Kudos
1 Solution

Accepted Solutions
ChrisSmith7
Frequent Contributor

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:

GRID modal test - JSFiddle

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.

View solution in original post

19 Replies
TomWayson
Esri Contributor

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.

Reply
0 Kudos
ChrisSergent
Regular Contributor III

I tried this block, but it does not seem to do anything.

Reply
0 Kudos
TracySchloss
Frequent Contributor

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.

Reply
0 Kudos
ChrisSergent
Regular Contributor III

That was added in when I was at the UC. I commented it out. It appears to have no value.

Reply
0 Kudos
KenBuja
MVP Honored Contributor

That function was incomplete. It should have been

var adresses = addressCandidates.map(function (x)  {

    return x.address;                   

});

Reply
0 Kudos
ChrisSergent
Regular Contributor III

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.

Reply
0 Kudos
TracySchloss
Frequent Contributor

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.

Reply
0 Kudos
TracySchloss
Frequent Contributor

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.

ChrisSergent
Regular Contributor III

Where did you set the breakpoint?

Reply
0 Kudos