DevExtreme Technical Demos

Data Grid

Overview

Data Binding

Custom Data Source
jQuery Angular AngularJS Knockout React Vue
SignalR Service
jQuery Angular AngularJS React Vue
Real-Time Updates
jQuery Angular AngularJS React Vue

Paging and Scrolling

Local Virtual Scrolling
jQuery Angular AngularJS Knockout React Vue
Remote Virtual Scrolling
jQuery Angular AngularJS React Vue
Horizontal Virtual Scrolling
jQuery Angular AngularJS React Vue
Infinite Scrolling
jQuery Angular AngularJS Knockout React Vue

Editing

Row Editing and Editing Events
jQuery Angular AngularJS Knockout React Vue
Cell Editing and Editing API
jQuery Angular AngularJS Knockout React Vue
Collaborative Editing
jQuery Angular AngularJS React Vue
CRUD Operations
jQuery Angular AngularJS React Vue

Grouping

Filtering and Sorting

Focused Row

Selection

Multiple Record Selection Modes
jQuery Angular AngularJS Knockout React Vue
Multiple Record Selection API
jQuery Angular AngularJS Knockout React Vue
Deferred Selection
jQuery Angular AngularJS Knockout

Columns

Column Customization
jQuery Angular AngularJS Knockout React Vue
Columns based on a Data Source
jQuery Angular AngularJS Knockout React Vue
Multi-Row Headers (Bands)
jQuery Angular AngularJS Knockout React Vue
Column Resizing
jQuery Angular AngularJS Knockout
Command Column Customization
jQuery Angular AngularJS Knockout React Vue

State Persistence

Appearance

Right-To-Left Support
jQuery Angular AngularJS Knockout React Vue

Templates

Column 3rd Party Engine Template
jQuery
Row 3rd Party Engine Template
jQuery
Cell Customization
jQuery Angular AngularJS Knockout React Vue
Toolbar Customization
jQuery Angular AngularJS Knockout React Vue

Data Summaries

Recalculate While Editing
jQuery Angular AngularJS React Vue

Master-Detail

Master-Detail View
jQuery Angular AngularJS Knockout React Vue

Export

Excel Cell Customization
jQuery Angular AngularJS Knockout React Vue

Adaptability

Grid Adaptability Overview
jQuery Angular AngularJS Knockout React Vue
Grid Columns Hiding Priority
jQuery Angular AngularJS Knockout React Vue

Pivot Grid

Overview

Data Binding

Field Chooser

Integrated Field Chooser
jQuery Angular AngularJS React Vue
Standalone Field Chooser
jQuery Angular AngularJS React Vue

Features

Running Totals
jQuery Angular AngularJS Knockout
Summary Display Modes
jQuery Angular AngularJS Knockout
Virtual Scrolling
jQuery Angular AngularJS Knockout
State Persistence
jQuery Angular AngularJS Knockout
Chart Integration
jQuery Angular AngularJS Knockout
Layout Customization
jQuery Angular AngularJS Knockout

Tree List

Overview

Data Binding

Simple Array: Plain Structure
jQuery Angular AngularJS Knockout React Vue
Simple Array: Hierarchical Structure
jQuery Angular AngularJS Knockout React Vue
Load Data on Demand
jQuery Angular AngularJS Knockout React Vue

Sorting

Paging

Editing

Focused Row

Selection

Single Row Selection
jQuery Angular AngularJS Knockout React Vue
Multiple Row Selection
jQuery Angular AngularJS Knockout React Vue

Filtering

Using Search Panel
jQuery Angular AngularJS Knockout React Vue
Using Header Filter
jQuery Angular AngularJS Knockout React Vue

Column Customization

State Persistence

State Persistence
jQuery Angular AngularJS React Vue

Adaptability

Scheduler

Overview

Data Binding

SignalR Service
jQuery Angular AngularJS React Vue
Google Calendar Integration
jQuery Angular AngularJS Knockout React Vue

Views

Features

Current Time Indicator
jQuery Angular AngularJS Knockout
Time Zones Support
jQuery Angular AngularJS Knockout
Recurring Appointments
jQuery Angular AngularJS Knockout

Grouping

Group Orientation
jQuery Angular AngularJS React Vue
Grouping By Date
jQuery Angular AngularJS React Vue

Customization

Custom Templates
jQuery Angular AngularJS
Cell Templates
jQuery Angular AngularJS
Customize Individual Views
jQuery Angular AngularJS
Increased View Duration
jQuery Angular AngularJS Knockout
Adaptive Appointments
jQuery Angular AngularJS
Context Menu Integration
jQuery Angular AngularJS

Html Editor (CTP)

Overview

Output Formats

Toolbar Customization

