TabStrip --> Drawer stops working in 2014 Q1

5 posts, 0 answers
  1. Mike Graham
    Mike Graham avatar
    29 posts
    Member since:
    May 2010

    Posted 22 Mar 2014 Link to this post

    Greetings,

    Unless I'm missing something, in Q1 2014 kendo mobile tabstrip, buttons now fail to launch the drawer properly.
     
    I pasted a modified version of the mobile drawer sample with a footer that has a tabstrip with the same button that launches the drawer from the header navbar.  When you click the button in the footer's tabstrip, the drawer doesn't respond (nothing happens).

    (to reproduce, save the code below in a file called "index2.html" in the folder for the mobile drawer sample: C:\Program Files (x86)\Telerik\Kendo UI Complete Q1 2014\examples\mobile\drawer in my case),

    the drawer pops out fine when you use the button in the header's nav bar,

    but fails to pop out when you use the button in the footer's tab strip.  

    This was working in my project 2013 Q3, then I upgraded to the 2014 Q1 and it stopped working.

    Do not take this as a complaint - Kendo is amazing and awesome.  You guys are making my 2014 fantastic.

    -Mike Graham
    <!DOCTYPE html>
    <html>
    <head>
        <title>Basic usage</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <script src="../../../js/jquery.min.js"></script>
        <script src="../../../js/kendo.all.min.js"></script>
        <link href="../../../styles/kendo.common.min.css" rel="stylesheet" />
        <link href="../../../styles/kendo.rtl.min.css" rel="stylesheet">
        <link href="../../../styles/kendo.default.min.css" rel="stylesheet">
        <script src="../../content/shared/js/console.js"></script>
        <link href="../../../styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <style>
            [href*=index], #back-button
            {
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox">
        <ul data-role="listview" class="inboxList">
            <li>
                <h3 class="time">07:56</h3><h3>John Doe</h3>
                <h2>Monday meeting</h2>
                <p>Hi Tom, Since Monday I'll be out of office, I'm rescheduling the meeting for Tuesday.</p>
            </li>
            <li>
                <h3 class="time">08:21</h3><h3>Joe Harper</h3>
                <h2>I'm sorry, Tom</h2>
                <p>Hi Tom, my aunt comes for a visit this Saturday, so I can't come back to St. Pete...</p>
            </li>
            <li>
                <h3 class="time">08:33</h3><h3>Sarah Connor</h3>
                <h2>Regarding org chart changes</h2>
                <p>Tom, I checked the new org chart last night and I have some reservations about it...</p>
            </li>
            <li>
                <h3 class="time">08:40</h3><h3>John Doe</h3>
                <h2>Re: Regarding org chart changes</h2>
                <p>Agree with Sarah...</p>
            </li>
            <li>
                <h3 class="time">09:16</h3><h3>Jane Parker</h3>
                <h2>Your Costume is ready</h2>
                <p>Hi mr. Sawyer, I'm sorry for the delay, your Halloween costume is ready. The bears...</p>
            </li>
            <li>
                <h3 class="time">11:03</h3><h3>Becky Thatcher</h3>
                <h2>Out tonight?</h2>
                <p>Honey, wanna go out tonight to grab some chicken? My weekly vouchers for cooking...</p>
            </li>
        </ul>
    </div>
     
    <div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
        <ul data-role="listview">
            <li data-icon="star">Monday meeting</li>
            <li data-icon="star">Regarding org chart changes</li>
            <li data-icon="star">Re: Regarding org chart changes</li>
            <li data-icon="star">Your Costume is ready</li>
            <li data-icon="star">Out tonight?</li>
        </ul>
    </div>
     
    <div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
        <ul data-role="listview">
            <li data-icon="compose">Re: Monday meeting</li>
            <li data-icon="compose">Untitled message 1</li>
            <li data-icon="compose">Untitled message 2</li>
            <li data-icon="compose">Re: Regarding org chart changes</li>
            <li data-icon="compose">Re: Re: Regarding org chart changes</li>
            <li data-icon="compose">Re: Your Costume is ready</li>
            <li data-icon="compose">Re: Out tonight?</li>
            <li data-icon="compose">Untitled message 3</li>
        </ul>
    </div>
     
    <div data-role="view" id="drawer-sent" data-layout="drawer-layout" data-title="Sent Items">
        <ul data-role="listview">
            <li>Build enterprise apps</li>
            <li>Fw: Regarding Multiline textbox</li>
            <li>Away next week</li>
            <li>Fw: Your Costume is ready</li>
            <li>Update completed</li>
            <li>Survey</li>
            <li>Problem with this account</li>
            <li>Advice For Designers</li>
            <li>Fw: Missing Book</li>
            <li>Fun & useful reading</li>
        </ul>
    </div>
     
    <div data-role="view" id="drawer-deleted" data-layout="drawer-layout" data-title="Deleted Items">
        <ul data-role="listview">
            <li data-icon="trash">Untitled message 4</li>
            <li data-icon="trash">Untitled message 5</li>
        </ul>
    </div>
     
    <div data-role="view" id="drawer-spam" data-layout="drawer-layout" data-title="Spam">
        <ul data-role="listview">
            <li>90% Discount!</li>
            <li>90% Discount!</li>
            <li>One time offer!</li>
        </ul>
        <a data-role="button" style="background-color: darkred; display: block; margin: 2em; font-size: 1.4em;">Delete Spam</a>
    </div>
     
    <div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['drawer-home', 'drawer-starred', 'drawer-deleted', 'drawer-spam', 'drawer-drafts', 'drawer-sent', '@Url.Content("~/mobile/m/drawer/index.html")']">
        <ul data-role="listview" data-type="group">
            <li>Mailbox
                <ul>
                    <li data-icon="inbox"><a href="#drawer-home" data-transition="none">Inbox</a></li>
                    <li data-icon="star"><a href="#drawer-starred" data-transition="none">Starred Items</a></li>
                    <li data-icon="compose"><a href="#drawer-drafts" data-transition="none">Drafts</a></li>
                    <li data-icon="sent"><a href="#drawer-sent" data-transition="none">Sent Items</a></li>
                    <li data-icon="trash"><a href="#drawer-deleted" data-transition="none">Deleted Items</a></li>
                    <li data-icon="spam"><a href="#drawer-spam" data-transition="none">Spam</a></li>
                </ul>
            </li>
            <li>Tasks
                <ul>
                    <li>To Do</li>
                    <li>In Progress</li>
                    <li>Done</li>
                    <li>High Priority</li>
                    <li>Low Priority</li>
                </ul>
            </li>
            <li>Account
                <ul>
                    <li data-icon="settings">Settings</li>
                    <li data-icon="off">Log Out</li>
                </ul>
            </li>
        </ul>
    </div>
     
    <div data-role="layout" data-id="drawer-layout">
        <header data-role="header">
            <div data-role="navbar">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#/">Index</a>
            </div>
        </header>
        <footer data-role="footer">
            <div data-role="tabstrip">
                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
            </div>
        </footer>
    </div>
     
    <script>
        // reset global drawer instance, for demo purposes
        kendo.mobile.ui.Drawer.current = null;
    </script>
     
    <style>
        .km-ios #my-drawer .km-content, .km-android #my-drawer .km-content, .km-blackberry #my-drawer .km-content,
        .km-ios #my-drawer .km-list > li, .km-android #my-drawer .km-list > li, .km-blackberry #my-drawer .km-list > li,
        .km-ios #my-drawer .km-listview-link > .km-icon, .km-android #my-drawer .km-listview-link > .km-icon, .km-blackberry #my-drawer .km-listview-link > .km-icon,
        .km-ios #my-drawer .km-list li > .km-icon, .km-android #my-drawer .km-list li > .km-icon, .km-blackberry #my-drawer .km-list li > .km-icon
        {
            background-color: #4e4e4e;
            color: #fff;
        }
     
        .km-ios #my-drawer .km-group-title,
        .km-blackberry #my-drawer .km-group-title
        {
            background-color: #6e6e6e;
            color: #fff;
        }
     
        .km-drawer-button:before, .km-drawer-button:after  { content: "\E077"; }
        .km-inbox:before, .km-inbox:after { content: "\E0B0"; }
        .km-sent:before, .km-sent:after { content: "\E0C6"; }
        .km-trash:before, .km-trash:after { content: "\E0C3"; }
        .km-spam:before, .km-spam:after { content: "\E0C5"; }
        .km-star:before, .km-star:after { content: "\E0D7"; }
        .km-settings:before, .km-settings:after { content: "\E0DA"; }
        .km-off:before, .km-off:after { content: "\E0B9"; }
     
        .inboxList
        {
            font-size: .8em;
        }
     
        .inboxList p,
        .inboxList h2,
        .inboxList h3
        {
            margin: 5px 2px;
        }
     
        .inboxList p,
        .inboxList h3
        {
            color: #777;
        }
     
        .inboxList h3.time
        {
            color: #369;
            float: left;
            margin-right: 10px;
        }
    </style>
     
     
        <script>
            window.kendoMobileApplication = new kendo.mobile.Application(document.body);
        </script>
    </body>
    </html>

  2. Mike Graham
    Mike Graham avatar
    29 posts
    Member since:
    May 2010

    Posted 22 Mar 2014 in reply to Mike Graham Link to this post

    I ended up moving the button that shows the drawer to the navbar in the header.  It works.  Its not too bad on phones in the vertical orientation, but on a phone in the horizontal, you lose a lot of the vertical when you have both navbar and tabstrip.  Tablets have tons of room, so both are fine for that use case.

    It'll work for me for now.
  3. Kendo UI is VS 2017 Ready
  4. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 24 Mar 2014 Link to this post

    Hello Mike,

    If you have just one item in the TabStrip, you can achieve this functionality, by attaching a click handler for the icon that you want to use for opening the Drawer, and open the drawer programmatically. Please check the following example, and let me know if it helps:

    http://trykendoui.telerik.com/OFIP

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Mike Graham
    Mike Graham avatar
    29 posts
    Member since:
    May 2010

    Posted 24 Mar 2014 in reply to Kiril Nikolov Link to this post

    Hi Kiril,

    Thanks for the reply and suggestion.  In my case, i have four tabs.  

    I'm finding the tabstrip metaphor isn't great for what I'm trying to do.  I think Buttons would be better.  After the user navigates to a view from the tabstrip, they may then navigate to another view which isn't in the tabstrip.  the focus on the tabstrip then goes to the 1st tab, which conveys a false idea to the user that the 1st tab's view is being displayed.

    When I use buttons, though, the formatting is too large and the buttons have an outline.  I'm sure its just a matter of working through the formatting issues.  I'm just learning the ins and outs of Kendo.  It is a great product.

    Thanks,
    -Mike Graham
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 25 Mar 2014 Link to this post

    Hi Mike,

    I am happy to hear that you liked the product so far. 

    In general using TabStrip buttons for navigation is against the standard UI Design principles, so I would also advise you against this implementation. 

    If you have troubles, styling the buttons, please do not hesitate to contact us (as runnable sample would help a lot in this case).

    Regards,
    Kiril Nikolov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready