1. Kendo UITHE WAY OF HTML5

2. Introductions
Lohith G N
Dev Evangelist, Telerik
Lohith.nagaraj@telerik.com
@kashyapa
www.kashyapas.com
www.telerikhelper.net

3. MVVM
What is it ?

4. Why MVVM ?
• Device & OS Proliferation
– Desktops, Laptops, Tablets, Phones, Netbooks
etc.
• Only delivery on all platforms – Web App
– Complex on client side, Need to model data
on client as well as server
• Need to keep up with changes in Server, UI
and State of App

5. MVVM
• Design Patterns
• Acronym
– M = Model
– V = View
– VM = ViewModel
• Separate Model (Data) from the View (UI)
• View-Model responsible for exposing data
objects
• Many frameworks available in the market

6. Where Are We Today?
A Quick Look At The Problem With
Client-Side Development Today

7. The Problem
• Multiple Small-Scoped Libraries
• Non-Unified Frameworks
• Unpredictable Road Maps
• Unsupported Code

8. Kendo UI to the Rescue!
How It Makes Your JavaScript
Development A Piece Of Cake

9. In a Nutshell
• JavaScript Library
• Based on jQuery
• HTML5
• CSS3
• UI Framework Solution
– Desktop
– Mobile

10. Why Kendo UI?
• A Single Package
– UI Widgets
– Framework
– Modular
• Data Binding
– Data Source
– MVVM
• Data Visualization
• Native-Like & Hybrid Mobile Apps
• Latest Web Standards
• Aggressive Release Schedule

11. Kendo UI Packages
Web
• UI Widgets
• Framework
• Browsers
• Desktop
• Mobile
DataViz
• Visualizations
• Charts
• Gauges
Mobile
• Hybrid Apps
• HTML & CSS
• Native UI
Kendo UI Complete
Kendo UI Complete Wrappers

12. Kendo UI Web
• UI Widgets
– Grid, Menu, TabStrip, Editor etc.
• Client-Side Data Source
• MVVM
• Templates
• Drag & Drop
• Animations
• Built-In Touch Support

13. MVVM IN KENDO UI

14. MVVM in Kendo UI
• 3 core pieces
• ObservableObject
• ObservableArray
• Bindings are supported with UI elements
– Attr, Checked, Click, Disabled, Enabled, Events,
Html, Invisible, Source, Style, Text, Value,
Visible

15. ObservableObject
• kendo.data.ObservableObject
• Supports change tracking & notifies
subscribers
• Inherits Observable
• var vm = new
kendo.data.ObservableObject(,field1:””-)
• Var vm = new
kendo.observable(,field1:””-)

16. ObservableObject
• Fields
– uid
• Methods
– bind
– get
– parent
– set
– toJSON
• Events
– change
– set
– get

17. ObservableArray
• Wraps existing Array with change tracking
capabilities
• var arr = new
kendo.data.ObservableArray([{name:”L”-+)
• var arr = new
kendo.data.ObservableArray(*“Loh”,”Adi”+)
• Provides all Array constructs

18. DEMO
Lets see some action!

19. Validation in Kendo UI
Lets check some data

20. HTML5 Form Validation
• Validation Attributes - Anticipated feature
of HTML5
• Set constraints on HTML inputs
• Required, Pattern, Min/Max, HTML5 Data
Types
• Browser will validate inputs to constraints
before form submission
• Input fails constraints, browser displays
message

21. Problems
• HTML5 Form validation is great - But….
• Problems
– Old Browsers offer no support to HTML5
– Support in modern browsers incomplete
– Browser created validation error messages –
difficult to re style
• Solution
– Augment HTML5 form validation with JS

22. Kendo UI Validator
• Augments HTML’s form validation with JS
• Works with standard HTML5 form attibs
• Automatically makes these work in all
browsers (IE7+)
• Gives you more customizability
• Usage
– var validator = $(“#form”).kendoValidator();
– var isValid = validator.validate();

23. Customization
• Custom Rules
• Custom Validation Messages
$("#myform").kendoValidator({
rules: {
custom: function(input){
return input.val() === "Test";}
},
messages: {
custom: "Your name must be Test“
}
});

24. DEMO
Lets see some action!

25. Thanks!
Q & A