Vue 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 DxAccordion from "devextreme-vue/accordion"

Type: DxAccordionTypes.default

View Demo Read Guides

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 DxActionSheet from "devextreme-vue/action-sheet"

Type: DxActionSheetTypes.default

View Demo Read Guides

dxAutocomplete

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

import DxAutocomplete from "devextreme-vue/autocomplete"

Type: DxAutocompleteTypes.default

View Demo Read Guides

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 DxBox from "devextreme-vue/box"

Type: DxBoxTypes.default

View Demo Read Guides

dxButton

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

import DxButton from "devextreme-vue/button"

Type: DxButtonTypes.default

View Demo Read Guides

dxButtonGroup

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

import DxButtonGroup from "devextreme-vue/button-group"

Type: DxButtonGroupTypes.default

Start Tutorial View Demo

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 DxCalendar from "devextreme-vue/calendar"

Type: DxCalendarTypes.default

View Demo Read Guides

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 DxCheckBox from "devextreme-vue/check-box"

Type: DxCheckBoxTypes.default

View Demo Read Guides

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 DxColorBox from "devextreme-vue/color-box"

Type: DxColorBoxTypes.default

View Demo Read Guides

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 DxContextMenu from "devextreme-vue/context-menu"

Type: DxContextMenuTypes.default

View Demo Read Guides

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 DxDataGrid from "devextreme-vue/data-grid"

Type: DxDataGridTypes.default

View Demo Read Guides

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 DxDateBox from "devextreme-vue/date-box"

Type: DxDateBoxTypes.default

View Demo Read Guides

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 DxDeferRendering from "devextreme-vue/defer-rendering"

Type: DxDeferRenderingTypes.default

dxDiagram 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.

import DxDiagram from "devextreme-vue/diagram"

Type: DxDiagramTypes.default

Start Tutorial View Demo

dxDrawer

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

import DxDrawer from "devextreme-vue/drawer"

Type: DxDrawerTypes.default

Start Tutorial View Demo

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 DxDropDownBox from "devextreme-vue/drop-down-box"

Type: DxDropDownBoxTypes.default

View Demo Read Guides

dxDropDownButton

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

import DxDropDownButton from "devextreme-vue/drop-down-button"

Type: DxDropDownButtonTypes.default

Start Tutorial View Demo

dxFileManager 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.

import DxFileManager from "devextreme-vue/file-manager"

Type: DxFileManagerTypes.default

View Demo

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 DxFileUploader from "devextreme-vue/file-uploader"

Type: DxFileUploaderTypes.default

View Demo Read Guides

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 DxFilterBuilder from "devextreme-vue/filter-builder"

Type: DxFilterBuilderTypes.default

View Demo Read Guides

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 DxForm from "devextreme-vue/form"

Type: DxFormTypes.default

View Demo Read Guides

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 DxGallery from "devextreme-vue/gallery"

Type: DxGalleryTypes.default

View Demo Read Guides

dxHtmlEditor 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.

import DxHtmlEditor from "devextreme-vue/html-editor"

Type: DxHtmlEditorTypes.default

View Demo Read Guides

dxList

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

import DxList from "devextreme-vue/list"

Type: DxListTypes.default

View Demo Read Guides

dxLoadIndicator

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

import DxLoadIndicator from "devextreme-vue/load-indicator"

Type: DxLoadIndicatorTypes.default

View Demo Read Guides

dxLoadPanel

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

import DxLoadPanel from "devextreme-vue/load-panel"

Type: DxLoadPanelTypes.default

View Demo Read Guides

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 DxLookup from "devextreme-vue/lookup"

Type: DxLookupTypes.default

View Demo Read Guides

dxMap

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

import DxMap from "devextreme-vue/map"

Type: DxMapTypes.default

View Demo Read Guides

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 DxMenu from "devextreme-vue/menu"

Type: DxMenuTypes.default

View Demo Read Guides

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 DxMultiView from "devextreme-vue/multi-view"

Type: DxMultiViewTypes.default

View Demo Read Guides

dxNavBar

The NavBar is a widget that navigates the application views.

import DxNavBar from "devextreme-vue/nav-bar"

Type: DxNavBarTypes.default

View Demo Read Guides

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 DxNumberBox from "devextreme-vue/number-box"

Type: DxNumberBoxTypes.default

View Demo Read Guides

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 DxPivotGrid from "devextreme-vue/pivot-grid"

Type: DxPivotGridTypes.default

View Demo Read Guides

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 DxPivotGridFieldChooser from "devextreme-vue/pivot-grid-field-chooser"

Type: DxPivotGridFieldChooserTypes.default

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 DxPopover from "devextreme-vue/popover"

