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 :)

[Bhavika]

Integrating a Drawer with a TreeView in a mobile app can create an efficient and user-friendly navigation experience, especially when dealing with hierarchical data. Here's how you can approach this:

1. What is a Drawer?

A Drawer is a sliding panel, typically used for navigation in mobile apps. It allows users to access menus or options by swiping from the edge of the screen or tapping a menu icon.

2. What is a TreeView?

TreeView is a UI component that displays hierarchical data in an expandable and collapsible structure. It’s useful for organizing data like folders, categories, or multi-level options.

3. Combining Drawer and TreeView

• Design: Place the TreeView inside the Drawer component to represent the hierarchical navigation menu.
• Functionality: Ensure each node of the TreeView triggers an action, such as navigating to a new screen or updating content dynamically.

4. Implementation Tips

For Flutter

• Use Drawer widget and embed a ListView or ExpansionTile for TreeView functionality.

For React Native

• Use a library like react-navigation for Drawer and a TreeView package like react-native-simple-treeview to create the hierarchical menu.

5. Best Practices

• Usability: Keep the Drawer content lightweight and ensure smooth animations for expanding/collapsing the TreeView.

• Consistency: Use icons and labels to make navigation intuitive.

• Performance: Optimize rendering, especially for large datasets in the TreeView.