Webinar from Telerik India - ASP.NET MVC - Better User Experience with Kendo UI.

1. THE WAY OF HTML5

2. Who am I ?
 Lohith G N
– Developer Evangelist – Telerik,
– Lohith.nagaraj@telerik.com
– Bangalore Dot Net (BDotNet) User Group Lead,
– Microsoft MVP,
– @kashyapa,
– http://kashyapas.com,
www.telerikhelper.net

3. Agenda
ASP.NET Introduction to Building Apps
MVC Kendo UI with Kendo UI

4. ASP.NET MVC
- Primer
facebook.com/telerik @telerik

5. What is ASP.NET MVC
- Powerful, Pattern Based way to build dynamic websites
- Enables clean separation of concerns
- Full control over markup
- TDD friendly development

6. /Home/Index
Controll
er
Model View

7. Kendo UI
- Introduction
facebook.com/telerik @telerik

8. What is Kendo UI ?
Everything you need to build HTML5 + JavaScript sites & APPS
“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

9. Kendo UI Blocks
ASP.NET MVC Wrappers
Kendo UI Kendo UI
Kendo UI Web
DataViz Mobile
Kendo Framework Elements

10. Kendo Building Blocks a.k.a F/W
DataSource Validation Globalization
Templating MVVM Drag & Drop

11. Everything you need in one
place,
Not hundreds of plug-ins
- UI Widgets
- MVVM Framework
- Datasource
- Templates
- Themes

12. Ready for Touch
- Full support for Touchscreen
- D & D also Touch Enabled

13. Fast JavaScript for
performance
- Every aspect built from
ground up
- Not another Jquery UI Clone
- Lightweight, templating
library faster than jquery
templates
- Optimized animations

14. Great UX across devices and
browsers
- IE7+
- FF ESR
- Chrome
- Safari 4+
- Opera 10+

15. Manage rich views and
models the MVVM way
- Inbuilt MVVM framework
- Declarative binding, two-way
sync
- Can be used with other lib
like Backbone.js

16. Customize themes
Customize themes
to match the look & feel
of your site and app
- ThemeBuilder tool to
customize

17. Kendo UI Widgets
DateTimePick
AutoComplete Calendar ComboBox DatePicker
er
DropDownList Editor Grid ListView Menu
NumericTextB
PanelBar Slider Splitter TabStrip
ox
TimePicker TreeView Upload Window

18. Using Kendo UI
1. Download Kendo UI
2. Configure page to use Kendo UI
Scripts & Styles, Define basic
HTML
3. Initialize with JavaScript
4. Use rich API to configure
behavior, handle events
1. Attribute Based
2. JavaScript Based

19. DEMO
facebook.com/telerik @telerik

20. Kendo UI Wrappers for
ASP.NET MVC
facebook.com/telerik @telerik

21. Power of
JavaScript,
Productivity of
Server
Simply program on the server and the
Kendo UI wrappers will handle the
HTML and JavaScript

22. Simple server-side
data binding and
CRUD
server-wrappers help configure
JavaScript data sources to work directly
with your data, even for CRUD
operations.

23. 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

24. • Supports ASP.NET MVC 3+
• Use with any ViewEngine
(Razor, ASPX)
• Automate AJAX data
binding
• Visual Studio helpers for
faster configuration

25. Q3
2012
Demo

26. Q&A
facebook.com/telerik @telerik

27. Resources
 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