Questions on Kendo UI for jQuery Forum

7 answers

363 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 07 Jan 2025

1 answer

103 views

Guidance Needed: Upgrading Mobile Web Application Without kendo.mobile.all.min.css

Hello Kendo UI Community,

We are in the process of upgrading our mobile web application to the latest version of Kendo UI (2024.3.1015). During the upgrade, we noticed that the kendo.mobile.all.min.css file is no longer included in the newer versions. Our application heavily depends on this file for mobile-specific styling and functionality.

Could you please advise on the following:

What is the recommended replacement for kendo.mobile.all.min.css in the latest Kendo UI versions?
How can we ensure that our application retains the same mobile-friendly layout and features after the upgrade?
Are there any migration guides, examples, or resources for transitioning from Kendo UI Mobile to the current responsive framework?

Any insights or suggestions would be greatly appreciated, as this is critical for us to keep our application functional and up-to-date.

Thank you!

Best regards,
Arvind Kanswal

answered on 12 Dec 2024

1 answer

614 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue

Hierarchical Data Source

answered on 15 Jun 2022

1 answer

170 views

unable to generate pdf in iphone 11. we are using kendo pdf export saveAs method

We are not able to generate pdf in phone 11 safari browser. we are using kendo pdf export (save As method). we are not getting any error in console.

answered on 28 Feb 2022

1 answer

137 views

Drawer MVVM each item having own content

I am following this example:

https://demos.telerik.com/kendo-ui/drawer/mvvm

Currently, each drawer item has same content.

  <div style="height: 200px;">Lorem ipsum dolor sit amet consectetur adipisicing elit. Error accusantium odit, optio nulla maiores quo neque fugit debitis dignissimos incidunt maxime? Eum voluptatem blanditiis voluptatum praesentium dolorem, dolore placeat debitis quod delectus laborum assumenda cupiditate quaerat quam fugiat deleniti suscipit necessitatibus.</div>

How do I specify a different content for each tab?

Drawer

Drawer (Mobile)

answered on 13 Oct 2021

3 answers

128 views

Drawer sliding resets dynamic background image

We are trying to implement a feature where view backgrounds can be dynamic, once a user has logged in the background URLs for the various views will be loaded from the server. This gives us the ability to provide "fresh" and/or "seasonal" background images to the views. One problem that we keep running into is that when the drawer is opened and then closed, any explicitly set "background-image" property that's not defined via CSS gets wiped out. Is there any way around the behavior shown by opening and then closing the menu within this Dojo?

http://dojo.telerik.com/@artie.cs/uraNOJ

We are trying to avoid having to rework the view contents to add child elements to all of the views we already have in place, we just want to understand why the drawer behaves this way.

Drawer (Mobile)

answered on 25 Nov 2016

1 answer

267 views

How to keep app drawer always open when device is tablet (Mobile)

Like the title states, is it possible to force the app drawer to be always open when a device is a tablet?

Drawer (Mobile)

answered on 21 Jun 2016

1 answer

122 views

Vertically Align Drawer to Top in Nova Theme

How do I vertically align list items in drawer to top in Nova Theme?

I would like it to appear like this

----------

Item

item

space

---------

Not like this

----------

space

item

space

----------

Thanks

Drawer (Mobile)

answered on 07 Jun 2016

3 answers

152 views

Drawer not showing

Hi!

I have some troubles with drawer. I have the application with the login page. After the user is authenticated I navigate his on page "Cabinet" using

app.mobileApp.navigate('components/cabinet/view.html')

But when I open the drawer on the second page I see the previous login page.

The code of drawer:

<div data-role="content" class="corplight-drawer">

<header data-role="header" id="drawerHeader">

<div class="company-name" data-bind="text: company"></div>

<a class="change-company"

data-role="button"

data-rel="actionsheet" href="#clientsActionsheet"><span></span></a>

</header>

<ul id="navigation-container" data-role="listview" class="drawer-menu">

<li class="drawer-accounts"><a data-icon="corp-accounts" href="components/accounts/view.html">Рахунки</a></li>

<li class="drawer-loans"><a data-icon="corp-loans" href="components/loans/view.html">Кредити</a></li>

<li class="drawer-deposits"><a data-icon="corp-deposits" href="components/deposits/view.html">Депозити</a></li>

<li class="drawer-transfers"><a data-icon="corp-transfers" href="components/transfers/view.html">Новий платіж</a></li>

<li class="drawer-payments"><a data-icon="corp-payments" href="components/payments/view.html">Платежі</a></li>

<li class="drawer-templates"><a data-icon="corp-templates" href="components/templates/view.html">Шаблони</a></li>

<li class="drawer-products"><a data-icon="corp-products" href="components/products/view.html">Продукти</a></li>

<li class="drawer-users"><a data-icon="corp-users" href="components/users/view.html">Співробітники</a></li>

<li class="drawer-map"><a data-icon="corp-map" href="components/map/view.html">Відділення та банкомати</a></li>

<li class="drawer-exrate"><a data-icon="corp-exrate" href="components/exrate/view.html">Курси валют</a></li>

</ul>

</div>

What is the problem?

P/S/ please find the screenshot with problem in the attached file

Drawer (Mobile)

answered on 01 Jun 2016

1 answer

185 views

Drawer-Icon is missing

I am using the 2016 Q1 SP3 release of the Kendo mobile controls with the Nova theme, and the drawer icon is not showing up. Here is a snippet of my markup:

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

This can be reproduced using the sample code from the Kendo Mobile drawer demo - http://dojo.telerik.com/onUDi

Interestingly, if I go back to the 2015 Q3 SP1 release of the Kendo controls, it works. So it appears that something was changed with the Q1 2016 release.

http://dojo.telerik.com/Axiti

I found this in the Kendo css files - the icon is defined there but it doesn't render anything in the browser.

.km-drawer-icon:after,

.km-drawer-icon:before,

.km-hamburger:before,

.km-hamburger:after

{

content: "\e105";

}

Drawer (Mobile)