This is a migrated thread and some comments may be shown as answers.

TabStrip --> Drawer stops working in 2014 Q1

4 Answers 206 Views

TabStrip (Mobile)

This is a migrated thread and some comments may be shown as answers.

Mike Graham asked on 22 Mar 2014, 03:11 PM

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

4 Answers, 1 is accepted

answered on 24 Mar 2014, 12:04 PM

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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

TabStrip --> Drawer stops working in 2014 Q1

4 Answers, 1 is accepted