jQuery/JS UI Widgets

dxAccordion

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.

import Accordion from "devextreme/ui/accordion"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#accordion").dxAccordion({
  • dataSource: [
  • { title: "Panel 1 Title", text: "Panel 1 Text Content" },
  • { title: "Panel 2 Title", text: "Panel 2 Text Content" }
  • ],
  • collapsible: true,
  • multiple: true
  • });
  • });
  • <div id="accordion"></div>

View Demo Watch Video

See Also

dxActionSheet

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.

import ActionSheet from "devextreme/ui/action_sheet"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#actionSheet").dxActionSheet({
  • dataSource: [
  • { text: "Command 1" },
  • { text: "Command 2" },
  • { text: "Command 3" },
  • { text: "Command 4" }
  • ],
  • visible: true,
  • onItemClick: function (e) {
  • alert("The " + e.itemData.text + " button was clicked");
  • }
  • });
  • });
  • <div id="actionSheet"></div>

View Demo

See Also

dxAutocomplete

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

import Autocomplete from "devextreme/ui/autocomplete"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#autocomplete").dxAutocomplete({
  • dataSource: [ "Item 1", "Item 2", "Item 3" ],
  • placeholder: "Type item name..."
  • });
  • });
  • <div id="autocomplete"></div>

View Demo

See Also

dxBox

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.

import Box from "devextreme/ui/box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
  • <div id="box">
  • <div id="item1" data-options="dxItem: { ratio: 1, baseSize: 10 }">
  • <p>Item 1</p>
  • </div>
  • <div id="item2" data-options="dxItem: { ratio: 3, baseSize: 40 }">
  • <p>Item 2</p>
  • </div>
  • <div id="item3" data-options="dxItem: { ratio: 2, baseSize: 20 }">
  • <p>Item 3</p>
  • </div>
  • </div>
  • $(function () {
  • $("#box").dxBox({
  • direction: "row",
  • height: "70%",
  • width: "90%"
  • });
  • });

View Demo Watch Video

See Also

dxButton

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

import Button from "devextreme/ui/button"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#button").dxButton({
  • text: "Click me",
  • onClick: function() {
  • alert("The Button was clicked");
  • }
  • });
  • });
  • <div id="button"></div>

View Demo

See Also

dxButtonGroup

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

import ButtonGroup from "devextreme/ui/button_group"
Type:

Object

dxCalendar

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

import Calendar from "devextreme/ui/calendar"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#calendar").dxCalendar({
  • min: new Date(2000, 1, 1),
  • max: new Date(2029, 12, 31),
  • firstDayOfWeek: 1,
  • value: new Date()
  • });
  • });
  • <div id="calendar"></div>

View Demo Watch Video

See Also

dxCheckBox

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.

import CheckBox from "devextreme/ui/check_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#checkBox").dxCheckBox({
  • text: "Toggle me",
  • value: undefined,
  • onValueChanged: function (e) {
  • alert(e.value);
  • }
  • });
  • });
  • <div id="checkBox"></div>

View Demo

See Also

dxColorBox

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

import ColorBox from "devextreme/ui/color_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#colorBox").dxColorBox({
  • value: "rgba(255, 144, 0, 0.3)",
  • editAlphaChannel: true
  • });
  • });
  • <div id="colorBox"></div>

View Demo

See Also

dxContextMenu

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.

import ContextMenu from "devextreme/ui/context_menu"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#contextMenu").dxContextMenu({
  • items: [
  • { text: "Hide" },
  • { text: "Delete" },
  • {
  • text: "Clipboard",
  • items: [
  • { text: "Copy" },
  • { text: "Clear" },
  • { text: "Paste" }
  • ]
  • }
  • ],
  • target: "#targetElement"
  • });
  • });
  • <div id="targetElement"></div>
  • <div id="contextMenu"></div>

View Demo

See Also

dxDataGrid

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.

import DataGrid from "devextreme/ui/data_grid"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#dataGrid").dxDataGrid({
  • dataSource: [{
  • ID: 1,
  • CompanyName: "Super Mart of the West",
  • City: "Bentonville",
  • State: "Arkansas"
  • }, {
  • ID: 2,
  • CompanyName: "Electronics Depot",
  • City: "Atlanta",
  • State: "Georgia"
  • }],
  • keyExpr: "ID",
  • columns: ["CompanyName", "City", "State"]
  • });
  • });
  • <div id="dataGrid"></div>
