UI Widgets

Accordion

The Accordion widget contains several panels displayed one under another. These panels can be collapsed or expanded by an end user, which makes this widget very useful for presenting information in a limited amount of space.

ActionSheet

The ActionSheet widget is a sheet containing a set of buttons located one under the other. These buttons usually represent several choices relating to a single task.

Autocomplete

The Autocomplete widget is a textbox that provides suggestions while a user types into it.

BarGauge

The BarGauge widget contains several circular bars that each indicates a single value.

Box

The Box widget allows you to arrange various elements within it. Separate and adaptive, the Box widget acts as a building block for the layout.

Bullet

The Bullet widget is useful when you need to compare a single measure to a target value. The widget comprises a horizontal bar indicating the measure and a vertical line indicating the target value.

Button

The Button widget is a simple button that performs specified commands when a user clicks it.

ButtonGroup

The ButtonGroup is a widget that contains a set of toggle buttons and can be used as a mode switcher.

Calendar

The Calendar is a widget that displays a calendar and allows an end user to select the required date within a specified date range.

Chart

The Chart is a widget that visualizes data from a local or remote storage using a great variety of series types along with different interactive elements, such as tooltips, crosshair pointer, legend, etc.

CheckBox

The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific option has been chosen.

CircularGauge

The CircularGauge is a widget that indicates values on a circular numeric scale.

ColorBox

The ColorBox is a widget that allows an end user to enter a color or pick it out from the drop-down editor.

ContextMenu

The ContextMenu widget displays a single- or multi-level context menu. An end user invokes this menu by a right click or a long press.

DataGrid

The DataGrid is a widget that represents data from a local or remote source in the form of a grid. This widget offers such basic features as sorting, grouping, filtering, as well as more advanced capabilities, like state storing, export to Excel, master-detail interface, and many others.

DateBox

The DateBox is a widget that displays date and time in a specified format, and enables a user to pick or type in the required date/time value.

DeferRendering

The DeferRendering is a widget that waits for its content to be ready before rendering it. While the content is getting ready, the DeferRendering displays a loading indicator.

See Also

Diagram CTP

The Diagram widget provides a visual interface to help you design new and modify existing diagrams.

NOTE
DevExtreme Diagram is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

Draggable

Draggable is a user interface utility that allows widget elements to be dragged and dropped.

Drawer

The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.

DropDownBox

The DropDownBox widget consists of a text field, which displays the current value, and a drop-down field, which can contain any UI element.

DropDownButton

The DropDownButton is a button that opens a drop-down menu.

FileManager CTP

The FileManager is a widget that allows users to upload, select, and manage files and directories in different file storages.

NOTE
DevExtreme FileManager is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

FileUploader

The FileUploader widget enables an end user to upload files to the server. An end user can select files in the file explorer or drag and drop files to the FileUploader area on the page.

FilterBuilder

The FilterBuilder widget allows a user to build complex filter expressions with an unlimited number of filter conditions, combined by logical operations using the UI.

Form

The Form widget represents fields of a data object as a collection of label-editor pairs. These pairs can be arranged in several groups, tabs and columns.

Funnel

The Funnel is a widget that visualizes a value at different stages. It helps assess value changes throughout these stages and identify potential issues. The Funnel widget conveys information using different interactive elements (tooltips, labels, legend) and enables you to create not only a funnel, but also a pyramid chart.

Gallery

The Gallery is a widget that displays a collection of images in a carousel. The widget is supplied with various navigation controls that allow a user to switch between images.

Gantt CTP

The Gantt is a widget that displays the task flow and dependencies between tasks.

NOTE
DevExtreme Gantt is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

View Demo

See Also

HtmlEditor CTP

HtmlEditor is a WYSIWYG editor that allows you to format textual and visual content and to output it in HTML or Markdown. HtmlEditor is built on top of and requires Quill.

NOTE
DevExtreme HtmlEditor is available as a community technology preview (CTP). Should you have any questions or suggestions prior to its official release, please email your comments to support@devexpress.com.

LinearGauge

The LinearGauge is a widget that indicates values on a linear numeric scale.

List

The List is a widget that represents a collection of items in a scrollable list.

LoadIndicator

The LoadIndicator is a UI element notifying the viewer that a process is in progress.

LoadPanel

The LoadPanel is an overlay widget notifying the viewer that loading is in progress.

Lookup

The Lookup is a widget that allows an end user to search for an item in a collection shown in a drop-down menu.

