How do I get my dojo grid to display in my bootstrap dialog box?

[cruncher06]

I have a bootstrap dialog box that displays, but it does not show up in my dojo grid.
Here is my code:

<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://geonet.esri.com/thread/81475 -->
<script src="http://js.arcgis.com/3.14/"></script>

.modal-body, #grid { height:500px; } Owner's Address

    <!-- 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 (x) {
                 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>