Drawers Nested Listview

[Sung]

Hi! i creating a nested list view as much as possible it must be accordion like this:
 http://jquerymobile.com/wp-content/uploads/2012/07/jquery-mobile-collapsible-lists.png

But i cant find any examples near to that so i aim to do this
http://demos.telerik.com/teampulse-demo/view#IterationsStatus 

with this code:

<!--- Layout --->
    <section data-role="layout" data-id="default">
        <!--View content will render here-->
        <header data-role="footer">
            <div data-role="navbar">
                <span data-role="view-title">Home</span>
                <a data-align="right" data-icon="icon-three-dot" data-role="button" href=""></a>
                <a data-align="left" data-icon="icon-three-bar" data-role="button"  href="#sideMenuView" data-rel="drawer"></a>
            </div>
        </header>
    </section>
<!--- End Layout --->

<!--- Drawers --->
    <div data-role="drawer" id="sideMenuView" data-show="rebindListView" data-transition="slide">
        <div data-role="footer">
           <div id="sideMenuNavbar" data-role="navbar" class="bg-white">
                <span data-role="view-title" >
                    <img src="./styles/images/SlideNav.png">
                </span>
                <a data-role="backbutton" id="btnDrawerBack" data-align="left">Back</a>
           </div>
        </div>
        <div class="container">
            <ul id="sideMenuListView"
                class="sideMenuListView"
                data-role="listview"
                data-template="sideMenuDrawer-template"
                data-style="inset">
            </ul>
        </div>
    </div>
<!--- End Drawers --->

<!-- Script Templates -->
         <script id="sideMenuDrawer-template" type="text/x-kendo-template">
        <div class="#: style #">
            # if (data.style == 'settings') { #
                <a data-align="left" data-icon="icon-gears" data-role="button" class="btn-icon" data-click="rebindListView"></a>
            # } else { #
                <a data-align="left" data-icon="icon-angle-right" data-role="button" class="btn-icon" data-click="rebindListView"></a>
            # } #
            <div data-role="button" class="text btn-text" data-click="#: view #">#: name #</div>
        </div>
         </script>
<!-- End Script Templates -->

<!-- Script Variables -->
    <script>
        var category = new kendo.data.DataSource({
            data: [
                {id: 1, name: "Dogs", view:"dogView", style:""},
                {id: 2, name: "Cats", view:"catModalView", style:""},
                {id: 3, name: "Birds", view:"birdView", style:""},
                {id: 4, name: "Snakes", view:"snakeView", style:""},
                {id: 5, name: "Cows", view:"cowView", style:""}
            ]
        }),
        type = new kendo.data.DataSource({
            data: [
                {id: 1, category: 2, name: "Persian"},
                {id: 2, category: 2, name: "Arabian"},
                {id: 3, category: 2, name: "Local"},
                {id: 4, category: 1, name: "Husky"},
                {id: 5, category: 1, name: "Retriever"}
            ]
        })
    </script>
<!-- End Script Variables -->

<!-- Script Functions -->
    <script>
        function rebindListView(e) {
            var params  = e.view.params,
                element     = e.view.element,
                backButton  = element.find('#btnDrawerBack'),
                listView    = element.find("#sideMenuListView").data('kendoMobileListView');

            if (params) {
                var parentID = e.view.params.parent;
                    sideItem    = type.filter({field: "category", operator: "eq", value: parentID});

                    if (sideItem) {
                        backButton.show();
                        listView.setDataSource(sideItem);
                    } else {
                        // redirect to root
                        setTimeout(function() {
                            kendo.mobile.application.navigate('#homeView');
                        }, 0);
                    }

            } else {
                backButton.hide();
                listView.setDataSource(category);
            }

            e.view.scroller.scrollTo(0, 0);

        }
 </script>
<!-- End Script Functions -->

When i click the button for more options (the one that call rebindListView)
i always got this error: Uncaught TypeError: Cannot read property 'params' of undefined index.html:206

[Kiril Nikolov]

Hi,

The problem comes from the fact that e.view.params is only available in the show event of the view. This is the reason why you are getting the above stated error. You can take a look at the following API reference, to read more about the show event of a view:

http://docs.kendoui.com/api/mobile/view#events-show

Regards,
Kiril Nikolov
Telerik