Adding generated HTML to DOM to create Drawer

2 posts, 0 answers
  1. Support@readysetwork
    Support@readysetwork avatar
    7 posts
    Member since:
    Jun 2013

    Posted 13 Mar 2014 Link to this post

    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 data-icon=home><a href=views/index.html data-transition="none">Menu A</a></li>                </ul>
                 <li data-icon=search><a href=views/weather.html data-transition="none">Menu B</a></li>             </ul>
                 <li data-icon=compose><a href=views/location.html data-transition="none">Menu C</a></li>           </ul>
                <li data-icon="settings">Settings</li>
                <li data-icon="off">Log Out</li>

    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

  2. Kiril Nikolov
    Kiril Nikolov avatar
    2598 posts

    Posted 14 Mar 2014 Link to this post

    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 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.

    Kiril Nikolov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top