Map

The Map is an interactive widget that displays a geographic map with markers and routes.

Menu

The Menu widget is a panel with clickable items. A click on an item opens a drop-down menu, which can contain several submenus.

MultiView

The MultiView is a widget that contains several views. An end user navigates through the views by swiping them in the horizontal direction.

NavBar

The NavBar is a widget that navigates the application views.

NumberBox

The NumberBox is a widget that displays a numeric value and allows a user to modify it by typing in a value, and incrementing or decrementing it using the keyboard or mouse.

PieChart

The PieChart is a widget that visualizes data as a circle divided into sectors that each represents a portion of the whole.

PivotGrid

The PivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube.

PivotGridFieldChooser

A complementary widget for the PivotGrid that allows you to manage data displayed in the PivotGrid. The field chooser is already integrated in the PivotGrid and can be invoked using the context menu. If you need to continuously display the field chooser near the PivotGrid widget, use the PivotGridFieldChooser widget.

Both the PivotGridFieldChooser and the PivotGrid must be bound to one and the same instance of the PivotGridDataSource. Create the PivotGridDataSource individually and then assign it to both widgets as shown in the code above.

View Demo

See Also

PolarChart

The PolarChart is a widget that visualizes data in a polar coordinate system.

The PolarChart widget visualizes data in a polar coordinate system. In this system, each point on a plane is determined by the distance from the center (the point's value) and the angle from a fixed direction (the point's argument). To understand how a chart is displayed in a polar coordinate system, imagine how it would be displayed in a rectangular coordinate system and then round off the argument axis in your mind.

DevExtreme HTML5 Charts DataVisualization DevExtreme HTML5 Charts PolarChart RadarChart DataVisualization

View Demo Read Guides

See Also

Popover

The Popover is a widget that shows notifications within a box with an arrow pointing to a specified UI element.

Popup

The Popup widget is a pop-up window overlaying the current view.

ProgressBar

The ProgressBar is a widget that shows current progress.

RadioGroup

The RadioGroup is a widget that contains a set of radio buttons and allows an end user to make a single selection from the set.

RangeSelector

The RangeSelector is a widget that allows a user to select a range of values on a scale.

This widget represents a scale (numeric or date-time) and two sliders. A user selects the required range by moving the sliders.

RangeSelector

A chart can be displayed in the background of the RangeSelector widget. This allows end users to select the required range in a chart series. You can also integrate the RangeSelector widget with a stand-alone Chart widget to emulate chart zooming and scrolling.

View Demo Read Guides

See Also

RangeSlider

The RangeSlider is a widget that allows an end user to choose a range of numeric values.

Resizable

The Resizable widget enables its content to be resizable in the UI.

Read Guides

See Also

ResponsiveBox

The ResponsiveBox widget allows you to create an application or a website with a layout adapted to different screen sizes.

Sankey

The Sankey is a widget that visualizes the flow magnitude between value sets. The values being connected are called nodes; the connections - links. The higher the flow magnitude, the wider the link is.

Scheduler

The Scheduler is a widget that represents scheduled data and allows a user to manage and edit it.

ScrollView

The ScrollView is a widget that enables a user to scroll its content.

SelectBox

The SelectBox widget is an editor that allows an end user to select an item from a drop-down list.

SlideOut

The SlideOut widget is a classic slide-out menu paired with a view. An end user opens the menu by swiping away the view.

SlideOutView

The SlideOutView widget is a classic slide-out menu paired with a view. This widget is very similar to the SlideOut with only one difference - the SlideOut always contains the List in the slide-out menu, while the SlideOutView can hold any collection there.

Read Guides

See Also

Slider

The Slider is a widget that allows an end user to set a numeric value on a continuous range of possible values.

Sortable

Sortable is a user interface utility that allows a widget's items to be reordered via drag and drop gestures.

Sparkline

The Sparkline widget is a compact chart that contains only one series. Owing to their size, sparklines occupy very little space and can be easily collected in a table or embedded straight in text.

SpeedDialAction

The SpeedDialAction is a button that performs a custom action. It can be represented by a Floating Action Button (FAB) or a button in a speed dial menu opened with the FAB.

When there is only one SpeedDialAction on a page, it is represented by a Floating Action Button (FAB).

When there are multiple SpeedDialActions, they are collected in a speed dial menu that can contain up to five actions. In this case, the FAB opens the menu. You can use the floatingActionButtonConfig object to change the maximum number of actions, and the FAB's position and icons in the opened and closed states.

