Find @devextreme/vdom Examples and Templates
Use this online @devextreme/vdom playground to view and fork @devextreme/vdom 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!
nnfxwThis example demonstrates the DataGrid’s built-in filtering and searching capabilities. The filter row, located under the column headers, allows a user to type any value and select filter operations. With the header filter, which is called by clicking the filter icon in any column header, a user can choose from a set of predefined values. The search panel at the top of the DataGrid allows searching for values in all columns at once.
Drag & Drop for Hierarchical Data Structure - DevExtreme Tree View (forked)This sample app demonstrates node drag and drop operations within DevExtreme TreeView when using a hierarchical data structure. You can reorder nodes within a single tree view or drag and drop nodes between two separate tree views.
Use Sortable to implement the necessary drag and drop functionality within your web app. The following steps outline configuration requirements for our JavaScript TreeView:
Allow users to reorder nodes
Wrap the TreeView in a Sortable and enable the Sortable's allowReordering property.
Allow users to change node hierarchy
Enable the allowDropInsideItem property so that users can drop one node onto another. This adds it as the target node's child. If this property is disabled, users can only drop nodes between other nodes.
Allow users to drag only tree view nodes
To specify tree view nodes as drag targets, set the filter property to a class selector. Since all tree view nodes use the dx-treeview-node class, you can use this class selector as needed.
Prevent a node from being moved into its child node
When a user moves a parent node into its own child node, it breaks the hierarchy. To prevent this outcome, implement the onDragChange function and traverse up the node tree. If the target is a child of the dragged node, cancel the ability to drop the node.
Reorder nodes in code
Implement the onDragEnd function. In this function, you must gather information about nodes being moved. With this information, you can reorder the nodes in the data source (see the moveNode function), and reassign the data source to the TreeView's items property.
Specify tree view identifiers (for drag and drop between multiple tree views only)
Identifiers help distinguish between multiple tree views. Save them in the Sortable's data property. The tree views below include the following identifiers: "driveC" and "driveD".
Combine tree views into one drag and drop group (for drag and drop between multiple tree views only)
Set the Sortable's group property to the same value for all tree views. This allows users to move nodes between the tree views.
overview-devextreme-data-grid-forkedTo enable export in the DataGrid, reference or import the ExcelJS and FileSaver libraries. Set export.enabled to true.
Once the conditions above are met, use the exportDataGrid(options) method to export the DataGrid to an Excel workbook.
Review the onExporting handler to see the data export code. DataGrid is exported as is to a single worksheet. You can also set allowExportSelectedData to true to export only selected rows.
Custom Axis Position - DevExtreme Charts (forked)The Chart component initially displays axes along pane borders. Several other predefined axis layout properties are available. In this demo, the customPosition property is used to move each axis, so that it is displayed on the specified value of another axis. When you position the argument axis, use values from the value axis (in the same type and format) and vice versa.
Regardless of which automatic axis layout type you use, the Chart Control allows you to apply manual offsets. Specify the offset property in pixels to keep the axis position unchanged when users scroll or zoom the Chart data. The offset property shifts the axis from the specified position as follows:
If the axis is horizontal, a negative offset shifts the axis to the top, a positive offset shifts it to the bottom.
If the axis is vertical, a negative offset shifts the axis to the left, a positive offset shifts it to the right.
In this demo, you can use controls under the Chart to change the customPosition and offset properties for both axes.
Batch Update Request - DevExtreme Data Grid (forked)With the DevExtreme DataGrid, users can modify multiple records and submit all changes simultaneously (when editing.mode is set to "batch"). Batch editing allows you to optimize your app, address performance related issues, and deliver the best possible user experience across a variety of usage scenarios.
If data is stored on a server, our DataGrid sends multiple requests to save edited objects - one request per object (this is because most servers only process one edit operation at a time). If your server supports batch update, you can configure the DataGrid to save all changes with a single request.
To incorporate this functionality into your web app, implement the DataGrid's onSaving function. This function accepts an e object that contains fields used for batch update. The following is a summary of the steps you must follow to enable batch update:
Disable default save logic
Set the e.cancel field to true.
Send pending changes to the server
Pending changes are contained in the e.changes array. Ensure it is not empty and send the changes to the server.
Update data in the DataGrid
Once changes are saved, call the refresh(changesOnly) method.
Reset edit state
Use the cancelEditData() method to clear pending changes.
filtering-devextreme-data-grid-forkedThis example demonstrates the DataGrid’s built-in filtering and searching capabilities. The filter row, located under the column headers, allows a user to type any value and select filter operations. With the header filter, which is called by clicking the filter icon in any column header, a user can choose from a set of predefined values. The search panel at the top of the DataGrid allows searching for values in all columns at once.
Overview - DevExtreme Scheduler (forked)DevExtreme React Scheduler is a UI component for scheduling. It implements all the features necessary for its purpose: flexible data binding, easy appointment editing, multiple calendar views, time zones support, and more. Advanced UI customization is carried out using template components and render props. Declared PropTypes for typechecking are also included. Learn more about DevExtreme React components.
master-detail-view-devextreme-data-grid-forkedThe Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.
Record Paging - DevExtreme Data GridThe DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the pager.
The pager is configured in the pager object and contains the following elements:
Page navigator
Enables page navigation.
Page size selector
Changes the page size. To display this element, enable the showPageSizeSelector property. You can also define the allowedPageSizes and specify the initial pageSize in the paging object.
Page information
Displays the current page number and total record count. To display page information, enable the showInfo property. You can also use the infoText property to customize the information text string.
The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager hides page information and changes the appearance of other elements to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the DataGrid's width. Use the displayMode property to switch between modes.
In this demo, you can use the drop-down Display Mode menu to switch between full and compact display modes. You can also use the checkboxes to hide or display different pager elements. Note that when the pager is in compact mode, navigation buttons are always visible but page information is hidden.
TreeView with Search Bar - DevExtreme Tree ViewTo add a search bar to the TreeView and customize the search functionality, do the following:
Set the searchEnabled property to true.
Use the searchMode property to specify whether items should contain (default), start with, or match the search string. In this example, you can switch between search modes in the drop-down menu.
Configure the searchExpr property to specify custom search fields. The default search field is text.
The TreeView uses the TextBox component as a search bar. To customize it, specify TextBox properties in the searchEditorOptions object.
We do not recommend that you enable search if the TreeView uses virtual mode or custom logic to load data on demand. In these cases, the TreeView may not have the full dataset, and the search results include only loaded nodes.
simple-array-devextreme-scheduler-forkedYou can use the Scheduler component to display and edit appointments from a local array. Use the dataSource property to bind the Scheduler to the array.
The Scheduler automatically displays appointments if source object field names match the names listed in the dxSchedulerAppointment help section. In this demo, the following fields illustrate this point: text, startDate, endDate, and allDay. If field names in your data source differ, specify them in ...Expr properties (textExpr, startDateExpr, endDateExpr, allDayExpr, and so on).
For more information about binding to an array, refer to the following help topic: Local Array.
SignalR Service - DevExtreme Data GridThis example demonstrates real-time data update in a DataGrid bound to a SignalR service. Access to the service is configured in a CustomStore.
The CustomStore fetches the remote dataset at launch and keeps its local copy. Whenever the remote dataset changes, the server calls a client-side function that updates the local copy of the dataset (updateStockPrices in this demo). This function uses the store's push(changes) method.
For server-side configuration, refer to the ASP.NET MVC version of this demo.
For more information about integration with push services, refer to the following help topic: Integration with Push Services.
NOTE: Data used in this demo is for demonstration purposes only.
using-globalize-devextreme-localization-forkedDevExtreme components can be localized by means of Globalize. You need to link Globalize modules, CLDR scripts, and DevExtreme dictionaries for desired locales (see the <head> tag of index.html). Then, load CLDR data for the same locales (see index.js). Using Angular, Vue and React, get all the needed components as imported modules instead (see app.component.ts, App.vue and App.js correspondingly). Finally, set the current locale with the Globalize.locale method.
overview-devextreme-data-grid-forkedDevExtreme React Data Grid is a feature-rich grid control. Its main features include robust data layer, fast data processing, client-side data validation, and many more. Advanced UI customization is carried out using template components and render props. Declared PropTypes for typechecking are included. Learn more about DevExtreme React components.
Simple Array - DevExtreme Data GridYou can use the DataGrid component to display and edit data from an array of objects. Use the dataSource and keyExpr properties to specify the bound array and its key field. For more information, refer to the following help topic: Local Array.
Use the columns property to specify a list of data fields you want to display within the DataGrid as columns. If the columns property is not specified, the component creates columns for all data fields available in objects from the bound array.
Advanced Master-Detail View - DevExtreme Data Grid (forked)This demo illustrates an advanced master-detail view in the DataGrid component. Master rows represent suppliers. Detail sections contain TabPanel components with two tabs: Orders and Address. In the Orders tab, you can choose a supplier's product from the SelectBox, and the DataGrid under it will show orders placed on this product. The Address tab displays the supplier's address.