See Also

View Demo Watch Video

dxDateBox

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.

import DateBox from "devextreme/ui/date_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#dateBox").dxDateBox({
  • min: new Date(2000, 0, 1),
  • max: new Date(2029, 11, 31),
  • value: new Date()
  • });
  • });
  • <div id="dateBox"></div>

View Demo

See Also

dxDeferRendering

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.

import DeferRendering from "devextreme/ui/defer_rendering"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
  • <div id="deferRendering">
  • <!-- Widget content -->
  • </div>
  • var readyToRender = $.Deferred();
  • // Here goes a function that resolves the "readyToRender" Deferred object at a specific moment
  • // ...
  • $(function () {
  • $("#deferRendering").dxDeferRendering({
  • renderWhen: readyToRender.promise();
  • });
  • });
See Also

dxDrawer

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

import Drawer from "devextreme/ui/drawer"
Type:

Object

dxDropDownBox

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

import DropDownBox from "devextreme/ui/drop_down_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • var fruits = ["Apples", "Oranges", "Lemons", "Pears", "Pineapples"];
  • $("#dropDownBox").dxDropDownBox({
  • value: fruits[0],
  • dataSource: fruits,
  • contentTemplate: function (e) {
  • var $list = $("<div>").dxList({
  • dataSource: fruits,
  • selectionMode: "single",
  • onSelectionChanged: function (args) {
  • e.component.option("value", args.addedItems[0]);
  • e.component.close();
  • }
  • });
  • return $list;
  • }
  • });
  • });
  • <div id="dropDownBox"></div>

View Demo Watch Video

dxFileUploader

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.

import FileUploader from "devextreme/ui/file_uploader"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#fileUploader").dxFileUploader({
  • accept:"image/*"
  • });
  • });
  • <div id="fileUploader"></div>

View Demo Watch Video

See Also

dxFilterBuilder

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.

import FilterBuilder from "devextreme/ui/filter_builder"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#filterBuilder").dxFilterBuilder({
  • value: ["Category", "contains", "Tel"],
  • fields: [{
  • dataField: "Category"
  • }, {
  • dataField: "Shipped",
  • caption: "Shipment Date",
  • dataType: "date"
  • }, {
  • dataField: "UnitPrice",
  • dataType: "number"
  • }]
  • });
  • });
  • <div id="filterBuilder"></div>
See Also

dxForm

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.

import Form from "devextreme/ui/form"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • var companyData = {
  • id: 1,
  • name: "Super Mart of the West",
  • city: "Bentonville",
  • state: "Arkansas",
  • zip: 72716,
  • phone: "(800) 555-2797",
  • fax: "(800) 555-2171",
  • website: "http://www.nowebsite.com"
  • };
  • $(function () {
  • $("#form").dxForm({
  • formData: companyData,
  • items: [
  • "name", {
  • itemType: "group",
  • caption: "Location",
  • items: ["city", "state", "zip"]
  • }, {
  • itemType: "group",
  • caption: "Contacts",
  • items: ["phone", "fax", "website"]
  • }
  • ]
  • });
  • });
  • <div id="form"></div>
See Also

dxGallery

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.

import Gallery from "devextreme/ui/gallery"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#gallery").dxGallery({
  • dataSource: [
  • "http://path/to/image/1.png",
  • "http://path/to/image/2.png",
  • "http://path/to/image/3.png"
  • ],
  • height: 300
  • });
  • });
  • <div id="gallery"></div>

View Demo

See Also

dxHtmlEditor CTP

HtmlEditor is a WYSIWYG text editor build on top of Quill, designed to support HTML and Markdown output formats.

HtmlEditor is at the Community Technology Preview (CTP) development stage. That means that the widget is available for testing, but its concept, design and behavior can be reconsidered and changed without notice.

import HtmlEditor from "devextreme/ui/html_editor"
Type:

Object

