You are previewing Kendo UI Cookbook.
O'Reilly logo
Kendo UI Cookbook

Book Description

Over 50 recipes to help you rapidly build rich and dynamic user interfaces for web and mobile platforms.

In Detail

Kendo UI is a one-stop library that allows you to build applications for web and mobile platforms using HTML5 and JavaScript. The library includes several widgets that allow you to build compelling web applications rapidly. Building web applications for web and mobile platforms using modern web technologies is now easy with the Kendo UI library. This cookbook contains practical recipes that you can apply in your everyday projects, and build compelling applications effortlessly. It gets you started with the application framework and then guides you through various widgets that you can readily use in your project with minimum configuration. It also provides recipes that you can use to build web applications for various mobile platforms while maintaining a single codebase.

What You Will Learn

  • Get to grips with the basics of the Kendo UI application framework
  • Use various widgets such as Grid, TreeView, Editor, PanelBar, Modal Window, and File uploader, and customize your application to meet the business requirements
  • Build web applications for the mobile platform and provide a native look and feel on iOS, Android, BlackBerry, and Windows Phone 8
  • Utilize the data visualization components such as charts and dashboard widgets to build visually compelling and interactive applications
  • Downloading the example code for this book. 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.

    Table of Contents

    1. Kendo UI Cookbook
      1. Table of Contents
      2. Kendo UI Cookbook
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why Subscribe?
          2. Free Access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Errata
          3. Piracy
          4. Questions
      8. 1. The Kendo UI Application Framework
        1. Introduction
        2. Using client-side templates to generate HTML markup from a JSON data
          1. How to do it…
          2. How it works…
          3. There's more…
        3. Creating a two-way binding between View elements and JavaScript objects using the Model View ViewModel (MVVM) pattern
          1. How to do it…
          2. How it works...
          3. There's more…
        4. Using Source and Template binding with ViewModels to generate HTML content
          1. How to do it…
          2. How it works…
        5. Validating user input using the built-in Validator
          1. How to do it…
          2. How it works…
          3. There's more…
      9. 2. The Kendo UI Grid
        1. Introduction
        2. Creating a Grid view and displaying tabular data
          1. How to do it…
          2. How it works…
          3. There's more…
        3. Displaying data from a local or remote DataSource component in a Grid view
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Sorting data in a Grid using a selected column
          1. How to do it…
          2. How it works…
        5. Using filters to display data that matches certain criteria in the Grid
          1. How to do it…
          2. How it works…
          3. There's more…
        6. Creating, updating, and deleting in Grid
          1. How to do it…
          2. How it works…
          3. There's more…
        7. Using the virtualization mechanism to improve the performance of the Grid
          1. How to do it…
          2. How it works…
          3. There's more…
        8. Customizing the look and feel of the Grid
          1. How to do it…
          2. How it works…
          3. There's more…
      10. 3. Kendo UI TreeView
        1. Introduction
        2. Using a TreeView widget to display a directory structure
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Constructing a TreeView widget from a remote DataSource object
        3. Using the drag and drop feature to move elements in TreeView
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Using checkboxes to select nodes in TreeView
          1. How to do it…
          2. How it works…
          3. There's more…
        5. Associating icons with labels in TreeView
          1. How to do it…
          2. How it works…
      11. 4. Kendo UI Editor
        1. Introduction
        2. Creating a WYSIWYG Editor using the kendoEditor function
          1. How to do it…
          2. How it works…
        3. Adding and removing tools in the Editor toolset
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Using the image browser tool to insert images into the Editor
          1. Getting ready
          2. How to do it…
          3. How it works…
          4. There's more…
      12. 5. Kendo UI PanelBar
        1. Introduction
        2. Creating a PanelBar
          1. How to do it…
          2. How it works…
          3. There's more…
        3. Loading the content of a PanelBar using Ajax
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Binding the PanelBar to a DataSource object
          1. How to do it…
          2. How it works…
        5. Customizing the PanelBar
          1. How to do it…
          2. How it works…
      13. 6. Kendo UI File Uploader
        1. Introduction
        2. Using the file uploader to upload files to the server
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Disabling multiple file uploads
            2. Customizing the display of list items using a template
        3. Uploading files to the server asynchronously
          1. Getting started
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Localizing the file uploader widget
            2. Using drag-and-drop to upload files
        4. Listening to file upload events
          1. How to do it…
          2. How it works…
      14. 7. Kendo UI Window
        1. Introduction
        2. Displaying a pop up and blocking the user interaction by configuring it as a modal window
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Showing the modal window on a click of button
            2. Loading the content of the modal using Ajax
        3. Customizing the look and feel of the window and including action buttons
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Using the Window API to act on a window object
          1. How to do it…
          2. How it works…
      15. 8. Kendo UI Mobile Framework
        1. Introduction
        2. Creating a layout and adding views to the layout
          1. Getting started
          2. How to do it…
          3. How it works…
          4. There's more…
        3. Setting the initial layout and view when initializing the application
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Using the Application object to navigate to various views
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Specifying view transitions
        5. Adding touch events to your mobile application
          1. How to do it…
          2. How it works…
      16. 9. Kendo UI Mobile Widgets
        1. Introduction
        2. Creating a list using a ListView widget
          1. How to do it…
          2. How it works…
          3. There's more…
        3. Binding the ListView widget to a DataSource object
          1. How to do it…
          2. How it works…
          3. There's more…
        4. Fixing the headers when the user scrolls through the list
          1. How to do it…
          2. How it works…
        5. Filtering the elements in ListView
          1. How to do it…
          2. How it works…
          3. There's more…
        6. Building a hierarchical list using the ListView widget
          1. Getting started
          2. How to do it…
          3. How it works…
        7. Building an endless scrolling list
          1. How to do it…
          2. How it works…
        8. Showing a list of actions that can be performed using the ActionSheet widget
          1. How to do it…
          2. How it works…
          3. There's more…
        9. Using the ScrollView widget to navigate through a collection of pictures
          1. How to do it…
          2. How it works…
          3. There's more…
        10. Creating a SplitView widget to display multiple panes in a tablet and building interaction between the panes
          1. How to do it…
          2. How it works…
          3. There's more…
        11. Tab between views in the application using a TabStrip widget
          1. How to do it…
          2. How it works…
      17. 10. Kendo UI DataViz
        1. Introduction
        2. Creating charts using kendoChart
          1. Getting started
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Showing multiple categories in the chart
            2. Changing the position of the title and Iegend information
            3. Changing the default theme
        3. Binding a chart to a DataSource object
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Showing multiple series using the DataSource object
            2. Showing values on the chart as labels
        4. Creating a multiaxis chart
          1. How to do it…
          2. How it works…
          3. There's more…
        5. Displaying data over a period of time and using aggregate functions
          1. How to do it…
          2. How it works…
          3. There's more…
        6. Making a chart interactive by adding events
          1. How to do it…
          2. How it works…
        7. Changing the chart type dynamically
          1. How to do it…
          2. How it works…
      18. 11. Kendo UI DataViz – Advance Charting
        1. Introduction
        2. Creating a chart to show stock history
          1. Getting started
          2. How to do it…
          3. How it works…
          4. There's more…
            1. Specifying the date range in the navigator when initializing the chart
            2. Customizing the look and feel of the Stock Chart widget
        3. Using the Radial Gauge widget
          1. How to do it…
          2. How it works…
          3. There's more…
            1. Changing the major and minor unit values
            2. Changing the color of the radial using the ranges option
            3. Updating the pointer value using a Slider widget
        4. Using the Linear Gauge widget
          1. How to do it…
          2. How it works…
          3. There's more…
        5. Generating barcode images using various encoding methods
          1. How to do it…
          2. How it works…
        6. Generating a QR code image to represent a URL, e-mail, telephone, and geographic location
          1. How to do it…
          2. How it works…
          3. There's more…
        7. Creating flow diagrams using Kendo Diagram
          1. How to do it…
          2. How it works…
        8. Creating hierarchical structural diagrams using layouts
          1. How to do it…
          2. How it works…
        9. Creating a map to display geospatial information using an OpenStreet map
          1. How to do it…
          2. How it works…
          3. There's more…
        10. Creating a map by binding it to the GeoJSON data
          1. How to do it…
          2. How it works…
      19. Index