CONFIDENTIAL

KendoUI and Knockout.js

Dhananjay Kumar @debug_mode

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

CONFIDENTIAL

Presenter

Dhananjay Kumar– Developer Advocate, Telerik– Microsoft MVP – Mentor C-SharpCorner.com– @debug_mode – http://debugmode.net– http://telerikhelper.net – Dhananjay.kumar@telerik.co

m– Lohith.Nagaraj@telerik.com

Knockout.js is JavaScript MVVM framework 

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.

MVVM  

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

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

Demo

Let us write some codes

Thanks

Q/A