Telerik Forums
Kendo UI for jQuery Forum
5 answers
1.2K+ views

Hi

 

To speed up a grid with a lot of dropdownlists, I want to only write the text to the cells initially and, on click, load the dropdownlist of this cell, replace the text with it, so the user can use the dropdownlist from now on.

I'm replacing the text-cell-template with the dropdownlist-cell-template, but the dropdownlist does not get bound automatically.

What's the best way, to initialize the new dropdownlist-cell-template only, without rerendering/rebinding everything else?

 

Example: http://dojo.telerik.com/uZOBALUp/2

 

Greets Robin

Tsvetomir
Telerik team
 answered on 28 Oct 2019
1 answer
241 views

Hello 

I'm pretty new to KendoUI Mobile. I would like to create a hybrid mobile app. So far I'm doing good just struggle with something simple:

I would like to show initially a login/register screen (view login) without any pre-defined Tabstrip. After successful login the app should switch to show a Tabstrip connected with 3 other views (start, map, settings).

What is the "official" way to not show the Tabstrip on login view or how to I tell the Tabstrip to be only present on not visible login view?

Below a fully working example of how far I came. Setting the "initial" value to "login" would show the login view WITH the (unwanted) Tabstrip.

view login: represents the view that should NOT show the Tabstrip
-> after successful login switch to show Tabstrip with initiall shown view "start"

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
 
 
 
</head>
 
<script>
    $(document).ready(function() {
 
        // var app = new kendo.mobile.Application();
        var app = new kendo.mobile.Application($(document.body), {
            skin: 'flat',
            transition:'slide',
            initial: "start" // Set to "login" will show the Tabstrip as well
        });
 
    });
</script>
 
 
<body>
 
<!-- View login -->
<div id="login" data-role="view" data-layout="default">Register here</div>
 
 
<!-- View start -->
<div id="start" data-role="view" data-layout="default">
    <span>hello start!</span>
</div>
 
<!-- View map -->
<div id="map" data-role="view" data-layout="default">Hello map!</div>
 
<!-- View settings -->
<div id="settings" data-role="view" data-layout="default">Hello settings!</div>
 
// Tabstrip should now be visible on view "login"
<section data-role="layout" data-id="default">
    <header data-role="header">
        <div data-role="navbar">My App</div>
    </header>
 
    <!--View content will render here-->
    <footer data-role="footer">
 
        <div data-role="tabstrip">
            <a href="#start">Start</a>
            <a data-icon="globe" href="#map">Map</a>
            <a data-icon="settings" href="#settings">Settings</a>
        </div>
 
    </footer>
</section>
 
 
</body>
</html>

 

Probably a simple question and I just need to know the official way how to solve this. 

Regards

 

 

Tayger
Top achievements
Rank 1
Iron
 answered on 12 Jun 2018
1 answer
60 views

HI,

I'm missing the changeLoadingMessage method in the definition file:

 

 class Application extends Observable {
        options: ApplicationOptions;
        router: kendo.Router;
        pane: kendo.mobile.ui.Pane;
        constructor(element?: any, options?: ApplicationOptions);
        init(element?: any, options?: ApplicationOptions): void;
        hideLoading(): void;
        navigate(url: string, transition?: string): void;
        replace(url: string, transition?: string): void;
        scroller(): kendo.mobile.ui.Scroller;
        showLoading(): void;
        view(): kendo.mobile.ui.View;
    }

 

Kind regards,

 

Marco

 

Veselin Tsvetanov
Telerik team
 answered on 19 Oct 2017
2 answers
99 views

Hello,

     I just noticed with Kendo UI 2017.3.913 that app.showLoading(); now hides on its own.  Is this correct, and what is the default timeout?

Thank you.

John
Top achievements
Rank 1
 answered on 22 Sep 2017
1 answer
49 views

I am using the following code to hide the splash screen.

In my plugins , I have the cordova splash screen plugin enabled.

I am testing on an android device , it does not hide the splash screen.

//declare the application variable globally
var app;
 
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
             
// PhoneGap is ready
function onDeviceReady() {
            app = new kendo.mobile.Application(document.body, { platform: 'ios7' });
            navigator.splashscreen.hide();
 }
Ventsislav Georgiev
Telerik team
 answered on 10 Aug 2017
2 answers
57 views

I'm switching views using app.navigate and when I do, the header in the new view has height of 0.

http://dojo.telerik.com/@calebsandfort/AdaQO

Caleb Sandfort
Top achievements
Rank 1
 answered on 14 Jul 2017
3 answers
408 views

Hello Telerik,

 

I have a problem with the kendo.saveAs() because the server, where the binary files come from, requires an 'Authorization' in the request headers.

