AnsweredAssumed Answered

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

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

I am using this sample here:  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>
    <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="">
    <link rel="stylesheet" href="">
  <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src=""></script>


        #myModal {
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
       <script src="//"></script>
       <script src="//"></script>
    <script type="text/javascript">
    var dojoConfig = {
        parseOnLoad: true,
        isDebug: true,
        locale: 'en-us',
        extraLocale: ['ja-jp']

    <!-- This will not work if you set the html lang -->
  <script src=""></script>
       .modal-body, #grid

<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 class="modal-body">
                        <table data-dojo-type="dojox/grid/DataGrid" data-dojo-id="grid" id="grid" data-dojo-props="rowsPerPage:'5', rowSelector:'20px'">
                                    <th field="address" width="200px">Address</th>
                                    <!--<th field="score">Scrore</th>-->

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>



        var items;


            "dijit/registry", "dojo/parser",
     function (on, arrayUtils, Locator, DataGrid, ItemFileReadStore, registry, parser) {

         document.getElementById("grid").style.display = "none";

         on(document.getElementById('ownerAddress'), 'focusout', checkAddress);

         function checkAddress() {
             var locator = new Locator("");
             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);
                 if (addressCandidates.length > 1) {
                     for (a = 0; a < addressCandidates.length; a++) {
                         // This is the address that should go into a grid cell

                     items =, function (result) {
                         return result;
                 var data = {

                     items: items
                 console.log("Log" + data);
                 store = new ItemFileReadStore({
                     data: data
                 // display grid
                 document.getElementById("grid").style.display = "block";
                 // Show modal
                 var grid = registry.byId("grid");
                 grid.on("rowclick", onRowClickHandler);


                 var adresses =  {
                     return x.address;


             }).otherwise(function (err) {
                 console.log('somethings wrong', err);


         function onRowClickHandler(evt) {
             var clickedAddress = evt.grid.getItem(evt.rowIndex).address;
             //  console.log(;