Find Devextreme Cldr Data Examples and Templates
Use this online devextreme-cldr-data playground to view and fork devextreme-cldr-data 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!
Base Grid 2.0.0To fetch data from an OData service, implement an ODataStore. Use its properties to specify the service's url, key data field, and OData version if it is different from 2.
You can configure ODataStore as a standalone element (see OData for details), but this demo assigns ODataStore settings to the store field of the DataSource configuration object. If you follow the same pattern in your application, make sure to set the store's type property to "odata".
The DataSource configuration object allows you to sort, filter, group, and otherwise shape the store's data objects. This demo filters data and selects a limited number of fields.
A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
If you target .NET for your backend API, be sure to check out Web API Service and register your free copy today. The Solution Wizard scaffolds an OData v4 Web API Service (.NET 6+) with integrated authorization & CRUD operations powered by EF Core ORM. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing.
The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.
To use the free Solution Wizard (which creates the Web API Service), run the Universal Component Installer from the DevExpress Download Manager and use our predefined template in Visual Studio 2022+.
Read Tutorial | View Examples: JavaScript (DevExtreme) & JavaScript (Svelte) | Watch Videos
brave-chaum-wxslnxYou can use our React Splitter UI widgets to create resizable panes within your DevExtreme-powered web app/page.
To get started with DevExtreme React Splitter, refer to the following tutorial for step-by-step instructions: Getting Started with React Splitter.
To specify individual splitter panes, set the items or dataSource property. Use dataSource if data is remote or should be processed. If you specify multiple panes, they will appear one after another with splitters between them.
The following base options are available for a pane:
resizable (default: true)
If true, a handle appears at the side of the pane. Drag the handle to adjust pane size.
collapsible (default: false)
If true, an arrow appears on the handle. Click the arrow to close the pane.
collapsed (default: false)
Specifies whether the pane is initially collapsed.
To configure the layout of the React Splitter component, you can specify its orientation as 'vertical' or 'horizontal' (default). All React Splitter "size" properties depend on the orientation. If it is 'horizontal', "size" is the width. Otherwise, it is height. The following pane "size" properties can be specified:
size
Initial pane width/height.
minSize
Minimum width/height for a resizable pane.
maxSize
Maximum width/height for a resizable pane.
collapsedSize
The width/height of a collapsible pane when collapsed.
You can also place one React Splitter inside another to create nested layouts. To do so, use the pane's splitter property.
React Splitter panes can include different content types, from simple HTML markup to components. You can declare HTML markup inside the item tag or use the following properties to populate panes with content:
itemTemplate
Specifies a custom template for all panes.
template
Specifies a custom template for an individual pane.
currying-tree-dr5cx5You 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.
React Charts (forked)DevExtreme React Charts comprise 30+ UI components for data visualization, including bars, areas, lines, bubbles, pie, funnels, sparklines, treemaps, and other chart types.
NOTE
Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
The Web Dashboard is available as a part of a Universal subscription.
Get Started with DevExpress BI Dashboard | Explore Demos
Group Summaries (forked)To configure group summaries, populate the summary.groupItems array with summary configuration objects. Each object should specify a column that supplies data for summary calculation and a summaryType—an aggregate function that should be applied to this data.
Position a Group Summary
Group summaries are displayed in parentheses after the group caption. You can reposition them as follows:
Display a summary in a column
You can align a summary to its corresponding column (see the Sale Amount and Total Amount columns). To do this, enable the alignByColumn property. If you want to align a summary to a different column, specify the showInColumn property.
Display Summary Values within Group Footers
You can make a summary item display its values within group footers. To do this, enable the showInGroupFooter property. Summary items will appear within their corresponding columns (see the Total Amount column). If you want to display summaries in another column, specify the showInColumn property.
Format Summary Values
To format summary values, use the valueFormat property. This demo applies the "currency" format to summary values calculated against the Total Amount and Sale Amount columns. If you also want to add custom text to summary values, use the displayFormat property. This demo sets this property for summaries of "sum" and "count" types.
Sort Groups by Summary Values
This demo sorts groups by summary values (the number of orders). To do this, the code adds an object to the sortByGroupSummaryInfo array. The object specifies the summaryItem whose values are used to sort the group rows.
Custom Editors (forked)Different editors can be used to edit cell values in grid columns. The default editor depends on the column configuration. The dependency is illustrated in the editorOptions object's description (this object is used to customize the default editor). In this demo, the SelectBox component is the Status column's default editor, and the editorOptions object is used to specify the component's itemTemplate.
If the default editor is unsuitable, you can replace it with a custom editor. For this, implement an editCellTemplate that allows you to configure the replacement editor's appearance and behavior. To change the cell value and, optionally, the displayed value after the editor's value is changed, use the setValue() method of the editCellTemplate. In this demo, the default editors in the Owner and Assignees columns are replaced with the DropDownBox and TagBox components.
Hierarchical Data Structure (forked)Use the following properties to bind the TreeView to hierarchical data:
items[]
Assigns a local array as done in this demo.
dataSource
Assigns a DataSource object that allows you to perform data shaping operations and use a remote source.
Each object in the TreeView's hierarchical data structure should include the following fields:
id
Unique item identifier.
text
Text displayed by the item.
items
Nested objects (optional).
You can respectively use the keyExpr, displayExpr, and itemsExpr properties to specify custom names for the above-mentioned fields. Node objects can also include developer-defined fields and properties from this help section: items[].
In this demo, nodes use the expanded property, which specifies whether a node is collapsed or expanded. They also include the developer-defined price and image fields.
To get started with the DevExtreme TreeView component, refer to the following tutorial for step-by-step instructions: Getting Started with TreeView.
React Charts (forked)DevExtreme React Charts comprise 30+ UI components for data visualization, including bars, areas, lines, bubbles, pie, funnels, sparklines, treemaps, and other chart types.
NOTE
Use our DevExpress BI Dashboard to embed interactive business intelligence into your next web app.
The Web Dashboard is a data analysis UI component that you can embed into your ASP.NET Core or Angular, React, and Vue applications with .NET backend. Dashboards allow you to display multiple inter-connected data analysis elements such as grids, charts, maps, gauges, and others: all within an automatically-arranged layout.
The set of components allows you to deploy an all-in-one solution and switch between Viewer and Designer modes directly on the web client (includes adaptive layouts for tablet & mobile).
The Web Dashboard is available as a part of a Universal subscription.
Get Started with DevExpress BI Dashboard | Explore Demos
AI and Chatbot Integration (forked)This demo leverages the Azure OpenAI service alongside the DevExtreme Chat component. You can integrate Chat with multiple AI services, including OpenAI, Google Dialogflow, and Microsoft Bot Framework.
Handling dataSource (reloadOnChange: false)
The Chat component's dataSource is a CustomStore that implements its own load and insert functions. The DevExtreme Chat component deactivates reloadOnChange to push updates directly into the store and update the conversation manually. See theonMessageEntered event handler and the processMessageSending function to review the code that manages data transfer between our Chat component and its data store.
Custom Message Template
The Chat specifies a messageTemplate that displays "Copy" and "Regenerate" buttons in bot messages.
Response Format Conversion: Markdown to HTML
The AI model outputs responses in Markdown, while the Chat requires HTML output. This example uses the unified plugin library to convert response content. Review convertToHtml function code for implementation details.
Default Caption Customization
The Chat component in this demo displays modified captions when the conversation is empty. The demo uses localization techniques to alter built-in text.
DataGrid-CustomForm-ComponentizedThe DataGrid can use the Form component to arrange cell editors when users modify a row. The Form allows users to edit values from visible and hidden columns (see the Notes column).
To enable form edit mode, configure the following properties:
Set editing.mode to "form"
Assign true to the editing object's allowAdding, allowUpdating, and allowDeleting properties.
A column's default editor is defined automatically based on this column's dataType. To customize this editor or replace it with another editor, use the column's formItem object. This demo shows how to replace the default editor in the Notes column with a TextArea. Refer to the SimpleItem help topic for information on all settings that you can define in the formItem object. If you need more information about editor customization in DataGrid Form, review the following topic: Customize Edit Form.
You can also set up the edit Form from scratch. The component's configuration section lists available settings. Specify these settings in the editing.form object. Refer to this object's description for more information about this edit mode's limitations.
snowy-grass-x6nmyy (forked)DevExtreme React Tree List is a UI component that displays hierarchical data in a table. Its main features include robust data layer, multiple editing modes, client-side data validation, numerous filtering and searching properties, and many more. Learn more about DevExtreme React components.
To get started with the DevExtreme TreeList component, refer to the following tutorial for step-by-step instructions: Getting Started with TreeList.
Simple Array (forked)You 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.
Node and Edge Arrays (forked)This demo shows the Diagram component's capability to load an external tree or a graph structure from two data sources: an array of shapes and an array of shape connectors. The connector is specified by the shape's ID attributes. The Diagram transforms information from the data sources into a tree layout view.
DevExtreme EAP 24.2 - New Chat component (React)DevExtreme EAP 24.2 - New Chat component (React)
Our next major release (v24.2) will include a Chat component, a must-have UI element for apps that require real-time communication support.
Here’s a sneak peek at what you can expect from our Chat component:
Human-to-Human Interaction
Enable user conversations with a chat interface for one-on-one or multi-account communication. Ideal for customer support, social networking, and/or internal collaboration.
AI and Chatbot Integration
Enhance your app’s user experience with AI services and chatbots. Automate responses, deliver immediate support services, and boost engagement with intelligent interactions.
Accessibility and Keyboard Navigation
Our commitment to accessibility ensures that the Chat component will be fully navigable via keyboard, making it intuitive/usable for everyone.
olduDataGrid can display a popup edit form. The form can include any fields from the bound data source, regardless of whether the corresponding column is visible in the grid (see the Notes and Address columns).
To enable this behavior in your application, do the following:
Set editing.mode to "popup".
Set the editing object's allowUpdating, allowAdding, and allowDeleting properties to true.
DataGrid uses the DevExtreme Form and Popup components to display the form and the popup. Their default configurations are defined automatically. If these configurations do not meet your requirements, you can redefine them in the editing object's form and popup properties as shown in this demo. For more information about this edit mode's limitations, refer to the descriptions of these properties.
Task Template (forked)The DevExtreme JavaScript Gantt templates help customize the layout and appearance of individual task elements. Templates allow you to mix HTML code with any DevExtreme JavaScript component - and position desired elements within the container. In this demo, a template is used to display images within tasks and change their background color.
Implementation: Use the taskContentTemplate template to customize and align task information within the template container. For each task, use the item property to obtain task information (title, resource, progress) and wrap it into div elements. Then, apply CSS styles to these div elements and place them into the container.
