The Kendo UI Grid | 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

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

Similar to sorting columns in a Grid, you can update the Grid content by applying a filter. By applying a filter on the column, users will be able to search relevant data in the Grid that matches some criteria.

How to do it…

To make the columns in the Grid filterable, set the configuration option, filterable, to true, as shown in the following line of code. Similar to the sortable option, all columns in the Grid will be available for filtering by default. If you want some of the columns to not be available for filtering, then set filterable as false under columns.

filterable: true

How it works…

When you mark the columns for filtering, you will see a filter icon for each of the columns in the Grid.

When you click on it, you will be presented with a set of options that will allow you to get filtered data.

By default, users will be presented with two conditions to enter in the search criteria. In this example, the user has selected...

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