Start Tutorial View Demo

See Also

Switch

The Switch is a widget that can be in two states: "On" and "Off".

TabPanel

The TabPanel is a widget consisting of the Tabs and MultiView widgets. It automatically synchronizes the selected tab with the currently displayed view and vice versa.

Tabs

The Tabs is a tab strip used to switch between pages or views. This widget is included in the TabPanel widget, but you can use the Tabs separately as well.

TagBox

The TagBox widget is an editor that allows an end user to select multiple items from a drop-down list.

TextArea

The TextArea is a widget that enables a user to enter and edit a multi-line text.

TextBox

The TextBox is a widget that enables a user to enter and edit a single line of text.

TileView

The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices.

Toast

The Toast is a widget that provides pop-up notifications.

Toolbar

The Toolbar is a widget containing items that usually manage screen content. Those items can be plain text or widgets.

Tooltip

The Tooltip widget displays a tooltip for a specified element on the page.

TreeList

The TreeList is a widget that represents data from a local or remote source in the form of a multi-column tree view. This widget offers such features as sorting, filtering, editing, selection, etc.

TreeMap

The TreeMap is a widget that displays hierarchical data by using nested rectangles.

In the TreeMap widget, hierarchical data is represented by a set of nested rectangles whose sizes are proportional to the visualized values. TreeMap operates with plain and hierarchical data sources. Also, it can visualize a hierarchy reconstructed from a flat data source.

TreeMap provides three layout algorithms out-of-the-box along with the capability to implement your own algorithm. In addition, the widget includes API methods that enable you to implement the drill down feature. Moreover, TreeMap supports all interactive features available in other DevExtreme Data Visualization Widgets: click, hover and selection.

View Demo

See Also

TreeView

The TreeView widget is a tree-like representation of textual data.

ValidationGroup

The ValidationGroup is a widget that allows you to validate several editors simultaneously.

Read Guides

NOTE
Nested validation groups are not supported.
See Also

ValidationSummary

A widget for displaying the result of checking validation rules for editors.

Validator

A widget that is used to validate the associated DevExtreme editors against the defined validation rules.

VectorMap

The VectorMap is a widget that visualizes geographical locations. This widget represents a geographical map that contains areas and markers. Areas embody continents and countries. Markers flag specific points on the map, for example, towns, cities or capitals.

Markup Components

This section describes components that can be used when defining a widget markup.

UI Events

The events used to handle user interaction with UI elements.

DevExtreme provides UI events for processing a user's interaction with a specific UI element. The DevExpress.events namespace exposes an API to work with the UI events.

The following code shows how to attach, trigger and then detach a dxhold event handler from a page element with the target ID. The timeout parameter specifies how long the target should be held to allow the handler to execute:

jQuery
JavaScript
var dxholdHandler = function(jQueryEvent) {
    alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
};

$("#target").on("dxhold", { timeout: 1000 }, dxholdHandler); 
$("#target").trigger("dxhold");
$("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

Angular
JavaScript
import { on, trigger, off } from "devextreme/events";
// ...
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`The ${event.target.textContent} element is being held for ${event.data.timeout} ms.`);
            return true; // true - continues event propagation, false - stops
        }
        const target: HTMLElement = document.getElementById("target");

        on(target, "dxhold", { timeout: 1000 }, dxholdHandler);
        trigger(target, "dxhold");
        off(target, "dxhold", dxholdHandler);
    }
}
Knockout
HTML
JavaScript
<div id="target" data-bind="dxhold: { execute: dxholdHandler, timeout: 1000 }">
    Target element
</div>
var viewModel = {
    dxholdHandler: function(viewModel, jQueryEvent) {
        alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
    }
}
NOTE
Knockout does not provide an API to unsubscribe from an event.

See Knockout documentation for details.

AngularJS
HTML
JavaScript
<div id="target" dx-hold="{ execute: 'dxholdHandler($event)', timeout: 1000 }">
    Target element
</div>
angular.module("DemoApp", ["dx"])
    .controller("DemoController", function DemoController($scope) {
        $scope.dxholdHandler = function(jQueryEvent) {
            alert(`The ${$(jQueryEvent.target).text()} element is being held for ${jQueryEvent.data.timeout} ms.`);
        }
    });
NOTE
AngularJS does not provide an API to unsubscribe from an event.

CSS Classes

This section describes the DevExtreme CSS classes you can use to define the appearance of an element.