Drawers Nested Listview

2 posts, 0 answers
  1. Sung
    Sung avatar
    2 posts
    Member since:
    Sep 2013

    Posted 10 Oct 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 14 Oct 2013 Link to this post

    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
    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
Back to Top