NOTE
The HtmlEditor requires the Quill library.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#htmlEditorContainer").dxHtmlEditor({
  • valueType: "html",
  • toolbar: {
  • items: [
  • "bold", "italic", "separator", {
  • formatName: "size",
  • formatValues: ["11px", "12px", "16px"]
  • }, "separator",
  • "alignLeft", "alignCenter", "alignRight"
  • ]
  • }
  • })
  • })
  • <head>
  • <!-- ... -->
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.common.css">
  • <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/18.2.18/css/dx.light.css">
  • <script type="text/javascript" src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
  • <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/18.2.18/js/dx.all.js"></script>
  • </head>
  • <body>
  • <div id="htmlEditorContainer">
  • <p>
  • <b>Lorem ipsum dolor sit amet</b>,
  • <i>consectetur adipiscing elit</i>,
  • sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  • </p>
  • </div>
  • </body>

View Demo

See Also

dxList

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

import List from "devextreme/ui/list"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#list").dxList({
  • dataSource: [ "Item 1", "Item 2", "Item 3" ],
  • searchEnabled: true
  • });
  • });
  • <div id="list"></div>
See Also

View Demo

dxLoadIndicator

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

import LoadIndicator from "devextreme/ui/load_indicator"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#loadIndicator").dxLoadIndicator({
  • visible: true
  • });
  • });
  • <div id="loadIndicator"></div>

View Demo

See Also

dxLoadPanel

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

import LoadPanel from "devextreme/ui/load_panel"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#loadPanel").dxLoadPanel({
  • closeOnOutsideClick: true,
  • visible: true
  • });
  • });
  • <div id="loadPanel"></div>

View Demo

See Also

dxLookup

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

import Lookup from "devextreme/ui/lookup"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#lookup").dxLookup({
  • dataSource: [ "Item 1", "Item 2", "Item 3" ],
  • placeholder: "Select an item"
  • });
  • });
  • <div id="lookup"></div>
See Also

View Demo

dxMap

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

import Map from "devextreme/ui/map"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#map").dxMap({
  • provider: "bing",
  • type: "roadmap",
  • zoom: 10,
  • center: "40.749825, -73.987963"
  • });
  • });
  • <div id="map"></div>
See Also

View Demo

dxMenu

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

import Menu from "devextreme/ui/menu"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#menu").dxMenu({
  • items: [
  • { text: "Hide" },
  • { text: "Delete" },
  • {
  • text: "Clipboard",
  • items: [
  • { text: "Copy" },
  • { text: "Clear" },
  • { text: "Paste" }
  • ]
  • }
  • ]
  • });
  • });
  • <div id="menu"></div>

View Demo Watch Video

See Also

dxMultiView

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

import MultiView from "devextreme/ui/multi_view"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#multiView").dxMultiView({
  • items: [
  • { text: "View 1" },
  • { text: "View 2" },
  • { text: "View 3" }
  • ]
  • });
  • });
  • <div id="multiView"></div>

View Demo

See Also

dxNavBar

The NavBar is a widget that navigates the application views.

import NavBar from "devextreme/ui/nav_bar"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#navBar").dxNavBar({
  • items: [
  • { text: "Home", icon: "home" },
  • { text: "About", icon: "info" },
  • { text: "Favorites", icon: "favorites", badge: "new" }
  • ]
  • });
  • });
  • <div id="navBar"></div>

View Demo

See Also

dxNumberBox

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.

import NumberBox from "devextreme/ui/number_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#numberBox").dxNumberBox({
  • value: 20,
  • min: 16,
  • max: 100,
  • placeholder: "Enter your age"
  • });
  • });
  • <div id="numberBox"></div>

View Demo

See Also

dxPanorama Deprecated

NOTE
The Panorama widget is deprecated since v18.1. We recommend using the TabPanel or MultiView widget instead.

The Panorama widget is a full-screen widget that allows you to arrange items on a long horizontal canvas split into several views. Each view contains several items, and an end user navigates the views with the swipe gesture. The Panorama is often used as a navigation map on the first page of an application.

import Panorama from "devextreme/ui/panorama"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
CSS
  • $(function () {
  • $("#panorama").dxPanorama({
  • items: [{
  • title: "Item 1 Title",
  • text: "Item 1 Text Content"
  • }, {
  • title: "Item 2 Title",
  • text: "Item 2 Text Content"
  • }],
  • backgroundImage: {
  • url: "/here/goes/your/image.png",
  • height: 600,
  • width: 800
  • }
  • });
  • });
  • <div id="panorama"></div>
  • #panorama {
  • height: auto;
  • position: absolute;
  • top: 0;
  • bottom: 0;
  • width: 100%;
  • }
