In this blog post, I'll summarize the major features we expect to ship with DevExtreme v22.2. These features apply to both DevExtreme JavaScript (Angular, React, Vue, jQuery) and DevExtreme-based ASP.NET MVC/Core Controls. Please feel free to share your feedback using surveys embedded in this post below.
The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.
UI/UX Customization Enhancements
Form – Custom Label Template
At present, our Form can only display text labels. Some of our users need to display images or other rich content within an editor’s label. To address this requirement, we plan to introduce custom label templates to our product line. We’ll leverage a technique used in many DevExtreme components – techniques that allow developers to customize an app’s UI. To help illustrate the benefits of this feature, the form labels below are enhanced with the use of icons.
<dx-form [formData]="employee">
<dxi-item dataField="name">
<div *dxTemplate="let data of 'label'">
<person-icon></person-icon> Name
</div>
...
</dxi-item>
</dx-form>
Accordion – Custom Title Template for Individual Items
DevExtreme Accordion allows you to specify a shared custom template for all item titles. In certain instance, you may need to use different templates for each item. We plan to implement this feature, so you can specify title templates at the item level. For instance, in the example below the very first item has a subtitle. Of course, you can add buttons, images, or any custom content within the Accordion:
<dx-accordion>
<dxi-item>
<div *dxTemplate="let data of 'title'">
<h1>Super Mart of the West</h1>
<h2>Arkansas department</h2>
</div>
...
</dxi-item>
</dx-accordion>
Editors – Custom Validation Message Position
If editor validation fails, a message is displayed below the editor. Users have asked us to offer more flexibility in this regard and allow the control to display validation messages above the editor or on the left/right side. We’ll introduce the corresponding ‘validationMessagePosition’ configuration option in our next major update.
<dx-text-box validationMessagePosition="left|right|top|bottom">
<dx-validator>
<dxi-validation-rule
type="number"
message="Value must be a number"
></dxi-validation-rule>
</dx-validator>
</dx-text-box>
Calendar – Display Week Numbers
Another highly requested UI enhancement is displaying week numbers within our Calendar component. You will be able to activate this feature via our new ‘showWeekNumbers’ option in the component configuration.
<dx-calendar
[showWeekNumbers]="true"
[(value)]="currentValue"
></dx-calendar>
CheckBox – Set Indeterminate Value by End-Users
DevExtreme CheckBox supports indeterminate state. It is enabled by setting the component value to null or undefined. Once an end-user clicks the CheckBox, it’s impossible to get back to the indeterminate state. Some of our users have asked us to introduce a way to reset the value back to an indeterminate state. To achieve this, we will introduce an additional value change mode. In this mode, each click will rotate three component states – checked, unchecked and indeterminate.
<dx-check-box
[valueChangeMode]= "default|includeIndeterminate"
[(value)]="value"
></dx-check-box>
Toolbar – Multiline Adaptivity Mode
If there is not enough space on a given device, our Toolbar can automatically hide items in a dropdown menu. End-users can open this menu to invoke actions associated with the hidden items. We plan to add an additional adaptivity mode. In this mode toolbar items remain visible by wrapping to the next line. So, end-users have immediate access to all available items.
<dx-toolbar [multiline]="true">
</dx-toolbar>
PivotGrid Export to Excel – Export Field Panel Headers
The DevExtreme PivotGrid allows you to export its content to Microsoft Excel (v20.2+). At present, exported data includes only column/row dimension values (categories) and aggregated values at intersections (numbers). To help address specific use cases, we will update our export engine so you can include dimension (field) names as well.
<dx-pivot-grid
[dataSource]="dataSource"
(onExporting)="onExporting($event)"
>
<dxo-export
[enabled]="true"
[exportFieldHeaders] ="true"
></dxo-export>
</dx-pivot-grid>
API Enhancements
Popup – Hide/Show API Enhancements
You may have already used the ‘cancel’ flag within the Popup’s onHiding/onShowing events to abort an operation (based on specific conditions). Some of you have asked us to calculate conditions asynchronously. For instance, when you must wait until an end-user approves/rejects a request. For such cases, some of our components support the ‘Promise’ type for the ‘cancel’ flag value. We plan to support Promises in the Popup’s onHiding/onShowing events in the same manner.
onHiding: (e) => {
e.cancel = showConfirmation("Are you sure?"); // returns a Promise
},
The Popup’s show/hide methods return a Promise object that is resolved once the operation is complete. Users have asked for some flexibility in this regard – specifically to reject the Promise if an event handler cancelled operation via the ‘cancel’ flag. We plan to implement this behavior as well.
try {
await popup.hide();
// closed successfully
}
catch (e) {
// closing was cancelled
}
TagBox – Extra Events to Submit Custom Items
DevExtreme TagBox allows end-users to add custom items. Once a user enters custom text and presses Enter, the newly created item is submitted to the data source. To accelerate the data entry process, users have asked to auto-submit custom items when TagBox loses focus (when a user presses the Tab key or clicks a form’s Submit/Save button). We’ll extend the API to enable these usage scenarios.
Slider & RangeSlider - Delayed ‘valueChanged’ Event
When an end-user starts dragging a Slider’s handle, the component immediately raises the valueChanged event. So, a series of events is raised before the user releases the handle. We’ll introduce an additional mode to raise the valueChanged event only once/at the end of user interactions.
<dx-slider valueChangeMode="instant|eventual">
</dx-slider>
Free DevExpress Products - Get Your Copy Today
The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the
DevExpress Support Center at your convenience. We'll be happy to follow-up.