Kendo UI PanelBar | 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 PanelBar

A PanelBar can be created either by specifying its structure in the HTML markup or by configuring it using an API. In this recipe, we will take a look at the former approach.

How to do it…

A PanelBar widget contains a list of items stacked vertically. To create a PanelBar, we will need a list of items and hence we use the HTML's ordered or unordered list. In this example, we will list travel destinations, airlines, and important sights to visit as three panels:

<ul id="panelBar" style="width: 400px">
    <li>
     Destinations
 </li>
    <li>
        Flights
    </li>
    <li>
        Important Sights
    </li>
</ul>

Here, the list contains three items and these are the headings for each panel that we want to have. Also, the width property is set to 400px which will set the width of the PanelBar component. If the width property is not specified, then PanelBar would occupy the entire screen width, which is not desirable.

The preceding...

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