I have been looking for an answer but all I found was that the question was asked before, by somebody else, on StackOverflow: http://stackoverflow.com/questions/41406918/kendo-server-export-post-request-headers

But no useful answer was given so i pop the question here because I do need an answer for this :(

 

Best regards,

 

Insad

Boyan Dimitrov
Telerik team
 answered on 10 Feb 2017
1 answer
204 views

Here's the situation I am currently facing.  I am working with a cloud web application that allows me to provide a javascript file that, using jQuery, allows me to do customize the UI.  However, the application does not allow me to directly add any javascript / css to the head of each page.  What I am trying to do is use jQuery to add the Kendo UI library and css, so that I can then use Kendo to do some custom UI in the web application.

So in my javascript file, I have the following lines at the very top, so that Kendo is loaded as soon as possible:

$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css'));
$('head').append($('<link rel="stylesheet" type="text/css" />').attr('href', 'https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css'));
$.getScript('https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js');

If I look at the sources for the page, after the script runs, the Kendo UI components do appear.  However, when I then try to use a component, for instance the Kendo Menu (by calling $('#menu').kendoMenu();), I get "Uncaught TypeError: $(..).kendoMenu is not a function".  Any ideas on what I'm missing, or how I can fix this problem?

Thanks,

Mike

Veselin Tsvetanov
Telerik team
 answered on 09 Feb 2017
1 answer
145 views

I'm using the Northwind·Dash demo to create my dashboard.

The problem is when I uses the navbar code in my html and link the Site.css

<div class="container-fluid">
            <!--open container-->
            <div class="row row-offcanvas row-offcanvas-left">
                <!--open row-->
                <div id="nav-section" class="col-xs-12 column">
                    <!--open nav column-->
                    <div class="navbar-default">
                        <button id="toggle-button" type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <h1 id="dash-logo" class="center-block">Northwind&#183;Dash</h1>
                    <div class="collapse navbar-collapse" id="sidebar-nav" role="navigation">
                        <ul class="nav">
                            <li id="regional-sales-status">
                                <a href="index.html">
                                    <span class="icon icon-chart-column"></span>Regional Sales Status</a>
                            </li>
                            <li id="products-and-orders">
                                <a href="products-orders.html">
                                    <span class="icon icon-star-empty"></span>Products & Orders</a>
                            </li>
                            <li id="team-efficiency">
                                <a href="team-efficiency.html">
                                    <span class="icon icon-faves"></span>Team Efficiency</a>
                            </li>
                            <li id="about">
                                <a href="about.html">
                                    <span class="icon icon-info"></span>About</a>
                            </li>
                        </ul>
                        <div id="rights">
                            <p>Copyright © 2016, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
                        </div>
                    </div>
                <!--close main column-->
            </div>
            <!--close row-->
        </div>
        <!--close container-->

The navbar will not be full height in my page.

And if I add a new li tag in navbar, there will be a new transparent bar.

What's wrong with this problem?

 

Kiril Nikolov
Telerik team
 answered on 16 Sep 2016
8 answers
198 views

I am starting a new project using the Kendo Mobile controls (release 2016 Q1 SP2), and I am using TypeScript.  When I attempt to instantiate my kendo.mobile.application, I am getting errors from TypeScript and the issue appears to be that the type definition file does not contain the correct definition.

Here is my simple TypeScript code:

var app = new kendo.mobile.Application(document.body,
    {
        transition: 'slide',
        skin: 'nova',
        init: function () {
            //don't do this for android, causes issues with scrollView and swiping
            kendo.UserEvents.defaultThreshold(kendo.support.mobileOS.device === 'android' ? 0 : 20);
    }
});

This code works fine when I run it in JavaScript, but after trying it in TypeScript and I getting compiler errors - it's complaining about the "skin" and "init" options.  The errors are shown in the attached images (skin.png and init.png).  The skin configuration option is shown in the Kendo docs (http://docs.telerik.com/kendo-ui/api/javascript/mobile/application#configuration-skin), so is it just a matter of the type definition file being incorrect?  Or is there something else I need to do?

Also, looking over the type definition file, it appears that the ApplicationOptions parameter used when initializing the application object is missing quite a few items that are listed in the Kendo documentation (http://docs.telerik.com/kendo-ui/api/javascript/mobile/application) - things like browserHistory, hashBang, modelScope, useNativeScrolling, etc. So this seems like more than just a minor oversight, which leads me to my other question...is TypeScript fully supported for Kendo Mobile?  Just want to make sure I'm going down the "sanctioned" path before I get too far into my project.

Petyo
Telerik team
 answered on 15 Sep 2016
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?