2. Scope.
Kendo UI Framework.
First Kendo Mobile Application
Kendo Mobile Widgets
DataSource.
Templates
MVVM
3. Kendo UI Framework.
The Kendo UI Framework can be grouped into 2 broad areas:
Kendo UI Widgets
It includes all UI elements that we "see" once the application is developed
such as the buttons, drop-down list, and tree view.
Kendo UI widgets can be classified into three groups:
• Kendo UI Web
• Kendo UI DataViz:
• Kendo UI Mobile:
Complete list of kendo UI Widgets
4. Kendo UI Framework - 2.
Kendo UI Framework elements
The Framework elements are the invisible entities which helps in
integrating the data with the widgets.
DataSource
Templates
MVVM
5. First Kendo Mobile Application
Requirements
• HTML Editor or IDE (Visual Studio, Dreamweaver or Notepad)
• Kendo UI Bundle (javascript , stylesheets and images)
• Jquery(the version of jQuery supported by the version of Kendo UI Bundle you
are using.)
• Mobile Phone Emulator or Mobile Phone for testing.
6. Kendo Mobile Widgets
Views
A view widget represents a page in a Kendo UI Mobile application. All
widgets and other HTML elements are added inside a view. Any Kendo UI
Mobile app will have one or more views.
<div data-role=“view” id=“login-view” >
Layout
A layout is nothing but a master template into which a view will be
rendered.
<div data-role="layout" data-id="main-layout">
7. Kendo Mobile Widgets 2
Navigation Bar
a container widget where we can add a title and/or other widgets E.g
Menu items
<div data-role="navbar">
Application Object
var application = new kendo.mobile.Application();
8. DataSource
The DataSource plays a central role in the applications and sites built with
Kendo UI. it provides commands to process local or remote data. retrieving
data from a remote endpoint. It helps maintain the structure and type of the
data it represents.
var dataSource = new kendo.data.DataSource({
data: [
{ id:1 , title: "Introduction To Kendo", category: 3 },
{ id: 2 , title: "MVC Jumpstart", category: 2 },
{ id: 5 , title: "Design Patterns", category: 2 }
],
categories:[
{ id:1 , name: "Design"},
{ id:2 , name: "Web"},
{ id:3 , name: "Mobile"}
]
});
9. Templates
Templates are a simple and convenient way to build complex UI structures,
typically with repeated blocks like the LIstView Widget.
1. #= lastName #: This renders the value stored in the variable lastName.
2. #: address #: This renders the value with its HTML encoding.
3. #for(... ){# ... #}#: This executes JavaScript code in the template so that rendering
happens depending on certain conditions, such as loops.
#for(i=0;i<3; i++){#value of i: #=i# <br/> #}#
10. Templates – External Templates
External templates are defined in HTML files within <script> blocks with
type text/x-kendo-template as shown:
<script id="kendoExternalTemplate" type="text/x-kendo-template" >
#for(i=0;i<3; i++){
#value of i: #=i# <br/>
#}#
</script>
11. MVVM
The process of using with Kendo MVVM is very simple. Here is what we
have to do:
• Create an observable ViewModel from JavaScript data using
kendo.observable()
• Bind the methods and properties in the ViewModel to HTML elements in
the UI using kendo.bind()
