MVVM & Validation with Kendo UI


Published on

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

MVVM & Validation with Kendo UI

  1. 1. Kendo UITHE WAY OF HTML5
  2. 2. IntroductionsLohith G NDev Evangelist,
  3. 3. MVVMWhat is it ?
  4. 4. Why MVVM ?• Device & OS Proliferation– Desktops, Laptops, Tablets, Phones, Netbooksetc.• Only delivery on all platforms – Web App– Complex on client side, Need to model dataon client as well as server• Need to keep up with changes in Server, UIand State of App
  5. 5. MVVM• Design Patterns• Acronym– M = Model– V = View– VM = ViewModel• Separate Model (Data) from the View (UI)• View-Model responsible for exposing dataobjects• Many frameworks available in the market
  6. 6. Where Are We Today?A Quick Look At The Problem WithClient-Side Development Today
  7. 7. The Problem• Multiple Small-Scoped Libraries• Non-Unified Frameworks• Unpredictable Road Maps• Unsupported Code
  8. 8. Kendo UI to the Rescue!How It Makes Your JavaScriptDevelopment A Piece Of Cake
  9. 9. In a Nutshell• JavaScript Library• Based on jQuery• HTML5• CSS3• UI Framework Solution– Desktop– Mobile
  10. 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. 11. Kendo UI PackagesWeb• UI Widgets• Framework• Browsers• Desktop• MobileDataViz• Visualizations• Charts• GaugesMobile• Hybrid Apps• HTML & CSS• Native UIKendo UI CompleteKendo UI Complete Wrappers
  12. 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. 13. MVVM IN KENDO UI
  14. 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. 15. ObservableObject•• Supports change tracking & notifiessubscribers• Inherits Observable• var vm =,field1:””-)• Var vm = newkendo.observable(,field1:””-)
  16. 16. ObservableObject• Fields– uid• Methods– bind– get– parent– set– toJSON• Events– change– set– get
  17. 17. ObservableArray• Wraps existing Array with change trackingcapabilities• var arr =[{name:”L”-+)• var arr =*“Loh”,”Adi”+)• Provides all Array constructs
  18. 18. DEMOLets see some action!
  19. 19. Validation in Kendo UILets check some data
  20. 20. HTML5 Form Validation• Validation Attributes - Anticipated featureof HTML5• Set constraints on HTML inputs• Required, Pattern, Min/Max, HTML5 DataTypes• Browser will validate inputs to constraintsbefore form submission• Input fails constraints, browser displaysmessage
  21. 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. 22. Kendo UI Validator• Augments HTML’s form validation with JS• Works with standard HTML5 form attibs• Automatically makes these work in allbrowsers (IE7+)• Gives you more customizability• Usage– var validator = $(“#form”).kendoValidator();– var isValid = validator.validate();
  23. 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. 24. DEMOLets see some action!
  25. 25. Thanks!Q & A