1. CONFIDENTIAL
KendoUI and Knockout.js
Dhananjay Kumar
@debug_mode

2. CONFIDENTIAL
Agenda
 Getting started with MVVM
 Setting up Visual Studio for Kendo + KO development

 Create a basic app using jQuery : Demo
 Convert app to MVVM using KO : Demo
 Introduction to KO
 Demo on different KO bindings
 Kendo UI : what is new
 MVVM in Kendo UI : Demo
 Kendo UI + KO : Demo : Grid and Autocomplete widgets

3. CONFIDENTIAL
Presenter
 Dhananjay Kumar
–Developer Advocate, Telerik
–Microsoft MVP
–Mentor C-SharpCorner.com
–@debug_mode
–http://debugmode.net
–http://telerikhelper.net
–Dhananjay.kumar@telerik.com
–Lohith.Nagaraj@telerik.com

4. Knockout.js is JavaScript MVVM framework

5. Why KO ?
 It detects the data changes in data model and updates respective
part of the UI.
 It binds data and UI declaratively. In other words declarative
binding between data model and UI can be done using
Knockout.js
 It helps to create custom behaviour. Custom behaviour can be
created as declarative binding.
 Custom behaviour created by Knockout.js can be reused with very
less lines of code.
 It helps to create complex dynamic UI using declarative bindings.
 It helps to edit JSON data on the JavaScript UI.

6. MVVM

7. MVVM
 Persisted data
 Data being fetched from server
 Data can be in HTML local storage
 Data can be fetched from server using
AJAX call or any other mechanism of
calling service from JavaScript
Model
 It contains business logic
 Temporary data to be displayed
on the View
 It handles all the user actions to
send commands to ViewModel
 It is a JavaScript object
ViewModel
 This is User Interface of the application
 This displays data from the ViewModel.
 This sends command to ViewModel
 User interaction occurs here
 This is HTML with CSS
View

8. Kendo UI
Kendo Framework Elements
Kendo UI
Web
Kendo UI
DataViz
Kendo UI
Mobile
Comprehensive HTML5,JavaScript framework for modern web and mobile app
development

10. Demo
Let us write some
codes

11. Thanks 
Q/A