Type: DxPopoverTypes.default

View Demo Read Guides

dxPopup

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

import DxPopup from "devextreme-vue/popup"

Type: DxPopupTypes.default

View Demo Read Guides

dxProgressBar

The ProgressBar is a widget that shows current progress.

import DxProgressBar from "devextreme-vue/progress-bar"

Type: DxProgressBarTypes.default

View Demo Read Guides

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 DxRadioGroup from "devextreme-vue/radio-group"

Type: DxRadioGroupTypes.default

View Demo Read Guides

dxRangeSlider

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

import DxRangeSlider from "devextreme-vue/range-slider"

Type: DxRangeSliderTypes.default

View Demo Read Guides

dxResizable

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

import DxResizable from "devextreme-vue/resizable"

Type: DxResizableTypes.default

Read Guides

dxResponsiveBox

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

import DxResponsiveBox from "devextreme-vue/responsive-box"

Type: DxResponsiveBoxTypes.default

View Demo Read Guides

dxScheduler

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

import DxScheduler from "devextreme-vue/scheduler"

Type: DxSchedulerTypes.default

View Demo Read Guides

dxScrollView

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

import DxScrollView from "devextreme-vue/scroll-view"

Type: DxScrollViewTypes.default

View Demo Read Guides

dxSelectBox

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

import DxSelectBox from "devextreme-vue/select-box"

Type: DxSelectBoxTypes.default

View Demo Read Guides

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 DxSlideOut from "devextreme-vue/slide-out"

Type: DxSlideOutTypes.default

View Demo Read Guides

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 DxSlideOutView from "devextreme-vue/slide-out-view"

Type: DxSlideOutViewTypes.default

Read Guides

dxSlider

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

import DxSlider from "devextreme-vue/slider"

Type: DxSliderTypes.default

View Demo Read Guides

dxSpeedDialAction

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.

import DxSpeedDialAction from "devextreme-vue/speed-dial-action"

Type: DxSpeedDialActionTypes.default

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.

View Demo

dxSwitch

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

import DxSwitch from "devextreme-vue/switch"

Type: DxSwitchTypes.default

View Demo Read Guides

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 DxTabPanel from "devextreme-vue/tab-panel"

Type: DxTabPanelTypes.default

View Demo Read Guides

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 DxTabs from "devextreme-vue/tabs"

Type: DxTabsTypes.default

View Demo Read Guides

dxTagBox

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

import DxTagBox from "devextreme-vue/tag-box"

Type: DxTagBoxTypes.default

View Demo Read Guides

dxTextArea

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

import DxTextArea from "devextreme-vue/text-area"

Type: DxTextAreaTypes.default

View Demo Read Guides

dxTextBox

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

import DxTextBox from "devextreme-vue/text-box"

Type: DxTextBoxTypes.default

View Demo Read Guides

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 DxTileView from "devextreme-vue/tile-view"

Type: DxTileViewTypes.default

View Demo Read Guides

dxToast

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

import DxToast from "devextreme-vue/toast"

Type: DxToastTypes.default

View Demo Read Guides

dxToolbar

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

import DxToolbar from "devextreme-vue/toolbar"

Type: DxToolbarTypes.default

View Demo Read Guides

dxTooltip

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

import DxTooltip from "devextreme-vue/tooltip"

Type: DxTooltipTypes.default

View Demo Read Guides

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 DxTreeList from "devextreme-vue/tree-list"

Type: DxTreeListTypes.default

View Demo Read Guides

dxTreeView

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

import DxTreeView from "devextreme-vue/tree-view"

Type: DxTreeViewTypes.default

View Demo Read Guides

dxValidationGroup

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

import DxValidationGroup from "devextreme-vue/validation-group"

Type: DxValidationGroupTypes.default

View Demo Read Guides

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.

NOTE

Nested validation groups are not supported.

dxValidationSummary

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

import DxValidationSummary from "devextreme-vue/validation-summary"

Type: DxValidationSummaryTypes.default

View Demo Read Guides

dxValidator

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

import DxValidator from "devextreme-vue/validator"

Type: DxValidatorTypes.default

View Demo Read Guides

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:

jQuery

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.

Angular

JavaScript

import { on, trigger, off } from "devextreme/events";
// ...
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        const dxholdHandler = (event) => {
            alert(`The ${event.target.textContent} element was 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 was 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 was 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.

Vue UI Widgets

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

dxDiagram CTP

See Also

See Also

See Also

See Also

dxFileManager CTP

See Also

See Also

See Also

See Also

dxHtmlEditor CTP

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

See Also

jQuery

Angular

Knockout

AngularJS