Questions on Kendo UI for jQuery Forum

7 answers

92 views

Is there a way to show and hide the drawer very quickly ?

Hello,

I am beta testing my app and they told me that they didn't realize there was a menu.

So i would like to partially open it and the hide it very quickly so that the notice their positions.

Is there a way to do it with the drawers methods ?

Many Thanks

Drawer (Mobile)

answered on 07 May 2014

3 answers

160 views

Can I use Drawer with only a PanelBar to drive it (no draws)

I'm just wondering with I'm on the right track with using the mobile Drawer.

I don't need what all the examples use - individual "draw" items in a "listview".
I have a PanelBar - already working from the non-mobile part of the site.

This is what I want:
I want the PanelBar to show.
Then, when an item in the PanelBar is clicked, to navigate to a full-page view of the URL that the PanelBar's datasource has for that item.
Then be able to slide back to the PanelBar - to repeat this process.

In the non-mobile site, I have a Splitter with the PanelBar on the left and URL showing area, on the right.
And I set the iframe src in the right-panel to the URL of the clicked PanelBar's datasource. And it works fine.

I was hoping (see below) I could do a similar thing, and somehow tell the "Drawer" to navigate to the iframe (or div) I've just filled with the clicked PanelBar item's URL.
Is this feasible within the way Drawer works, or is this so far from the way it's meant to work that I'd be better of hacking a "Draw" of my own?

<body>
<div id="app-drawer" data-role="view" data-layout="drawer-layout" data-title="@Model.name">
<div id="header" data-role="header">
<div id="app-icon"><img src="@Model.image" width="32" height="32" /></div>
<div id="header-text">@Model.name</div>
</div>
<div id="app-user-panel">

</div>
<div id="view-container" data-role="view">
<iframe id="view-frame"></iframe>
</div>
</div>

