Web development today requires real expertise in HTML5, JavaScript, and CSS. These technologies are not completely new, but there has been so much growth around this programming model that it can be difficult to find your bearings when trying to create a new website. It seems like every popular website has a different, special trick in rendering attractive layouts or in creating responsive and dynamic experiences. A beginner can feel hopeless in trying to learn how to program like this.
Fortunately, many JavaScript libraries have arisen to meet this intense demand. Most of these libraries enable client-side functionality through special shortcuts so that a developer can utilize very powerful functionality without writing, or even understanding, complicated JavaScript code. The jQuery libraries are a very good example of this; they provide rich functionality and UI controls with only a few lines of code, hiding the complicated programming underneath.
Telerik has taken this model one step further. They have built a powerful JavaScript framework called Kendo UI that is built on top of jQuery, but can create complete widgets with even simpler code. Not only this, it also includes server-side code libraries that enable developers to create widgets on the server, and all JavaScript is generated automatically! This is an enormous productivity boost, and enables both experienced web developers and beginners to operate on the same playing field. This book will take you on an initial journey through the Kendo UI Framework and show you how to create an entire set of useful and powerful widgets that will make your web pages shine like the best sites on the Internet.
Chapter 1, Interacting with Data: DataSource, Templates, and Grid, teaches the foundation of the Kendo UI DataSource and Template JavaScript objects. Learn the basics of these tools and the most important widget of all—the Grid. These concepts will form the basis for all of your creations with the Kendo UI framework.
Chapter 2, The AutoComplete Widget and its Usage, shows how to use Kendo UI to create a word wheel, or auto-complete, effect on a textbox so that word suggestions appear as the user types. Learn how to use this widget and how to connect it to different data sources.
Chapter 3, Using and Customizing Calendar, shows how to create a full-featured calendar control on a web page with very little required code. Learn how to use the Kendo UI framework to customize this widget to tailor it to your needs.
Chapter 4, The Kendo MVVM Framework, introduces you to Model-View-ViewModel (MVVM) development with Kendo UI. JavaScript MVVM frameworks are powerful systems that allow you to bind dynamic data to web pages through declaring HTML attributes. These systems can be complicated, but the Kendo UI MVVM framework is as easy as this can get. Learn how to use this to enable powerful dynamic web pages.
Chapter 5, HTML Editor and Custom Tools, demonstrates the Kendo UI Editor widget. This HTML editor widget allows you to give users a useful area to format text input with styles and layout. This is a perfect feature for blogs, forums, and review sites. Learn how to use and customize this widget for your own web pages.
Chapter 6, Menu and ListView, introduces you to the Menu and ListView widgets from Kendo UI so you can effectively format and display data on your web pages. The Menu widget creates a dynamic menu that opens with hover effects and allows for custom animation and behaviors. The ListView is a very flexible widget that allows you to format and template data however you like. Learn how to use these widgets to display data on your own pages.
Chapter 7, Implementing PanelBar and TabStrip, illustrates how to build accordion controls and tabs on your web pages. Accordion controls provide a useful way to include a lot of content on a page without making the page grow in size. It can show only a single section of content at a time while still providing instant access to the rest. Tabs are very useful for creating navigation bars on a page that show what other areas of your site that a user can visit. You will learn how to create accordion controls with the PanelBar widget and how to create tabs using the TabStrip widget. See how using these widgets can make your web pages look better.
Chapter 8, Slider Essentials, will teach you how to use the Kendo UI Slider widgets to display number ranges with an attractive twist. This widget is a very convenient method of collecting numerical input from web forms with graphical bars that can slide and move in steps. Learn how to add these widgets to your web pages to make your web forms really shine.
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.
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.
This book is designed for beginner web developers, who are starting to learn how to utilize JavaScript libraries to create rich and interactive web applications. The user should be familiar with JavaScript, HTML, and CSS. Some knowledge of ASP.NET MVC is helpful, but not required.
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:
<style>
#stateOrTerritory {
width:200px;
}
</style>
<h2>AutoCompletePage</h2>
<input type="text" name="stateOrTerritory" id="stateOrTerritory" />
<script type="text/javascript">When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
new StateTerritory{ Name = "Washington", IsContiguous = true,
IsState = true, IsTerritory = false },
new StateTerritory{ Name = "West Virginia", IsContiguous = true,
IsState = true, IsTerritory = false },
new StateTerritory{ Name = "Wisconsin", IsContiguous = true,
IsState = true, IsTerritory = false },
new StateTerritory{ Name = "Wyoming", IsContiguous = true,
IsState = true, IsTerritory = false }
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "Notice that the content of the Kendo UI Window widget is not yet shown, it must first be activated through an event; in this case that event is clicking on the Show Window button."
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/submit-errata, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.