Adding enhanced grid within a titlepane in dojo

So here goes

I have a widget that I have created which contains an enhanced grid.

I now want this widget to have a titlePane that wraps around the enhanced grid which allows me to collapse the grid to the bottom of the page on click.

so, thinking this to be a simple task i edited the template in my widget to be the following:

<div id="wrapper">
    <div data-dojo-type="dijit/TitlePane" data-dojo-props="title: 'Over one year'">
        <div data-dojo-attach-point="gridNode" id="grid"></div>
    </div>
</div>

The behaviour I was expecting was a title pane wrapped around my enhanced grid but instead all i am getting is the grid appearing with no title pane.

Looking at the dom I can see the div for the title pane but no title pane is showing when loading the web page in the browser.

Any dojoers out there know what black magic is required for this to work?