<script>
$(document).ready(function() {
var model = @Html.Raw(Model.ToJson());
var panel = new MyWorkingAppPanel('app-user-panel');
panel.init(model);

I toyed with this concept but couldn't work out what was required to get it working
// var drawer = $("#app-drawer").kendoMobileDrawer({
// container: "#view-container"
// });
//
// $("#app-drawer").data("kendoMobileDrawer").show();
// $(".k-link").click(function() {
// $("#app-user-panel").hide();
// $("#view-container").show();
// });

var app = new kendo.mobile.Application(document.body, {
skin: "flat",
hideAddressBar: true,
});
</script>
</body>

Drawer (Mobile)

answered on 18 Apr 2014

6 answers

253 views

Using Drawer with treeview in mobile app

Hi,

I am new to mobile development, in my company we are trying kendo ui complete for mobile app development. So far I was able to develop some screens without any issues for the app. However, now I am running into problems with a specific view or screen.

In our app a user logins in a picks a task on the second screen then he is sent to a screen that contains 2 drawers (left and right). The left drawer contains a treeview that is bound to a view model and the right drawer has some text. So, the problem is I get uncaught type error: cannot call method 'tolowercase' on undefined inside kendo.all.min.js

My code looks something like this, this is a screen that is called from my second screen when a user picks a particular task:

<div data-role="view" id="two-drawer-home" data-title="Default Report">

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right"></a>

</div>

</header>

<a class="left-btn" data-role="button" data-rel="drawer" href="#left-drawer" data-icon="nav"></a>

<div data-role="content">

Main Content Goes Here

</div>

<div data-model="app.Menus" data-init="app.Menus.init" data-role="drawer" id="left-drawer" style="width: 270px" data-title="Select a Report" data-views="['two-drawer-home']">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<div id="zones" class="k-content">

<div class="configuration-horizontal">

<div class="config-section">

<div data-role="treeview"

data-drag-and-drop="false"

data-text-field="Name"

data-bind="visible: isVisible,

source: zones,

events: { select: onSelect }"></div>

</div>

<div data-role="drawer" id="right-drawer" style="width: 80px" data-title="Share" data-position="right" data-views="['two-drawer-home', '/kendo-ui/mobile/m/drawer/two-way-drawers.html']">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

Filters will appear here

</div>

I have not attached the styles.

Is this because I have not initialized the treeview as kendotreeview in my view model? If that is the case, can i do that in my init function?

Thanks for the help !!

Drawer (Mobile)

answered on 17 Apr 2014

2 answers

249 views

The init event must be called "onInit" or it won't work. Intentional?

I declared my Drawer like this
<div id="app-drawer" data-role="drawer" data-init="drawerInit">

With a function in script tags like:
function drawerInit(e) {...}

As per the documentation: http://docs.telerik.com/kendo-ui/api/mobile/drawer

But it doesn't fire...
I renamed my function "drawerInit" to "onInit" and it now works!

Why wouldn't it just call the function specified in the data-init attribute?
Is this a bug or intentional?

Drawer (Mobile)

answered on 17 Apr 2014

1 answer

61 views

How to use the Drawer to display 3 views in parallel ?

Hello there,

I'm trying to refactor the UX of my App.

I want to remove the footer (with 2 buttons) and instead let the user swipe right or left to display not a menu but an entire page, like if there was 3 completely different pages on the app that the user can access by simply swiping left or right.

As my two pages wrapped into the drawer contain a simple list, it should work fine (I think) but my problem is that I can't swipe back to the main page when I put the drawer with a width of 100% since the menu button will be outside the current view and there is no way to go back to the main page.

How can I fix this ? or is there a better way to do it ?

Many Thanks

Attached is a screen shot of what happen when I put the drawer with to 100%. I can't go back to the main page.

Drawer (Mobile)

answered on 10 Apr 2014

8 answers

524 views

Back Button and Drawer not working properly

Hello,

I'm having this piece of code to manage the UI:

In my template I have:

<div data-role="layout" data-id="overview-layout" data-platform="ios" data-model="viewModel">

<header data-role="header">

<div data-role="navbar">

<a data-role="backbutton" id="back-button" class="nav-button" data-align="left">Back</a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>

</div>

</header>

and then the footer and closing tab.

And in my home page I have this one, rewriting the header:

<div data-role="view" data-layout="overview-layout" data-init="initiate_geolocation()" data-title="Meet My Friends" id="two-drawer-home">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" data-rel="drawer" href="#left-drawer" data-icon="drawer-button" data-align="left"></a>

<span data-role="view-title"></span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>

</div>

</header>

The reason why I'm doing this is I need 2 menus on the home page, but I want to remove one of the left drawer on any other page and display the back button again.
So basically it "almost" works... almost

I'm having 2 difficulties to make it works.

1 - When going to another page From a link from the left or the right drawer, if I want to go back to the previous page by pressing the back button I come back to to the page at the position it was when the drawer is open (totally on the left or the right of the screen to let the drawer be displayed). But the drawer is not display so I just have some blank space left on the side of the screen. Why is the page not re initialized at the correct position ( center of the screen ). It seems like the page is not re initialized at its correct position or that I'm redirected to the drawer page that does not open/display.

2 - When I'm on a different page than the home page, the right drawer does not work at all .. only the back button works. Why ?

Many Thanks

Below is the code of the 2 menus:

<div data-role="drawer" id="left-drawer" style="width: 100px" data-title="What's Up" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul id="left-drawer-menu">

<li id="LM-available" ><div class="number">0</div>Available Friends</li>

<li id="LM-notified" ><div class="number">0</div>Notified Events</li>

<li id="LM-matched" ><div class="number">0</div>Matches</li>

<li id="LM-invites" ><div class="number">0</div>Invites</li>

</ul>

</div>

<div data-role="drawer" id="right-drawer" style="width: 200px" data-title="Menu" data-position="right" data-views="['two-drawer-home', '/mobile/m/drawer/two-way-drawers.html']" data-before-show="prevent" data-init="checkAvailability">

<header data-role="header">

<div data-role="navbar">

<span data-role="view-title"></span>

</div>

</header>

<ul data-role="listview" id="leftMenuList">

<li data-icon="settings"><a href="#profile">Profil</a></li>

<li data-icon="settings"><a href="#interests">Centers Of Interests</a></li>

<li data-icon="add">Create Event</li>

<li data-icon="add">Search Friends?</li>

<li data-icon="comments">Let's Hang Out Today! <input id="switchAvailable" type="checkbox" data-role="switch" data-change="switchAvailability"></li>

<li data-icon="graph"><a href="#" id="logout">Log Out</a></li>

<hr />

</ul>

</div>

Drawer (Mobile)

answered on 07 Apr 2014

1 answer

105 views

Right-side drawer displaying content in drawer instead of parent

Hello,

I'm using a kendo mobile drawer on both sides of our Phonegap mobile app. I recently updated to 2014.1.321 and also 2014.1.328 . I'm now seeing an issue with the right drawer. When I open any UI view from the right drawer, it should open the view in middle screen. This worked fine before the latest internal builds. What I'm seeing now is it opens the view in the right drawer.

Is this a bug, or has the api maybe changed?

Nick

Drawer (Mobile)

answered on 03 Apr 2014

1 answer

178 views

Drawer with dynamic views

Im using the drawer to display a dynamic number of remote views. A PHP page is used to display the views:

data-views="['drawer-home', 'drawer-settings', 'item.php?id=1', 'item.php?id=2', 'item.php?id=3' ]

Loading the first view with Item 1 works fine, but then when switching to Item 2 the framework seems to think that it is the same page and displays the Item 1 view again.

How can I fix this?

And a second question, is it possible to force and update of a remote view? (Reload)

Drawer (Mobile)

answered on 27 Mar 2014

1 answer

77 views

Bug in drawer's animation

This is something easier to show than to explain. Take a look at the video https://www.youtube.com/watch?v=ukW-2cUrGJM

I mean to say "display:none" css in the video :)

The gist: quick swiping creates a new transition before the current one completes, so onEnd event fires and hides the drawer in its open state.
It is quite possible that quickly clicking the drawer button gives the same effect, but it is much hard to get since the button is moving during the transition.

this.transition = new Transition({

axis: AXIS,

movable: this.movable,

onEnd: function() {

that._transitioning = false;

if (movable[AXIS] === 0) {

element[0].style.cssText = "";

that.element.hide();

}

});

Drawer (Mobile)

answered on 19 Mar 2014

1 answer

62 views

Adding generated HTML to DOM to create Drawer

I am trying to create a dynamic drawer widget on initialization of a view, since there is not programmatic way to create a drawer widget I build the drawer HTML like so:

<div data-role="drawer" id="my-drawer" style="width: 270px"

<ul id="nav" data-role="listview" data-type="group"

<li

>Navigation

<ul

<li data-icon=home><a href=views/index.html data-transition="none">Menu A</a></li> </ul

<ul

<li data-icon=search><a href=views/weather.html data-transition="none">Menu B</a></li> </ul

<ul

<li data-icon=compose><a href=views/location.html data-transition="none">Menu C</a></li> </ul

</li

<li

>Account

<ul

<li data-icon="settings">Settings</li

<li data-icon="off">Log Out</li

</ul

</li

</ul

</div>

I then append this generated HTML to the DOM but it is not "kendorized" so it doesn't act as the drawer widget would. When I click to open the drawer I get the following error message: Uncaught TypeError: Cannot call method 'openFor' of undefined

I need help getting this to work properly. Thanks

Drawer (Mobile)