Telerik Forums
Kendo UI for jQuery Forum
7 answers
352 views
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>
 
    <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>
 
 
        </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 !!

Bhavika
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 07 Jan 2025
1 answer
92 views

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:

  1. What is the recommended replacement for kendo.mobile.all.min.css in the latest Kendo UI versions?
  2. How can we ensure that our application retains the same mobile-friendly layout and features after the upgrade?
  3. 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

1 answer
168 views
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.
Martin
Telerik team
 answered on 28 Feb 2022
1 answer
133 views

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?

Nikolay
Telerik team
 answered on 13 Oct 2021
3 answers
121 views

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. 

 

 

Iliana Dyankova
Telerik team
 answered on 25 Nov 2016
1 answer
264 views
Like the title states, is it possible to force the app drawer to be always open when a device is a tablet? 
Dimiter Topalov
Telerik team
 answered on 21 Jun 2016
1 answer
121 views

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

I would like it to appear like this

----------

Item

item

item

space

space

---------

 

Not like this

----------

space

item

item

item

space

----------

 

Thanks

Iliana Dyankova
Telerik team
 answered on 07 Jun 2016
3 answers
149 views
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>
        <!--<li class="drawer-exit"><a data-icon="corp-exit" onclick="app.appLogout();" >Вихід</a></li>-->
    </ul>
</div>


What is the problem?

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

 

Petyo
Telerik team
 answered on 01 Jun 2016
1 answer
178 views

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";
}

Iliana Dyankova
Telerik team
 answered on 15 Apr 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?