Adding generated HTML to DOM to create Drawer

[Support@readysetwork]

I am trying to create a dynamic drawer widget on initialization of a view, since there is not programmatic way to create a drawer widget I  build the drawer HTML like so:

<div data-role="drawer" id="my-drawer" style="width: 270px">
    <ul id="nav" data-role="listview" data-type="group">
       <li>Navigation
          <ul>
             <li data-icon=home><a href=views/index.html data-transition="none">Menu A</a></li>                </ul>
          <ul>
             <li data-icon=search><a href=views/weather.html data-transition="none">Menu B</a></li>             </ul>
          <ul>
             <li data-icon=compose><a href=views/location.html data-transition="none">Menu C</a></li>           </ul>
      </li>
      <li>Account
         <ul>
            <li data-icon="settings">Settings</li>
            <li data-icon="off">Log Out</li>
        </ul>
      </li>
   </ul>
</div>

I then append this generated HTML to the DOM but it is not "kendorized" so it doesn't act as the drawer widget would. When I click to open the drawer I get the following error message: Uncaught TypeError: Cannot call method 'openFor' of undefined

I need help getting this to work properly. Thanks

[Kiril Nikolov]

Hello Joel,

All the html in the page is initialized and converted to Kendo UI widgets, when you instantiate a new Kendo UI Mobile application (new kendo.mobile.Application()). I guess the problem comes from the fact that you are adding the drawer to your application after it has been already initialized, so the html is not evaluated and converted to Kendo UI Drawer.

Regards,
Kiril Nikolov
Telerik