Find Devextreme Angular Examples and Templates
Use this online devextreme-angular playground to view and fork devextreme-angular 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!
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.
dxtabpanel-angular-routesDevExtreme HTML5 JavaScript Dialog and Notification Widgets are adaptive Angular components that help a user interact with your application. They provide intuitive UI, adaptive design, and customization flexibility. Available as Angular components, these widgets support native Angular features: AOT compilation, declarative configuration, TypeScript compile-time checking, and more.
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.
Overview - DevExtreme SchedulerDevExtreme Angular Scheduler is a client-side scheduling control. With a great number of features including appointment editing, multiple calendar views, current time indication, Scheduler provides excellent user experience. Native Angular features, like AOT compilation, declarative configuration, TypeScript compile-time checking, are supported as well.
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.
Multiple Selection - DevExtreme Drop Down BoxIf the UI component embedded into the DropDownBox allows multiple selection, synchronize the DropDownBox value with the selected items. Synchronization instructions are the same for every selection mode.
In this demo, the DataGrid's selection.mode and TreeView's selectionMode properties are used to enable multiple selection.