Delivering solid user friendly software solutions since the dawn of time.

KendoUI Mobile

Categories: Mobile
  • Automatic platform specific styling of form elements
  • Supported inputs: text, password, search, url, email, number, tel, file, date, time, month
  • Transitions: slide, zoom, fade, overlay (direction, reversible) at application or element level
var app = new kendo.mobile.Application($(document.body), {
initial: "startView",
layout: "myLayout",
loading: "I think I can. Can be disabled",
platform: "blackberry",
transition: "slide"
Mobile Layout
<div data-role="layout" data-id="myLayout">
<div data-role="header">HEADER</div>
<div data-role="view" data-title="Home" data-layout="myLayout">
<!-- View Content -->
<a href="#page2" data-role="button">Next Page</a>
<a href="https://ken.be" data-rel="external">Visit ken.be</a>
<div data-role="view" id="search" data-transition="slide"></div>
<a href="#search" data-role="button" data-transition="fade">Search</a>
<div id="mainView" data-role="view" data-title"main view">
<input type="number" />
<a href="#otherview" data-role="button">go there</a>
<div id="otherview" date-role="view" data-title="other view"></div>
<div data-role="layout" data-id="mainLayout">
<div data-role="navbar">
<span date-role="view-title"></span>
<div data-role="view">
<a href="remoteView.html">only content of first view is rendered</a>
<!--remote view -->
<div data-role="view" data-init="initRemoteView"><a id="link">linky</a></div>
<!--consuming view script -->
function initRemoteView(e) { e.view.element.find("#link").kendoMobileButton(); }
<div data-role="splitview">
<div data-role="pane" data-layout="leftPaneLayout">define view and layout divs</div>
<div data-role="pane" data-layout="mainPaneLayout">define view and layout divs</div>
data-source, data-template, data-show
data-role : footer, tabstrip, navbar