See Also

dxPivot Deprecated

NOTE
The Pivot widget is deprecated since v18.1. We recommend using the TabPanel widget instead.

The Pivot provides a quick way to manage multiple views. It includes a collection of views and a navigation header. An end user switches the views by swiping them or by clicking their titles on the navigation header.

import Pivot from "devextreme/ui/pivot"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#pivot").dxPivot({
  • items: [{
  • title: "Item 1 Title",
  • text: "Item 1 Text Content"
  • }, {
  • title: "Item 2 Title",
  • text: "Item 2 Text Content"
  • }, {
  • title: "Item 3 Title",
  • text: "Item 3 Text Content"
  • }],
  • height: 300
  • });
  • });
  • <div id="pivot"></div>
See Also

dxPivotGrid

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

import PivotGrid from "devextreme/ui/pivot_grid"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#pivotGrid").dxPivotGrid({
  • dataSource: {
  • store: {
  • type: "odata",
  • url: "http://url/to/the/service",
  • key: "OrderID",
  • keyType: "Int32"
  • },
  • fields: [
  • { area: "column", dataField: "OrderDate", dataType: "date" },
  • { area: "row", dataField: "ShipCountry" },
  • { area: "row", dataField: "ShipCity" },
  • { area: "row", dataField: "ShipName" },
  • { area: "data", summaryType: "count" }
  • ]
  • }
  • });
  • });
  • <div id="pivotGrid"></div>

To provide data for the PivotGrid widget, specify a data source. PivotGrid accepts the PivotGridDataSource data source only. You can pass its configuration to the dataSource field without creating the separate PivotGridDataSource object as shown above.

View Demo Watch Video

dxPivotGridFieldChooser

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.

import PivotGridFieldChooser from "devextreme/ui/pivot_grid_field_chooser"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
  • // ...
  • });
  • $(function () {
  • $("#fieldChooser").dxPivotGridFieldChooser({
  • dataSource: pivotGridDataSource
  • });
  • $("#pivotGrid").dxPivotGrid({
  • dataSource: pivotGridDataSource
  • });
  • });
  • <div id="fieldChooser"></div>
  • <div id="pivotGrid"></div>

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

dxPopover

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

import Popover from "devextreme/ui/popover"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
  • <div id="targetElement"></div>
  • <div id="popover">
  • <p>Popover content</p>
  • </div>
  • $(function () {
  • $("#popover").dxPopover({
  • target: "#targetElement",
  • showEvent: 'dxhoverstart',
  • hideEvent: 'dxhoverend'
  • });
  • });

View Demo Watch Video

See Also

dxPopup

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

import Popup from "devextreme/ui/popup"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
  • <div id="popup">
  • <p>Popup content</p>
  • </div>
  • $(function () {
  • $("#popup").dxPopup({
  • title: "Popup Title",
  • visible: true
  • });
  • });

View Demo

See Also

dxProgressBar

The ProgressBar is a widget that shows current progress.

import ProgressBar from "devextreme/ui/progress_bar"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#progressBar").dxProgressBar({
  • min: 0,
  • max: 100,
  • value: 49
  • });
  • });
  • <div id="progressBar"></div>

View Demo

See Also

dxRadioGroup

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.

import RadioGroup from "devextreme/ui/radio_group"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • var radioGroupItems = [
  • { text: "Item 1", color: "grey" },
  • { text: "Item 2", color: "green" },
  • { text: "Item 3", color: "yellow" },
  • { text: "Item 4", color: "red" }
  • ];
  • $(function () {
  • $("#radioGroup").dxRadioGroup({
  • dataSource: radioGroupItems,
  • displayExpr: "text",
  • valueExpr: "color",
  • value: "green"
  • });
  • });
  • <div id="radioGroup"></div>

View Demo Watch Video

See Also

dxRangeSlider

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

import RangeSlider from "devextreme/ui/range_slider"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#rangeSlider").dxRangeSlider({
  • min: 0, max: 100,
  • start: 20, end: 60
  • });
  • });
  • <div id="rangeSlider"></div>

