Kendo UI Mobile Framework | Kendo UI Cookbook

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

Kendo UI Cookbook

By : Ganatra

2.8 (4)

Kendo UI Cookbook

2.8 (4)

By: Ganatra

Overview of this book

This book is an easy-to-follow guide full of hands-on examples that allows you to learn and build visually compelling web applications using the Kendo UI library. This book will do wonders for web developers having knowledge of HTML and Javascript and want to polish their skills in building applications using the Kendo UI library.

Kendo UI Cookbook

Kendo UI Cookbook

Credits

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

The Kendo UI Application Framework

The Kendo UI Application Framework

Introduction

Using client-side templates to generate HTML markup from a JSON data

Creating a two-way binding between View elements and JavaScript objects using the Model View ViewModel (MVVM) pattern

Using Source and Template binding with ViewModels to generate HTML content

Validating user input using the built-in Validator

The Kendo UI Grid

The Kendo UI Grid

Introduction

Creating a Grid view and displaying tabular data

Displaying data from a local or remote DataSource component in a Grid view

Sorting data in a Grid using a selected column

Using filters to display data that matches certain criteria in the Grid

Creating, updating, and deleting in Grid

Using the virtualization mechanism to improve the performance of the Grid

Customizing the look and feel of the Grid

Kendo UI TreeView

Kendo UI TreeView

Introduction

Using a TreeView widget to display a directory structure

Using the drag and drop feature to move elements in TreeView

Using checkboxes to select nodes in TreeView

Associating icons with labels in TreeView

Kendo UI Editor

Kendo UI Editor

Introduction

Creating a WYSIWYG Editor using the kendoEditor function

Adding and removing tools in the Editor toolset

Using the image browser tool to insert images into the Editor

Kendo UI PanelBar

Kendo UI PanelBar

Introduction

Creating a PanelBar

Loading the content of a PanelBar using Ajax

Binding the PanelBar to a DataSource object

Customizing the PanelBar

Kendo UI File Uploader

Kendo UI File Uploader

Introduction

Using the file uploader to upload files to the server

Uploading files to the server asynchronously

Listening to file upload events

Kendo UI Window

Kendo UI Window

Introduction

Displaying a pop up and blocking the user interaction by configuring it as a modal window

Customizing the look and feel of the window and including action buttons

Using the Window API to act on a window object

Kendo UI Mobile Framework

Kendo UI Mobile Framework

Introduction

Creating a layout and adding views to the layout

Setting the initial layout and view when initializing the application

Using the Application object to navigate to various views

Adding touch events to your mobile application

Kendo UI Mobile Widgets

Kendo UI Mobile Widgets

Introduction

Creating a list using a ListView widget

Binding the ListView widget to a DataSource object

Fixing the headers when the user scrolls through the list

Filtering the elements in ListView

Building a hierarchical list using the ListView widget

Building an endless scrolling list

Showing a list of actions that can be performed using the ActionSheet widget

Using the ScrollView widget to navigate through a collection of pictures

Creating a SplitView widget to display multiple panes in a tablet and building interaction between the panes

Tab between views in the application using a TabStrip widget

Kendo UI DataViz

Kendo UI DataViz

Introduction

Creating charts using kendoChart

Binding a chart to a DataSource object

Creating a multiaxis chart

Displaying data over a period of time and using aggregate functions

Making a chart interactive by adding events

Changing the chart type dynamically

Kendo UI DataViz – Advance Charting

Kendo UI DataViz – Advance Charting

Introduction

Creating a chart to show stock history

Using the Radial Gauge widget

Using the Linear Gauge widget

Generating barcode images using various encoding methods

Generating a QR code image to represent a URL, e-mail, telephone, and geographic location

Creating flow diagrams using Kendo Diagram

Creating hierarchical structural diagrams using layouts

Creating a map to display geospatial information using an OpenStreet map

Creating a map by binding it to the GeoJSON data

Index

Index

Creating a layout and adding views to the layout

Every Kendo Mobile application has one or more layouts and multiple views added to it. Both the layout and view are widgets, that is, visual components that can be used to build a mobile application. There are several such widgets, which we will explore in the next chapter. In this recipe, we will take a look at building a simple application by creating a layout and adding multiple views to it.

Getting started

There are separate CSS and JS files that need to be included when working with mobile applications. The CSS file should refer to the kendo.mobile.all.min.css file located in the styles directory and the JS files should refer to kendo.mobile.min.js, located in the js directory.

Also, the reference to the jQuery library should remain as it is, that is, the Kendo UI Mobile library (kendo.mobile.min.js) has a dependency on jQuery.

How to do it…

As mentioned in the previous section, let's first include the CSS and JS files references in the HTML...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

Kendo UI Cookbook

Search

Your notes and bookmarks