Using Drawer with treeview in mobile app

[Prudhvi]

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

[Kiril Nikolov]

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

 

 

[Prudhvi]

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

[Kiril Nikolov]

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

 

 

[Prudhvi]

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

[Kiril Nikolov]

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

 

 

[Prudhvi]

Thanks Kiril, that worked :)