Tabbed View with Drawer

3 posts, 1 answers
  1. Gary
    Gary avatar
    4 posts
    Member since:
    Jan 2008

    Posted 20 Jan 2014 Link to this post

    If possible, I'd like a tabstrip layout with a drawer that slides out from the left when you select one of the tabs.  Kind of have it working with something like the code below.   Before I go much further, is this possible with KendoUI?  I'm starting to see some apps do this (like Lowes Hardware app).  It's really nice.

    <div data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
            </div>
        </header>

        <div data-role="footer">
            <div data-role="tabstrip" data-selected-index="1" data-select="onSelect">
                <a data-icon="contacts">foo</a>
                <a data-icon="contacts">bar</a>
                <a data-icon="info">baz</a>
                <a data-icon="info">baz2</a>
                <a data-icon="info">baz4</a>
            </div>
        </div>    
    </div>

    <script>
      
       function onSelect(e) {
        
           if (e.item.index()==0)
           {
               $("#my-drawer").data("kendoMobileDrawer").show();
               e.preventDefault(); //prevent the tab selection
           }
       }
    </script>
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 21 Jan 2014 Link to this post

    Hi Gary,

    Yes, such pattern is possible. In fact, your implementation seems correct, and it should be working as expected.

    Regards,
    Petyo
    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. Gary
    Gary avatar
    4 posts
    Member since:
    Jan 2008

    Posted 26 Jan 2014 in reply to Petyo Link to this post

    Thank you, it's working well so far.  The only issue was strange back-button behavior on Android.  I have to handle the back-button event to make it work.
Back to Top