Toolbar Customization
jQuery Angular AngularJS Knockout React Vue

Charts

Overview

Data Binding

Client-Side Data Processing
jQuery Angular AngularJS Knockout React Vue
Server-Side Data Processing
jQuery Angular AngularJS Knockout React Vue
Dynamic Series from the DataSource
jQuery Angular AngularJS Knockout React Vue
SignalR Service
jQuery Angular AngularJS React Vue
Load Data On Demand
jQuery Angular AngularJS React Vue

Area Charts

Step Area with Gaps
jQuery Angular AngularJS Knockout React Vue

Bar Charts

Side-by-Side Stacked Bar
jQuery Angular AngularJS Knockout React Vue
Side-by-Side Full-Stacked Bar
jQuery Angular AngularJS Knockout React Vue
Auto-Calculated Bar Width
jQuery Angular AngularJS Knockout React Vue
Color Each Bar Differently
jQuery Angular AngularJS Knockout React Vue
Customize Points and Labels
jQuery Angular AngularJS Knockout React Vue
Bi-Directional Bar Chart
jQuery Angular AngularJS Knockout React Vue

Bullet Charts

Doughnut Charts

Doughnut Selection
jQuery Angular AngularJS Knockout React Vue
Doughnut with Top N Series
jQuery Angular AngularJS Knockout React Vue
Doughnut with Multiple Series
jQuery Angular AngularJS Knockout React Vue

Financial Charts

Points Aggregation
jQuery Angular AngularJS Knockout

Line Charts

Resolved Axis Label Overlapping
jQuery Angular AngularJS Knockout

Pie Charts

Pies with Equal Sizes
jQuery Angular AngularJS Knockout
Pie with Custom Labels
jQuery Angular AngularJS Knockout
Pie with Small Values Grouped
jQuery Angular AngularJS Knockout
Pie with Resolved Label Overlapping
jQuery Angular AngularJS Knockout

Point Charts

Scatter Logarithmic Axis
jQuery Angular AngularJS Knockout

Polar and Radar Charts

Continuous Data
jQuery Angular AngularJS Knockout
Inverted Chart
jQuery Angular AngularJS Knockout

Range Charts

Sparkline Charts

Area Sparklines
jQuery Angular AngularJS Knockout
Bar Sparklines
jQuery Angular AngularJS Knockout
Winloss Sparklines
jQuery Angular AngularJS Knockout

Tree Map

Hierarchical Data Structure
jQuery Angular AngularJS Knockout
Plain Data Structure
jQuery Angular AngularJS Knockout
Tiling Algorithms
jQuery Angular AngularJS Knockout

Funnel and Pyramid Charts

Sankey Chart

Combinations

Multiple Panes
jQuery Angular AngularJS Knockout
Points Aggregation
jQuery Angular AngularJS Knockout

More Features

Export

Export and Printing API
jQuery Angular AngularJS Knockout
Export Several Charts
jQuery Angular AngularJS Knockout

Selection

Multiple Series Selection
jQuery Angular AngularJS Knockout
Multiple Point Selection
jQuery Angular AngularJS Knockout
API - Select a Point
jQuery Angular AngularJS Knockout

Tooltips

API - Display a Tooltip
jQuery Angular AngularJS Knockout
Tooltip HTML Support
jQuery Angular AngularJS Knockout

Zooming

Zooming on Area Selection
jQuery Angular AngularJS React Vue
Zooming and Scrolling
jQuery Angular AngularJS Knockout
Zooming and Scrolling API
jQuery Angular AngularJS Knockout
Discrete Axis Zooming and Scrolling
jQuery Angular AngularJS Knockout

Gauges

Overview

Data Binding

Update Circular Gauge Data at Runtime
jQuery Angular AngularJS Knockout
Update Linear Gauge Data at Runtime
jQuery Angular AngularJS Knockout
Update Bar Gauge Data at Runtime
jQuery Angular AngularJS Knockout

Bar Gauge

Labels Customization
jQuery Angular AngularJS Knockout
Variable Number of Bars
jQuery Angular AngularJS Knockout

Circular Gauge

Palette for Ranges
jQuery Angular AngularJS Knockout
Scale Minor Ticks
jQuery Angular AngularJS Knockout
Scale Label Formatting
jQuery Angular AngularJS Knockout
Different Value Indicator Types
jQuery Angular AngularJS Knockout
Different Subvalue Indicator Types
jQuery Angular AngularJS Knockout
Subvalue Indicator Text Formatting
jQuery Angular AngularJS Knockout
Angles Customization
jQuery Angular AngularJS Knockout
Gauge Title Customized
jQuery Angular AngularJS Knockout
Value Indicators API
jQuery Angular AngularJS Knockout