View Demo

See Also

dxResizable

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

import Resizable from "devextreme/ui/resizable"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
CSS
  • $(function() {
  • $("#resizable").dxResizable({
  • width: 200,
  • height: 200,
  • minWidth: 30,
  • minHeight: 30,
  • maxWidth: 500,
  • maxHeight: 500
  • });
  • });
  • <div id="resizable">
  • <div id="content"></div>
  • </div>
  • #content {
  • height: 100%;
  • width: 100%
  • }
See Also

dxResponsiveBox

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

import ResponsiveBox from "devextreme/ui/responsive_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
CSS
  • <html style="height:100%">
  • <!-- ... -->
  • </html>
  • <body style="height:100%">
  • <div id="responsiveBox">
  • <div class="header" data-options="dxItem: {
  • location: [
  • { row: 0, col: 0 }
  • ]
  • }"> <p>Header</p> </div>
  • <div class="content" data-options="dxItem: {
  • location: [
  • { row: 1, col: 0 }
  • ]
  • }"> <p>Content</p> </div>
  • <div class="footer" data-options="dxItem: {
  • location: [
  • { row: 2, col: 0 }
  • ]
  • }"> <p>Footer</p> </div>
  • </div>
  • </body>
  • $(function () {
  • $("#responsiveBox").dxResponsiveBox({
  • rows: [
  • { ratio: 1 },
  • { ratio: 2 },
  • { ratio: 0.7 }
  • ],
  • cols: [
  • { ratio: 1 }
  • ]
  • });
  • });
  • #responsiveBox p {
  • font-size: 16px;
  • padding-top: 10px;
  • text-align: center;
  • }
  • .header { background: #f39e6c }
  • .content { background: #f5e5a6 }
  • .footer { background: #7b9bcf }

View Demo Watch Video

See Also

dxScheduler

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

import Scheduler from "devextreme/ui/scheduler"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#scheduler").dxScheduler({
  • dataSource: [{
  • text: "Meeting customers",
  • startDate: new Date(2015, 4, 10, 11, 0),
  • endDate: new Date(2015, 4, 10, 13, 0)
  • }, {
  • text: "Summing up the results",
  • startDate: new Date(2015, 4, 11, 12, 0),
  • endDate: new Date(2015, 4, 11, 13, 0)
  • },
  • // ...
  • ],
  • currentDate: new Date(2015, 4, 10),
  • startDayHour: 8,
  • endDayHour: 19
  • });
  • });
  • <div id="scheduler">
See Also

View Demo Watch Video

dxScrollView

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

import ScrollView from "devextreme/ui/scroll_view"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#scrollView").dxScrollView({
  • height: 500,
  • width: 500,
  • direction: "both"
  • });
  • });
  • <div id="scrollView">
  • <div id="content"></div>
  • </div>

View Demo

See Also

dxSelectBox

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

import SelectBox from "devextreme/ui/select_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#selectBox").dxSelectBox({
  • dataSource: [ "Item 1", "Item 2", "Item 3" ],
  • searchEnabled: true
  • });
  • });
  • <div id="selectBox"></div>

View Demo

See Also

dxSlideOut

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

import SlideOut from "devextreme/ui/slide_out"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
CSS
  • $(function () {
  • $("#slideOut").dxSlideOut({
  • dataSource: [ "Item 1", "Item 2", "Item 3", "Item 4" ],
  • onItemClick: function (e) {
  • e.component.hideMenu();
  • }
  • });
  • });
  • <div id="slideOut"></div>
  • #slideOut {
  • height: auto;
  • position: absolute;
  • top: 0;
  • bottom: 0;
  • width: 100%;
  • }

View Demo

See Also

dxSlideOutView

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.

import SlideOutView from "devextreme/ui/slide_out_view"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
CSS
  • <div id="slideOutView">
  • <div data-options="dxTemplate: { name: 'view' }">
  • <p>View content</p>
  • </div>
  • <div data-options="dxTemplate: { name: 'menu' }">
  • <p>Menu content</p>
  • </div>
  • </div>
  • $(function () {
  • $("#slideOutView").dxSlideOutView({
  • contentTemplate: "view",
  • menuTemplate: "menu",
  • });
  • });
  • #slideOutView {
  • height: auto;
  • position: absolute;
  • top: 0;
  • bottom: 0;
  • width: 100%;
  • }
