Demo of dgrid not displaying in a Dojo/Dijit/ContentPane

I'm trying to display a simple dgrid as per the first demo on this page: http://dgrid.io/tutorials/1.0/grids_and_stores/

The only trick is that I'm trying to put it inside an existing structure of containers. So I tried the onFocus event of the container, but when I click on that container, the grid is not showing, and no console.log message appears.

<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
<script type='dojo/on' data-dojo-event='onFocus'>
    require([
        'dstore/RequestMemory',
        'dgrid/OnDemandGrid'
    ], function (RequestMemory, OnDemandGrid) {
        // Create an instance of OnDemandGrid referencing the store
        var dom = require('dojo/dom');  
        console.log("onFocus event for CustomersGrid ContentPane");             
        dom.byId('studentLastname').value  = 'test onFocus event';
        var grid = new OnDemandGrid({
            collection: new RequestMemory({ target: 'hof-batting.json' }),
            columns: {
                first: 'First Name',
                last: 'Last Name',
                totalG: 'Games Played'
            }
        }, 'grid');

        grid.startup();
    });
</script>
</div>

Solution

I could make it work by:

setting the id of the div to 'grid'
adding a "Click me" span (or I had nothing to focus on)
changing the event name from 'onFocus' to 'focus'

Then, the grid appears when you click on the 'Click me' text (to activate focus).

Below the corresponding full source page (for my environment):

<!DOCTYPE HTML><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Neal Walters stask overflow test</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">

</head>
<body class="claro">
    <div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'>
    <span>click me!</span>
    <script type='dojo/on' data-dojo-event='focus'>
        require([
            'dstore/RequestMemory',
            'dgrid/OnDemandGrid'
        ], function (RequestMemory, OnDemandGrid) {
            // Create an instance of OnDemandGrid referencing the store
            var dom = require('dojo/dom');  
            console.log("onFocus event for CustomersGrid ContentPane");             
            //dom.byId('studentLastname').value  = 'test onFocus event';
            var grid = new OnDemandGrid({
                collection: new RequestMemory({ target: 'hof-batting.json' }),
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    totalG: 'Games Played'
                }
            }, 'grid');

            grid.startup();
        });
    </script>
    </div>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"  data-dojo-config="async:true"></script>
    <script type="text/javascript">
        require(["dojo/parser", "dojo/domReady!"],
        function(parser){
            parser.parse();
        });
    </script>
 </body>

The above is using declarative syntax. Alternatively, you may consider going programmatic, as in the source code below where the grid appears on loading the page. Also whereas with the declarative syntax above a breakpoint inside the script is ignored (using firefox), it is activated as expected with the programmatic syntax:

<!DOCTYPE HTML><html lang="en">
<head>
    <meta charset="utf-8">
    <title>Neal Walters stask overflow test</title>
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dijit/themes/claro/claro.css" media="screen">
    <link rel="stylesheet" href="dojo-release-1.12.2-src/dgrid/css/dgrid.css" media="screen">

</head>
<body class="claro">
    <div id='grid' data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"CustomersGrid"'></div>
    <script src="dojo-release-1.12.2-src/dojo/dojo.js"  data-dojo-config="async:true"></script>
    <script>
        require([
            'dstore/RequestMemory',
            'dgrid/OnDemandGrid'
        ], function (RequestMemory, OnDemandGrid) {
            // Create an instance of OnDemandGrid referencing the store
            var dom = require('dojo/dom');  
            console.log("onFocus event for CustomersGrid ContentPane");             
            //dom.byId('studentLastname').value  = 'test onFocus event';
            var grid = new OnDemandGrid({
                collection: new RequestMemory({ target: 'hof-batting.json' }),
                columns: {
                    first: 'First Name',
                    last: 'Last Name',
                    totalG: 'Games Played'
                }
            }, 'grid');

            grid.startup();
        });
    </script>
</body>