Using Drawer with treeview in mobile app

7 posts, 1 answers
  1. Prudhvi
    Prudhvi avatar
    4 posts
    Member since:
    Jan 2011

    Posted 12 Apr 2014 Link to this post

    Hi,

    I am new to mobile development, in my company we are trying kendo ui complete for mobile app development. So far I was able to develop some screens without any issues for the app. However, now I am running into problems with a specific view or screen.

    In our app a user logins in a picks a task on the second screen then he is sent to a screen that contains 2 drawers (left and right). The left drawer contains a treeview that is bound to a view model and the right drawer has some text. So, the problem is I get uncaught type error: cannot call method 'tolowercase' on undefined inside kendo.all.min.js

    My code looks something like this, this is a screen that is called from my second screen when a user picks a particular task:

        <div data-role="view" id="two-drawer-home" data-title="Default Report">
            <header data-role="header">
                <div data-role="navbar">
                    <a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>
                    <span data-role="view-title"></span>
                    <a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right"></a>
                </div>
            </header>
            <a class="left-btn" data-role="button" data-rel="drawer" href="#left-drawer" data-icon="nav"></a>
            <div data-role="content">
    Main Content Goes Here
            </div>
        </div>
     
        <div data-model="app.Menus" data-init="app.Menus.init" data-role="drawer" id="left-drawer" style="width: 270px" data-title="Select a Report" data-views="['two-drawer-home']">
            <header data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </header>
     
            <div id="zones" class="k-content">
                <div class="configuration-horizontal">
                    <div class="config-section">
                        <div data-role="treeview"
                             data-drag-and-drop="false"
                             data-text-field="Name"
                             data-bind="visible: isVisible,
                           source: zones,
                           events: { select: onSelect }"></div>
                    </div>
                </div>
     
     
            </div>
        </div>
     
        <div data-role="drawer" id="right-drawer" style="width: 80px" data-title="Share" data-position="right" data-views="['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
            Filters will appear here
            </div>

    I have not attached the styles.

    Is this because I have not initialized the treeview as kendotreeview in my view model? If that is the case, can i do that in my init function?

    Thanks for the help !!

  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 14 Apr 2014 Link to this post

    Hello Prudhvi,

    The Kendo UI TreeView should be initialized from a <ul> element and not a <div> as you do in your code. Most probably this is the reason why you get the error message. I have tried to created the same functionality and it works as expected, please check the example:

    http://jsbin.com/hopes/1/edit

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Prudhvi
    Prudhvi avatar
    4 posts
    Member since:
    Jan 2011

    Posted 14 Apr 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril,

    Thanks for the reply but changing the tag from div to ul did not help. I have created mine out of an example from your site and that example uses div tag. Here is the link:

    http://demos.telerik.com/kendo-ui/web/treeview/mvvm.html

    So, please let me know if there is something else I could try.


    Thanks !!




  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 15 Apr 2014 Link to this post

    Hi Prudhvi,

    Can you please extract a sample in a jsBin/jsFiddle that we can run locally and see what exactly happens? Or you can use the example that I provided and edit it so you can reproduce the problem.

    Thanks in advance for the cooperation.

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Prudhvi
    Prudhvi avatar
    4 posts
    Member since:
    Jan 2011

    Posted 15 Apr 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril,

    I have posted the complete code at: https://gist.github.com/anonymous/10743929

    What I have done is I have inlined my javascript file that is referenced in index.html into the html I posted. That is all that I am doing, I am thinking I might be doing something wrong with the view model or in populating the zones data source that is causing the issue. The data from the web service call is returned in the form of a tree structure but I could also return it in the form of a list and put it into a tree structure, whichever works.

    Thanks !!
  7. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 16 Apr 2014 Link to this post

    Hello Prudhvi,

    The Kendo UI TreeView works with Hierarchical dataSource. As I can see in your project you are using a standard Kendo UI DataSource. I would suggest you to check the following demo, that shows how to bind a TreeView using MVVM and hierarchical dataSource:

    http://demos.telerik.com/kendo-ui/web/treeview/mvvm.html

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Prudhvi
    Prudhvi avatar
    4 posts
    Member since:
    Jan 2011

    Posted 17 Apr 2014 in reply to Kiril Nikolov Link to this post

    Thanks Kiril, that worked :)
Back to Top
Kendo UI is VS 2017 Ready