Drawer problem

4 posts, 0 answers
  1. Johannes Setiabudi
    Johannes Setiabudi avatar
    2 posts
    Member since:
    Sep 2009

    Posted 03 Feb 2015 Link to this post

    I have been trying to follow along on the video here: http://www.telerik.com/videos/platform/building-mobile-apps-using-telerik-platform---part-i

    But, my drawer won't open - in Chrome debugger, I keep getting this error: "Uncaught TypeError: Cannot read property 'openFor' of undefined" when I click on the drawer icon. Any help? My code is below:

    todos.html
    <div data-role="view" id="todos" data-model="APP.todos.model" data-init="APP.todos.events.init" data-after-show="APP.todos.events.afterShow">
      <header data-role="header">
        <div data-role="navbar">
          <a data-role="button" data-rel="drawer" href="#categories" data-icon="drawer-button" data-align="left"></a>
          <span data-role="view-title"></span>
          <!--<a data-role="button" data-rel="modalview" href="#newTodo" data-align="right" data-icon="compose"></a>-->
        </div>
      </header>
      <ul data-role="listview" data-style="inset" data-bind="source: todos" data-template="todos-template" data-pull-to-refresh="true"></ul>
    </div><script type="text/x-kendo-template" id="todos-template">
      #: title #<a class="todo-close" data-bind="click: removeTodo"><i class="fa fa-check-square-o fa-lg"></i></a>
    </script>

    categories.html
    <div data-role="drawer" id="categories" style="width: 270px" data-model="APP.categories.model" data-before-show="APP.categories.events.beforeShow" data-views="['todos']" class="">
      <div class="km-group-title">Categories</div>
      <ul data-role="listview" data-bind="source: categories" data-template="categories-template"></ul>
      <a data-role="button" data-icon="compose" class="full" data-rel="modalview" href="#newCategory">New</a>
    </div><script type="text/x-kendo-template" id="categories-template">
      <a data-bind="click: onCategorySelect">#: name #</a>
    </script>

  2. Anton Dobrev
    Admin
    Anton Dobrev avatar
    539 posts

    Posted 06 Feb 2015 Link to this post

    Hi Johannes,

    Your code seems correct. That is why I assume that the problem might be somewhere else.  For you reference, please follow the completed project's repository from here.

    Let me know if this helps and if you have further questions.

    Regards,
    Anton Dobrev
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Johannes Setiabudi
    Johannes Setiabudi avatar
    2 posts
    Member since:
    Sep 2009

    Posted 06 Feb 2015 in reply to Anton Dobrev Link to this post

    Anton, 

    I found out what the problem was: the video tutorial did not mention this at all - that inside app.js - I need to include all new views within the require clause such as this:


    require([
                    'views/todos/todos',
                    'views/categories/categories',
                    'views/newTodo/newTodo',
                    'views/newCategory/newCategory'
                ]


    Another suggestion maybe to have separate tags for each tutorial step. So I can download the finish code for tutorial #1 before continuing to tutorial #2. Because right now what you have is just the finish code of tutorial 1+2+3. 













  4. Stefan Dobrev
    Admin
    Stefan Dobrev avatar
    790 posts

    Posted 07 Feb 2015 Link to this post

    Hello Johannes,

    Thanks for your constructive feedback. We will consider improving the tutorials by tagging the different steps in GitHub.

    Regards,
    Stefan Dobrev
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top