See Also

dxSlider

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

import Slider from "devextreme/ui/slider"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#slider").dxSlider({
  • min: 0, max: 100,
  • value: 25
  • });
  • });
  • <div id="slider"></div>

View Demo

See Also

dxSwitch

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

import Switch from "devextreme/ui/switch"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#switch").dxSwitch({
  • value: true
  • });
  • });
  • <div id="switch"></div>

View Demo

See Also

dxTabPanel

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.

import TabPanel from "devextreme/ui/tab_panel"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • var tabs = [{
  • title: 'Tab 1 Title',
  • text: 'Tab 1 Text Content'
  • }, {
  • title: 'Tab 2 Title',
  • text: 'Tab 2 Text Content'
  • }, {
  • title: 'Tab 3 Title',
  • text: 'Tab 3 Text Content'
  • }];
  • $(function () {
  • $("#tabPanel").dxTabPanel({
  • items: tabs
  • });
  • });
  • <div id="tabPanel"></div>

View Demo Watch Video

See Also

dxTabs

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.

import Tabs from "devextreme/ui/tabs"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • var tabs = [
  • { text: "User", icon: "user" },
  • { text: "Comment", icon: "comment" },
  • { text: "Find", icon: "find", badge: "new" }
  • ];
  • $(function () {
  • $("#tabs").dxTabs({
  • items: tabs
  • });
  • });
  • <div id="tabs"></div>

View Demo

See Also

dxTagBox

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

import TagBox from "devextreme/ui/tag_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#tagBox").dxTagBox({
  • dataSource: [ "Item 1", "Item 2", "Item 3" ],
  • maxDisplayedTags: 2
  • });
  • });
  • <div id="tagBox"></div>

View Demo Watch Video

See Also

dxTextArea

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

import TextArea from "devextreme/ui/text_area"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#textArea").dxTextArea({
  • placeholder: "Type a text here..."
  • });
  • });
  • <div id="textArea"></div>

View Demo

See Also

dxTextBox

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

import TextBox from "devextreme/ui/text_box"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#textBox").dxTextBox({
  • placeholder: "Type a text here..."
  • });
  • });
  • <div id="textBox"></div>

View Demo

See Also

dxTileView

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.

import TileView from "devextreme/ui/tile_view"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#tileView").dxTileView({
  • dataSource: [
  • { text: "Tile 1 Text" },
  • { text: "Tile 2 Text" },
  • { text: "Tile 3 Text" }
  • ],
  • baseItemHeight: 130,
  • baseItemWidth: 180
  • });
  • });
  • <div id="tileView">

View Demo

See Also

dxToast

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

import Toast from "devextreme/ui/toast"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#toast").dxToast({
  • message: "Connection problem",
  • type: "error",
  • displayTime: 3000
  • });
  • $("#button").dxButton({
  • text: "Show the Toast",
  • onClick: function () {
  • $("#toast").dxToast("show");
  • }
  • });
  • });
  • <div id="toast"></div>
  • <div id="button"></div>

View Demo

See Also

dxToolbar

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

import Toolbar from "devextreme/ui/toolbar"
Type:

Object

The main option you should specify when creating a widget is the dataSource. The following code snippet demonstrates an example of an array that can be passed to the dataSource option of the Toolbar widget.

JavaScript
  • var toolbarItems = [{
  • widget: "dxButton",
  • options: {
  • type: "back",
  • text: "Back"
  • },
  • location: "before"
  • }, {
  • text: "Add",
  • locateInMenu: "always"
  • }, {
  • text: "Change",
  • locateInMenu: "always"
  • }, {
  • text: "Products",
  • location: "center"
  • }];

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#toolbar").dxToolbar({
  • items: toolbarItems
  • });
  • });
  • <div id="toolbar"></div>

View Demo

See Also

dxTooltip

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

import Tooltip from "devextreme/ui/tooltip"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

