All rights reserved. No part of this book may be reproduced, stored in a retrieval
system, or transmitted in any form or by any means without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews. Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book. Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: May 2013
Production Reference: 1160513
Published by Packt Publishing Ltd. Livery Place 35 Livery Street Birmingham B3 2PB, UK. ISBN 978-1-84969-434-6 www.packtpub.com
Cover Image by Parag Kadam (firstname.lastname@example.org)
Lead Technical Editor Mayur Hule
Production Coordinator Melwyn D'sa
Vrinda Amberkar Bhosale
About the Author John Adams currently works as an application development consultant in the
Dallas/Fort Worth area for a fantastic company called RBA. He has been developing custom business applications with the Microsoft .NET platform for 6 years and has specialized in development with ASP.NET MVC. He loves writing code and creating solutions. Above all, he loves his wife and children and the lord Jesus Christ. This book is dedicated to Michell, Samuel, and Sophie whose patience with my late nights made this project possible. I would also like to thank RBA, especially my manager Will, who introduced me to the project and kicked everything off. Finally, I would like to thank Kartikey Pandey, Anugya Khurana, Mayur Hule, Ricardo Covo, and Long Le for their oversight and editing skills. Their work has been exceptional and valuable throughout.
About the Reviewers Ricardo Covo has more than a decade of international experience in the Software
Development field, with experience in Latin America, California, and Canada. He has a wealth of experience in delivering data-driven enterprise solutions across various industries.
With a Bachelor's degree in Systems Engineering, complemented with a certification in Advanced Project Management, he has the right combination of technical and leadership skills to build development teams and set them up for efficient execution. In 2007 he founded (and is the principal of) Web Nodes – Software Development (http://webnodes.ca); a custom software development company, with clients big and small in Canada, United States, and South America. Prior to Web Nodes, Ricardo spent some years in the corporate world both in Canada and in the U.S., being part of companies such as Loblaws Inc., Trader Corporation, UNX (http://www.unix.com) and Auctiva (http://www.auctiva.com). Ricardo's passion for technology goes beyond work; he normally works on personal projects in an effort to always remain on top of the changes in technology. These projects include: http://ytnext.com, http://serversok.com, and http://toystrunk.com.
Long Le is a senior .NET Architect and Principal ALM Practitioner at CBRE. He also serves as principal consultant for Thinklabs and spends most of his time developing frameworks and application blocks, providing guidance for best practices and patterns, and standardizing the enterprise technology stack. He has been working with Microsoft technologies for over 10 years. Le has focused on a wide spectrum of server-side and web technologies, such as ASP.NET Web Forms, ASP.NET MVC, Windows Workflow, LINQ and Entity Framework, DevExpress, and Kendo UI. In his spare time, he enjoys blogging (http://blog.longle.net) and playing Call of Duty on his XBOX. He's recently became a proud father of his new born daughter Khloe Le. You can reach and follow him on Twitter @LeLong37. Special thanks to my significant other Tina Le for all your love and support throughout this project and to my wonderful newborn daughter Khloe Le. I love you.
www.PacktPub.com Support files, eBooks, discount offers and more
You might want to visit www.PacktPub.com for support files and downloads related to your book. Did you know that Packt offers eBook versions of every book published, with PDF and ePub files available? You can upgrade to the eBook version at www.PacktPub.com and as a print book customer, you are entitled to a discount on the eBook copy. Get in touch with us at service@ packtpub.com for more details. At www.PacktPub.com, you can also read a collection of free technical articles, sign up for a range of free newsletters and receive exclusive discounts and offers on Packt books and eBooks.
http://PacktLib.PacktPub.com Do you need instant solutions to your IT questions? PacktLib is Packt's online digital book library. Here, you can access, read and search across Packt's entire library of books.
Why Subscribe? •
Fully searchable across every book published by Packt
Copy and paste, print and bookmark content
On demand and accessible via web browser
Free Access for Packt account holders
If you have an account with Packt at www.PacktPub.com, you can use this to access PacktLib today and view nine entirely free books. Simply use your login credentials for immediate access.
Table of Contents Preface1 Chapter 1: Interacting with Data: DataSource, Templates, TabStrip, and Grid 7 Setting up the sample project 8 KendoUI syntax styles 17 Kendo UI MVC – basics 18 Managing data 21 Templates22 DataSource24
Model24 Schema27 Transport29 Other DataSource properties 31 DataSource methods 32 DataSource events 34 Getting started with basic usage 35
Page layout 42 Grid42
Chapter 2: The AutoComplete Widget and its Usage AutoComplete widget – basics Binding AutoComplete to a local source Binding AutoComplete to Remote Data Using AutoComplete with MVC through Models Using AutoComplete with MVC through Ajax Sending data to the server Using Templates to Customize AutoComplete Configuring all of the AutoComplete properties
55 56 57 58 61 62 63 64 65
Table of Contents
Hooking into AutoComplete widget events 66 Change67 Close67 Open67 Select67 Using the API AutoComplete methods 67 Close67 DataItem68 Destroy68 Enable68 Refresh68 Search69 Select69 Suggest69 Value69 Summary 70
Chapter 3: Using and Customizing Calendar
Chapter 4: The Kendo MVVM Framework
Calendar widget – basics 71 Configuring the Calendar widget 72 Calendar Widget using MVC 76 Methods available on the Calendar widget 78 Events fired by the Calendar widget 81 Summary83 Understanding MVVM – basics Simple data binding
Creating the view Creating the Model and View-Model
Observable data binding
Adding data dynamically Using observable properties in the View Making better use of observable arrays
Data-bind properties for Kendo MVVM The attr property The checked property The click property The custom property The disabled/enabled properties The events property The html/text properties The invisible/visible properties [ ii ]
91 95 98
102 102 103 104 106 106 106 106 107
Table of Contents
The source property 108 The style property 110 The value property 111 Declarative widgets through Data-Role MVVM attributes 112 Summary114
Chapter 5: HTML Editor and Custom Tools
Understanding the HTML Editor Adding and removing buttons from the toolbar Adding the Styles tool Tool for inserting HTML snippets Customizing HTML Editor tools Drop-down list tools Button tools
115 115 120 121 124 126
Custom template tools 129 Custom In-line tools 131 Using the HTML Editor API 132 Configuration options 132 Events133 Summary134
Chapter 6: Menu and ListView
Learning the Menu widget basics Menu items with images Menu items with URLs Menu API configuration options
135 141 143 144
The animation property The direction property Some more options
144 144 145
Configuring menu methods
The append(), insertAfter(), and insertBefore() methods The close(), enable(), open(), and remove() methods
Menu events The Kendo UI ListView ListView basics Selecting elements with ListView Editing elements with ListView ListView API and configuration ListView methods ListView events
147 148 148 153 154 156
[ iii ]
Table of Contents
Chapter 7: Implementing PanelBar and TabStrip
Chapter 8: Slider Essentials
PanelBar basics Adding sprite images to PanelBar items Adding URLs to PanelBar items Loading AJAX content with PanelBar Controlling PanelBar animation effects Introducing the TabStrip Widget TabStrip basics Using TabStrip with a datasource Adding images to the TabStrip widget Adding URLs to TabStrip tabs Loading AJAX content with TabStrip Controlling the TabSrip widget's animation effects Summary
Introducing Slider and RangeSlider Using Slider and RangeSlider with the MVC extension methods Implementing the basics Basic implementation using MVC extension methods Using tooltips and pop-up texts Learning keyboard controls Customizing the user interface of the slider widgets Tooltip customization Customizing tooltip options using MVC extension methods
Using values from a Kendo slider Using values from a Kendo range slider
The change event for a Kendo slider widget The change event for a Kendo range slider widget
The slide event 198 The change and slide events with MVC extension methods 198 Summary198
[ iv ]
Table of Contents
Chapter 9: Implementing the Splitter and TreeView Widgets The Splitter widget Learning the Splitter widget Loading content Loading content with AJAX Hooking into Splitter events The collapse event The contentLoad event The expand event The layoutChange event The resize event
Making calls to Splitter API methods Getting a reference to the splitter object Using the ajaxRequest method Using the collapse method Using the expand method Using the max and min methods Using the size method Using the toggle method
TreeView Learning TreeView Binding to a data source Using drag and drop Configuring animation effects Displaying images Using templates Hooking into TreeView events Making calls to the TreeView API methods Summary
Chapter 10: The Upload and Window Widgets Uploading files Learning the Upload widget Enabling asynchronous uploads Uploading multiple files simultaneously Removing uploaded files Tracking upload progress Cancelling an update in progress Using file drag and drop The Kendo UI Window widget Customizing Window actions Loading content with AJAX
199 199 199 202 202 203
203 204 204 205 205
206 206 207 207 208 208 209
209 210 211 212 214 214 217 218 219 220
221 221 222 224 226 227 228 228 229 229 231 234
Table of Contents
Using the animation effects Using the Window widget events Using the Window widget API methods Summary
Chapter 11: Web API Examples
Getting familiar with the ASP.NET Web API Getting familiar with Entity Framework Code First Getting familiar with OData Using DataSourceRequest with Kendo Grid Driving the ListView with Web API Summary
235 238 239 240
241 241 246 251 253 256 260
[ vi ]
What this book covers
Chapter 9, Implementing the Splitter and TreeView Widgets, will illustrate how to lay out resizable content areas on your web pages and how to visualize hierarchical data with a simple widget. The Splitter widget helps organize web pages into resizable zones. The TreeView widget creates dynamic displays for hierarchical data. Learn how to create these widgets and connect them to data sources. Chapter 10, The Upload and Window Widgets, provides instructions on how to build powerful file upload pages and interactive dialog boxes into your web site. The Upload widget creates a powerful file upload utility that works with AJAX and even allows drag-and-drop functionality. The Window widget creates modal dialog boxes that make areas of your web pages appear when necessary on top of other content. Learn how to make these widgets and add them to your pages. Chapter 11, Web API Examples, takes what you have learned about the Kendo UI widgets and introduces you into a more advanced area of development using the ASP.NET Web API framework. Web API provides a powerful server-side backend for your Kendo UI widgets and opens up the possibilities for creative custom development. Learn how to manage this technology in your own web applications with ASP.NET MVC.
What you need for this book
To complete the examples in this book, you will first need Visual Studio 2012. You can download a free trial of Visual Studio from www.microsoft.com/visualstudio if you do not already have it installed. You will also need the Kendo UI Complete for ASP.NET MVC install package from Telerik which you can get at http://www. kendoui.com/download.aspx.
Who this book is for
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text, database table names, folder names, filenames, file extensions, pathnames, dummy URLs, user input, and Twitter handles are shown as follows: "The both tick placement option will place the tick marks on both sides of a slider." A block of code is set as follows: