Find @devextreme/runtime Examples and Templates
Use this online @devextreme/runtime playground to view and fork @devextreme/runtime 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!
drag-n-dropIn this demo, the FileUploader component is configured for asynchronous upload. Use the File types drop-down menu to select acceptable file types for the Open file dialog. The Upload mode drop-down menu allows you to specify whether the file is uploaded on a button click or instantly after the file has been selected. In addition, you can specify whether the FileUploader allows multiple file selection.
To select files, click the Select file button or drop the files directly on the component. If the upload mode is «useButtons», you must click the Upload button or a corresponding button for each file to initiate upload.
NOTE
This demo does not actually upload files. To upload files, assign the URL of a page providing server scenarios for saving uploaded files to the uploadUrl configuration property of the component.
Overview - DevExtreme Text AreaThe TextArea component enables users to enter and edit multi-line text. This component can have a fixed or resizable height. The component with the fixed height displays a native scroll bar if the entered text exceeds the text area. If you set the autoResizeEnabled property to true, the TextArea automatically resizes its height to fit the text.
You can also specify the maxLength property to limit the number of characters a user can enter. Note that this property only limits the number of characters for users. You can enter text that exceeds the maximum character length programmatically, but the number of characters displayed to users will still be limited by this property setting.
The TextArea stores the text in the value property and updates it after the DOM event occurs. To specify which DOM event to use instead of the default "change" event, use the valueChangeEvent property. To handle the value change, use the TextArea's onValueChanged function.
Change the text in the Event Handling and API section below to see how this feature works. Use the "Synchronize text areas" drop-down menu to select which event updates the read-only component's value: "change" or "keyup".
Zooming and Panning - DevExtreme Charts 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.
Zooming and Panning - 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.
CaroKershaw/Sandbox-Validation-DevExtremeFormThis demo shows how to validate Form editors. To apply validation rules to an editor, declare them in the validationRules[] array. Specify type and other properties for each rule.
The following validation rules are shown in this demo:
RequiredRule
Requires that a validated editor has a value.
CompareRule
Compares the editor's value to the specified expression.
PatternRule
Checks whether an editor value matches a specified pattern.
RangeRule
Checks whether an editor value is in a specified range.
StringLengthRule
Requires that an editor value length is in a specified range.
EmailRule
Requires that an editor value matches the Email pattern.
AsyncRule
Allows you to add custom server-side validation logic. Rules of this type run last, only if all other rules passed. In this demo, an AsyncRule checks whether user input matches [email protected].
To submit form data, do the following:
Wrap the Form component in the HTML <form> element.
Use the Button Form Item to add a button to the form. This button submits the form data.
Enable the button's useSubmitBehavior property.
When users click the button, the Form validates all editors that belong to the same validationGroup as this button. In this demo, all these editors belong to the customerData group. Form data can be submitted to a server only if input validation is successful. Enable the showValidationSummary property to display all validation errors at the bottom of the Form.
Recurring Appointments - DevExtreme Scheduler (forked)A recurring appointment repeats at a specified interval. A circular arrow glyph denotes such an appointment in the view.
Do the following to create a recurring appointment:
Locate or create an appointment object in the dataSource.
Specify the recurrenceRule property to configure the appointment frequency. Set this property according to the iCalendar RFC 2445 specification. A single data object with recurrenceRule creates an appointment series.
Optionally, use the recurrenceException property to specify the start date and time of those appointments that you want to exclude from the series.
You can use custom fields that set recurrence. To enable them, specify their names in the Scheduler's recurrenceRuleExpr and recurrenceExceptionExpr properties.
Users can also create recurring appointments. The appointment details form contains a Repeat switch. When it is on, the form displays an additional set of fields to specify recurrence rules. Double-click an appointment and select Edit series to view the appointment details form with the recurrence fields. You can also select Edit appointment to view a single non-recurring appointment from the series.
Popup Editing - DevExtreme Data GridDataGrid 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.
Overview - DevExtreme Data Grid (forked)The DataGrid allows you to export its contents to a PDF document.
To enable PDF export operations, import the jsPDF library and set the export.enabled property to true.
Call the exportDataGrid(options) method that belongs to the pdfExporter module. Specify at least two required properties:
jsPDFDocument
Specifies the jsPDF instance.
component
Specifies the DataGrid's instance.
To review implementation details, see the exportDataGrid(options) method call in onExporting handler. You can also set allowExportSelectedData to true to export only selected rows.
Master-Detail View - DevExtreme Data GridThe 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.
google-calendar-integration-devextreme-scheduler-forkedTo display appointments from Google Calendar in the Scheduler, follow the steps below:
Get Google API key
Follow the instructions from step 1 in the Browser Quickstart tutorial.
Restrict the API key
Set application and API restrictions.
Make your calendar public
Refer to the following help topic: Create & manage a public Google calendar.
Get the calendar ID
Open Google Calendar settings, choose the calendar to be integrated, and copy its ID from the Integrate calendar section.
Set up the Scheduler
Configure the CustomStore to load data from Google Calendar as shown in this demo. If a timeZone is specified in the Scheduler, ensure it is the same as in Google Calendar.
Popup Editing - DevExtreme Data Grid (forked)DataGrid 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.
Simple Array - DevExtreme Pivot Grid (forked)The PivotGrid component can display data from an array of objects. Use the dataSource property to bind the PivotGrid to data. This property accepts a PivotGridDataSource instance or its configuration object. Assign your array to the store property of PivotGridDataSource.
To display data in the PivotGrid, assign an array to the fields[] property. Each object in this array configures a single pivot grid field. Assign a field name to the dataField property to populate the pivot grid field with data.
You can distribute fields between four different areas: row, column, filter, and data. To specify the area, set the area property. Fields that do not belong to any area are displayed in the field chooser.
For more information on fields and areas, refer to the following article: Fields and Areas.
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
Hover Mode - DevExtreme ChartsThe Chart and PieChart components support different modes of series hovering. This demo shows the «includePoints» mode, when all the points of a hovered series change their display style. In addition, you can specify a custom hover mode for legend items. Here, the «excludePoints» mode is used, when only the series line changes its display style leaving the points as they were.
Pimss DxDataGrid Scrolling IssueIf the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory.
To allow users to scroll the DataGrid virtually, set the scrolling.mode to "virtual".
In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