HTML
JavaScript
  • <div id="targetElement"></div>
  • <div id="tooltip">
  • <p>Tooltip content</p>
  • </div>
  • $(function () {
  • $("#tooltip").dxTooltip({
  • target: "#targetElement",
  • showEvent: "dxhoverstart",
  • hideEvent: "dxhoverend"
  • });
  • });

View Demo Watch Video

See Also

dxTreeList

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.

import TreeList from "devextreme/ui/tree_list"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#treeList").dxTreeList({
  • dataSource: [
  • { key: "1", fullName: "John Heart", position: "CEO" },
  • { key: "1_1", head: "1", fullName: "Samantha Bright", position: "COO" },
  • { key: "2_1", head: "2", fullName: "Robert Reagan", position: "CMO" },
  • { key: "2", fullName: "Greta Sims", position: "HR Manager" }
  • ],
  • keyExpr: "key",
  • parentIdExpr: "head",
  • columns: ["fullName", "position"]
  • });
  • });
  • <div id="treeList"></div>

View Demo Watch Video

See Also

dxTreeView

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

import TreeView from "devextreme/ui/tree_view"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function () {
  • $("#treeView").dxTreeView({
  • dataSource: [
  • { id: "1", text: "Item 1" },
  • { id: "1_1", text: "Subitem 1.1", parentId: "1" },
  • { id: "1_2", text: "Subitem 1.2", parentId: "1" },
  • { id: "2", text: "Item 2" },
  • { id: "2_1", text: "Subitem 2.1", parentId: "2" },
  • { id: "2_2", text: "Subitem 2.2", parentId: "2" }
  • ],
  • dataStructure: "plain"
  • });
  • });
  • <div id="treeView"></div>
NOTE
The TreeView widget requires each data source item to contain at least a key field. Thus, the widget does not support data sources consisting of value items.

View Demo Watch Video

See Also

dxValidationGroup

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

import ValidationGroup from "devextreme/ui/validation_group"
Type:

Object

NOTE
Nested validation groups are not supported.

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • var validationGroupName = "sampleGroup";
  • $("#textBox1").dxTextBox({ name: "FirstName" })
  • .dxValidator({
  • validationRules: [
  • // ...
  • ],
  • validationGroup: validationGroupName
  • });
  • $("#textBox2").dxTextBox({ name: "LastName" })
  • .dxValidator({
  • validationRules: [
  • // ...
  • ],
  • validationGroup: validationGroupName
  • });
  • $("#summary").dxValidationSummary({
  • validationGroup: validationGroupName
  • });
  • $("#button").dxButton({
  • validationGroup: validationGroupName
  • //...
  • });
  • });
  • <div id="textBox1"></div>
  • <div id="textBox2"></div>
  • <div id="summary"></div>
  • <div id="button"></div>
See Also

You can use the DevExpress.validationEngine.validateGroup(group) method to validate a particular validation group by passing its instance as a parameter.

JavaScript
  • DevExpress.validationEngine.validateGroup($("#sampleGroup").dxValidationGroup("instance"));

In addition, you can access a validation group's configuration using the DevExpress.validationEngine.getGroupConfig(group) method. The returned configuration exposes the validators included to the group, the validate() method to validate the editors that are associated with the validators and the validated event that occurs after the group is validated.

Watch Video

dxValidationSummary

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

import ValidationSummary from "devextreme/ui/validation_summary"
Type:

Object

This widget has a collection of items that present the validation errors that currently exist in a validation group or the ViewModel to which the widget is related.

dxValidationSummary Widget

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • var validationGroupName = "sampleGroup";
  • $("#textBox1").dxTextBox({ name: "FirstName" })
  • .dxValidator({
  • validationRules: [
  • // ...
  • ],
  • validationGroup: validationGroupName
  • });
  • $("#textBox2").dxTextBox({ name: "LastName" })
  • .dxValidator({
  • validationRules: [
  • // ...
  • ],
  • validationGroup: validationGroupName
  • });
  • $("#summary").dxValidationSummary({
  • validationGroup: validationGroupName
  • });
  • $("#button").dxButton({
  • validationGroup: validationGroupName,
  • text: "Validate",
  • onClick: function validate (params) {
  • params.validationGroup.validate();
  • }
  • });
  • });
  • <div id="textBox1"></div>
  • <div id="textBox2"></div>
  • <div id="summary"></div>
  • <div id="button"></div>

