asp.net mvc - better user experience with kendo ui

THE WAY OF HTML5

Lohith G N– Developer Evangelist – Telerik, – Lohith.nagaraj@telerik.com – Bangalore Dot Net (BDotNet) User Group Lead, – Microsoft MVP, – @kashyapa, – http://kashyapas.com,

Who am I ?

www.telerikhelper.net

Agenda

ASP.NET MVC

Introduction to Kendo UI

Building Apps with Kendo UI

facebook.com/telerik

@telerik

- Primer

ASP.NET MVC

- Powerful, Pattern Based way to build dynamic websites

- Enables clean separation of concerns

- Full control over markup

- TDD friendly development

What is ASP.NET MVC

/Home/IndexControl

ler

Model View

facebook.com/telerik

@telerik

- Introduction

Kendo UI

Everything you need to build HTML5 + JavaScript sites & APPS

What is Kendo UI ?

“Kendo UI solves an important problem faced by JavaScript and HTML5 developers. It delivers a unified framework backed by professional support. It's easier to learn, easier to upgrade, ultimately making it easier to build apps with HTML5.”

-Todd Anglin, VP – HTML5 Web & Mobile Tools, Telerik

Kendo UI Blocks

Kendo Framework Elements

Kendo UI Web Kendo UI DataViz Kendo UI Mobile

ASP.NET MVC Wrappers

Kendo Building Blocks a.k.a F/W

DataSource

Validation

Globalization

Templating MVVM Drag &

Drop

- UI Widgets- MVVM Framework- Datasource- Templates- Themes

Everything you need in one place,Not hundreds of plug-ins

- Full support for Touchscreen- D & D also Touch Enabled

Ready for Touch

- Every aspect built from ground up

- Not another Jquery UI Clone

- Lightweight, templating library faster than jquery templates

- Optimized animations

Fast JavaScript for performance

- IE7+- FF ESR- Chrome- Safari 4+- Opera 10+

Great UX across devices and browsers

- Inbuilt MVVM framework

- Declarative binding, two-way sync

- Can be used with other lib like Backbone.js

Manage rich views andmodels the MVVM way

Customize themesto match the look & feelof your site and app- ThemeBuilder tool

to customize

Customize themes

Kendo UI WidgetsAutoComple

teCalendar ComboBox DatePicker

DateTimePicker

DropDownList

Editor Grid

ListView MenuNumericText

BoxPanelBar

Slider Splitter TabStrip TimePicker

TreeView Upload Window

1. Download Kendo UI2. Configure page to use

Kendo UI Scripts & Styles, Define basic HTML

3. Initialize with JavaScript4. Use rich API to configure

behavior, handle events1. Attribute Based2. JavaScript Based

Using Kendo UI

facebook.com/telerik

@telerik

DEMO

facebook.com/telerik

@telerik

Kendo UI Wrappers for ASP.NET MVC

Power of JavaScript, Productivity of Server

Simply program on the server and the Kendo UI wrappers will handle the HTML and JavaScript

Simple server-side data binding and CRUD

server-wrappers help configure JavaScript data sources to work directly with your data, even for CRUD operations.

Complete Server & Client-side APIs

Complete control via complete server-side APIs. Server wrappers output Kendo UI JavaScript. You have full access to the Kendo UI client-side API for maximum control in the browser

• Supports ASP.NET MVC 3+

• Use with any ViewEngine (Razor, ASPX)

• Automate AJAX data binding

• Visual Studio helpers for faster configuration

Q32012

Demo

facebook.com/telerik

@telerik

Q & A

Kendo UI Mobile Home Page http://www.kendoui.com/mobile.aspx

Kendo UI Mobile Demos http://demos.kendoui.com/mobile/overview/index.html

Kendo UI Mobile Documentation http://docs.kendoui.com/api/mobile

Kendo UI Dojo http://www.kendoui.com/dojo.aspx

Resources