Find Devextreme Ui Examples and Templates
Use this online devextreme-ui playground to view and fork devextreme-ui example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!
Customization - DevExtreme Sortable (forked)This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.
dropFeedbackMode
Specifies how to highlight the item's drop position.
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.
dragDirection
Specifies the directions in which an item can be dragged.
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport.
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation.
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Zooming and Scrolling - DevExtreme Charts (forked)In this demo, the visualRange property is used to zoom the chart initially. The zoomAndPan.argumentAxis property allows you to zoom and scroll the argument axis at runtime.
Zooming and scrolling are available on mouse-equipped and touch-enable devices: you can use the mouse wheel/spread and pinch gestures to zoom, and the scrollbar/drag gesture to scroll.
Error on filter data table (forked)Filter and search results depend on the filterMode property. The TreeList supports the following modes:
"matchOnly"
The results include only rows that meet the filter condition.
"withAncestors"
The results include rows that meet the filter condition and their ancestors.
"fullBranch"
The results include rows that meet the filter condition and their ancestors and descendants.
Customization - DevExtreme Sortable (forked)This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.
dropFeedbackMode
Specifies how to highlight the item's drop position.
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.
dragDirection
Specifies the directions in which an item can be dragged.
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport.
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation.
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Error on filter data tableFilter and search results depend on the filterMode property. The TreeList supports the following modes:
"matchOnly"
The results include only rows that meet the filter condition.
"withAncestors"
The results include rows that meet the filter condition and their ancestors.
"fullBranch"
The results include rows that meet the filter condition and their ancestors and descendants.
Customization - DevExtreme Sortable (forked)This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.
dropFeedbackMode
Specifies how to highlight the item's drop position.
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.
dragDirection
Specifies the directions in which an item can be dragged.
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport.
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation.
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Left or Right Position - DevExtreme Drawer (forked)Drawer is a dismissible or permanently visible panel that usually contains navigation elements.
To open or close the Drawer component in this demo, click the 'Hamburger' button. Each Drawer visibility change can adjust the layout in the following ways (see openedStateMode):
"push"
The Drawer partially displaces the view.
"shrink"
The view shrinks to accommodate the Drawer.
"overlap"
The Drawer overlaps the view.
Use the radio buttons at the bottom of this demo module to try different layout modes. You can also change the Drawer's position and revealMode properties.
Note this demo's markup. The Drawer definition encloses the view content (the formatted text). The Drawer's own content (navigation links) is set by the template property. Finally, the toolbar markup is separate from other elements.
To get started with the DevExtreme Drawer component, refer to the following step-by-step tutorial: Getting Started with Navigation Drawer.
Custom Data Source - DevExtreme Data Grid (forked)DevExtreme provides the CustomStore component to load and edit data from a custom data source. In this demo, the CustomStore fetches data from a custom remote server and displays it in the DataGrid.
The communication between the CustomStore and the server is organized as follows:
The CustomStore sends data processing settings to the server (see the load function in the code below).
The server applies these settings to data and returns the processed dataset (you should write the server-side code for this).
Each setting has information about a data operation (sorting, filtering, etc.) and is present only if this operation is declared as remote in the DataGrid's remoteOperations property. If your server does not support a certain operation, do not declare it as remote to perform it on the client.
For more information about the communication between the client and server in DevExtreme, refer to the following help topic: Server-Side Data Processing.
If your server does not support any data operations, set remoteOperations to false and implement the load function as described in the following help topic: Client-Side Data Processing.
Error on filter data table (forked)Filter and search results depend on the filterMode property. The TreeList supports the following modes:
"matchOnly"
The results include only rows that meet the filter condition.
"withAncestors"
The results include rows that meet the filter condition and their ancestors.
"fullBranch"
The results include rows that meet the filter condition and their ancestors and descendants.
Overview - DevExtreme Tag Box (forked)The TagBox allows users to select multiple items from a drop-down list. This demo illustrates the following TagBox properties:
items
An array of items displayed by the TagBox.
searchEnabled
Specifies whether the search is enabled.
showSelectionControls
Defines whether to display the selection controls.
applyValueMode
Specifies whether selected values are applied instantly or when a user clicks the OK button.
hideSelectedItems
Specifies whether the selected items are removed from the drop-down list.
multiline
Displays selected items on single or multiple lines.
acceptCustomValue
Specifies whether users can enter custom values. Requires that you also implement the onCustomItemCreating handler.
placeholder
Customizes the TagBox placeholder.
value
Specifies items the TagBox currently displays.
disabled
Defines whether the component responds to user interaction.
dataSource
Binds the TagBox to data. Unlike the items property, dataSource accepts the DataSource object that allows users to sort, filter, group, and shape data. Note that you cannot use items and dataSource simultaneously.
itemTemplate
Allows you to customize the drop-down list items.
To get started with the DevExtreme TagBox component, refer to the following tutorial for step-by-step instructions: Getting Started with TagBox.
Editing - DevExtreme Scheduler (forked)Scheduler allows users to add, update, resize, drag, and delete appointments. To control these operations, specify properties in the editing object. In this demo, you can use the checkboxes below the Scheduler to toggle the edit operations.
These operations raise events that you can handle with the following functions:
onAppointmentAdding / onAppointmentAdded
onAppointmentDeleting / onAppointmentDeleted
onAppointmentUpdating / onAppointmentUpdated
In this demo, we configured the handlers to display a toast message after a user performs an edit operation.
Users can edit appointment data in the appointment details form. To open it, they need to double-click the appointment. You can use the onAppointmentFormOpening function to customize the form.
Customization - DevExtreme Sortable (forked)This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.
dropFeedbackMode
Specifies how to highlight the item's drop position.
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.
dragDirection
Specifies the directions in which an item can be dragged.
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport.
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation.
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Customization - DevExtreme Sortable (forked)This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.
dropFeedbackMode
Specifies how to highlight the item's drop position.
itemOrientation
Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.
dragDirection
Specifies the directions in which an item can be dragged.
scrollSpeed
Specifies the scrolling speed when dragging an item beyond the viewport.
scrollSensivity
Specifies the distance in pixels from the edge of viewport at which scrolling should start.
The value should not be more than half the Sortable's height or width depending on items' orientation.
handle
Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.
dragTemplate
Specifies custom markup to be shown instead of the item being dragged.
Zooming and Scrolling - DevExtreme Charts (forked)In this demo, the visualRange property is used to zoom the chart initially. The zoomAndPan.argumentAxis property allows you to zoom and scroll the argument axis at runtime.
Zooming and scrolling are available on mouse-equipped and touch-enable devices: you can use the mouse wheel/spread and pinch gestures to zoom, and the scrollbar/drag gesture to scroll.