The summary items are displayed using the default item template that is based on the message field of the broken validation rule. However, you can use a custom item template.

See Also
NOTE
The currently existing validation errors are not only the errors that are discovered during the current validation, but also the validation errors that are discovered during the earlier validations if the not-valid values are not changed since then.

To learn more on how to create the ValidationSummary widget and associate it with the required validation group or ViewModel, refer to the Display Validation Errors and Knockout Only - Validate a View Model topics.

Watch Video

See Also

dxValidator

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

import Validator from "devextreme/ui/validator"
Type:

Object

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the {WidgetName} widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

JavaScript
HTML
  • $(function() {
  • $("#textBox1").dxTextBox({ })
  • .dxValidator({
  • validationRules: [
  • // ...
  • ]
  • });
  • });
  • <div id="textBox1"></div>
See Also

The learn the validation rules that can be defined using the Validator widget for an editor, refer to the Validation Rules section.

The editors that are associated with the Validator widgets are automatically validated against the specified rules each time the event assigned to the editor's valueChangeEvent option occurs. In addition, several editors can be validated at once. To learn how to do this, refer to the Validate Several Editor Values topic.

See Also

View Demo Watch Video

Errors and Warnings

This section lists errors and warnings that may occur in UI widgets.

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.

Name Description
dxclick

Raised when the element is clicked.

dxcontextmenu

Raised when the right mouse button is clicked on the element or when the element is held during a specified time period.

dxdblclick

Raised when a user has performed a double click on the element.

dxdrag

Raised when the drag gesture has been performed.

dxdragend

Raised when the drag gesture has been completed.

dxdragenter

Raised when a user moves the pointer into the element, provided that the drag gesture is being performed.

dxdragleave

Raised when a user moves the pointer out of the element, provided that the drag gesture is being performed.

dxdragstart

Raised when the drag gesture has been started.

dxdrop

Raised when dragged data has been dropped on the element.

dxhold

Raised when the element was held for a specified time. The default time interval is 750 ms.

dxhoverend

Raised when the mouse pointer leaves the element.

dxhoverstart

Raised when the mouse pointer appears over the element.

dxpinch

Raised when the pinch gesture has been performed.

dxpinchend

Raised when the pinch gesture has been completed.

dxpinchstart

Raised when the pinch gesture has been started.

dxpointercancel

Raised when the browser decides that the pointer is unlikely to produce any more events.

dxpointerdown

Raised when the pointer takes on the active buttons state.

dxpointerenter

Raised when a pointer is moved to either the hit test area of an element or one of its descendants.

dxpointerleave

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

dxpointermove

Raised when any pointer parameter has been changed. (Position, tilt, pressure, button state, or contact geometry).

dxpointerout

Raised when a pointer is moved from either the hit test area of an element or one of its descendants.

dxpointerover

Raised when a pointer is moved to the hit test area of an element or one of its descendants.

dxpointerup

Raised when the pointer loses the active buttons state.

dxremove

Raised when a widget associated with an element is being removed from the DOM.

dxrotate

Raised when the rotate gesture has been performed.

dxrotateend

Raised when the rotate gesture has been completed.

dxrotatestart

Raised when the rotate gesture has been started.

dxswipe

Raised when the swipe gesture has been performed.

dxswipeend

Raised when the swipe gesture is finished.

dxswipestart

Raised when the swipe gesture is started.

dxtransform

Raised when the transform gesture has been performed.

dxtransformend

Raised when the transform gesture has been completed.

dxtransformstart

Raised when the transform gesture has been started.

dxtranslate

Raised when the translate gesture has been performed.

dxtranslateend

Raised when the translate gesture has been completed.

dxtranslatestart

Raised when the translate gesture has been started.

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:

JavaScript
  • var dxholdHandler = function(jQueryEvent) {
  • alert(`The ${$(jQueryEvent.target).text()} element was held for ${jQueryEvent.data.timeout} ms.`);
  • };
  •  
  • $("#target").on("dxhold", { timeout: 1000 }, dxholdHandler);
  • $("#target").trigger("dxhold");
  • $("#target").off("dxhold", dxholdHandler);

See jQuery documentation for details.

CSS Classes

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