Linear Gauge

Scale Custom Tick Interval
jQuery Angular AngularJS Knockout
Scale Custom Tick Values
jQuery Angular AngularJS Knockout
Different Value Indicator Types
jQuery Angular AngularJS Knockout
Different Subvalue Indicator Types
jQuery Angular AngularJS Knockout
Base Value for Range Bar
jQuery Angular AngularJS Knockout
Variable Number of Subvalue Indicators
jQuery Angular AngularJS Knockout

Navigation

Overview

Accordion

Menu

Multi View

NavBar

Slideout

Drawer

Left or Right Position
jQuery Angular AngularJS React Vue
Top or Bottom Position
jQuery Angular AngularJS React Vue

Tab Panel

Tabs

Toolbar

Tree View

Hierarchical Data Structure
jQuery Angular AngularJS Knockout React Vue
Plain Data Structure
jQuery Angular AngularJS Knockout React Vue
Item Selection and Customization
jQuery Angular AngularJS Knockout React Vue
Load Data on Demand
jQuery Angular AngularJS Knockout React Vue
TreeView with Search Bar
jQuery Angular AngularJS Knockout React Vue

Right-to-Left Support

Right-to-Left Support
jQuery Angular AngularJS Knockout

Editors

Overview

Autocomplete

Calendar

Check Box

Color Box

Date Box

Drop Down Box

Multiple Selection
jQuery Angular AngularJS Knockout React Vue

Number Box

Select Box

Search and Editing
jQuery Angular AngularJS Knockout React Vue
Customize Drop-Down Button
jQuery Angular AngularJS Knockout Vue

Switch

Tag Box

Tag Count Limitation
jQuery Angular AngularJS Knockout React Vue

Text Area

Text Box

Validation

Right-to-Left Support

Right-to-Left Support
jQuery Angular AngularJS Knockout React Vue

Styling Mode

Forms and Multi-Purpose

Overview

Box

Button Group

Field Set

Overview
jQuery

Filter Builder

Customization
jQuery Angular AngularJS React Vue

Form

Columns Adaptability
jQuery Angular AngularJS Knockout React Vue

Radio Group

Range Selector

Numeric Scale (Lightweight)
jQuery Angular AngularJS Knockout
Date-Time Scale (Lightweight)
jQuery Angular AngularJS Knockout
Date-Time Scale
jQuery Angular AngularJS Knockout
Logarithmic Scale
jQuery Angular AngularJS Knockout
Discrete scale
jQuery Angular AngularJS Knockout
Custom Formatting
jQuery Angular AngularJS Knockout
Use Range Selection for Calculation
jQuery Angular AngularJS Knockout
Use Range Selection for Filtering
jQuery Angular AngularJS Knockout
Image on Background
jQuery Angular AngularJS Knockout
Chart on Background
jQuery Angular AngularJS Knockout
Customized Chart on Background
jQuery Angular AngularJS Knockout
Chart on Background with Series Template
jQuery Angular AngularJS Knockout

Range Slider

Responsive Box

Scroll View

Slider

Actions and Lists

Overview

Action Sheet

Button

Predefined Types
jQuery Angular AngularJS React Vue

Context Menu

File Uploader

Chunk Uploading
jQuery Angular AngularJS React Vue

Gallery

Item 3rd Party Engine Template
jQuery

List

List Editing and API
jQuery Angular AngularJS Knockout React Vue
Item 3rd Party Engine Template
jQuery
List with Search Bar
jQuery Angular AngularJS Knockout React Vue
Web API Service
jQuery Angular React Vue

Lookup

Event Handling
jQuery Angular AngularJS Knockout

Tile View

Item 3rd Party Engine Template
jQuery

Maps

Overview

Map

Providers and Types
jQuery Angular AngularJS Knockout

Vector Map

Colors Customization
jQuery Angular AngularJS Knockout
Zooming and Centering
jQuery Angular AngularJS Knockout
Bubble Markers
jQuery Angular AngularJS Knockout
Dynamic Viewport
jQuery Angular AngularJS Knockout
Area with Labels and Two Legends
jQuery Angular AngularJS Knockout
Tooltip HTML Support
jQuery Angular AngularJS Knockout
Custom Projection
jQuery Angular AngularJS Knockout
Multiple Layers
jQuery Angular AngularJS Knockout
Custom Map Data
jQuery Angular AngularJS Knockout

Dialogs and Notifications

Overview

Load Indicator

Load Panel

Popover

Popup

Progress Bar

Toast

Tooltip

Localization

Using Intl

Using Globalize

Some demos might not work if this application runs from a file system. We recommend setting up a local web server and run technical demos in it.