DevExtreme UI Components (v22.2) — API Enhancements (Angular, React, Vue, jQuery)

Though we just released v23.1, I want to summarize a few important DevExtreme-related features we shipped in our previous major update (v22.2).

Should you have any questions about the features/capabilities outlined in this post, please submit a support ticket via the DevExpress Support Center.

Hide/Display API Enhancements

The 'cancel' parameter in the onShowing/onHiding events now supports Promise type, allowing you to execute an asynchronous action before a component is displayed or hidden.

This enhancement is available for the following UI components:

• Popup
• Popover
• Tooltip
• Toast
• LoadPanel

Show/hide methods now return a Promise object, which is resolved once the operation is completed. This Promise is rejected if the operation is cancelled.

jQuery

const popup = $("#popup") 
    .dxPopup({ 
        onShowing: (e) => { 
            e.cancel = confirm("Cancel showing?"); 
        }, 
    }) 
    .dxPopup("instance"); 
$("#button").dxButton({ 
    text: "Show", 
    onClick: () => { 
        popup 
            .show() 
            .then(() => { 
                alert("Show promise is resolved"); 
            }) 
            .catch(() => { 
                alert("Show promise is rejected"); 
            }); 
    }, 
}); 

Slider & Range Slider — Value Change Mode

Previously, Slider and RangeSlider component values changed immediately whenever users moved the slider’s handle. Our new valueChangeMode option allows you to select a different mode: values change only on handle release.

Slider Demo | RangeSlider Demo

React

<RangeSlider 
    value={value} 
    valueChangeMode="onHandleRelease" 
    onValueChanged={handleValueChange} 
/> 

SelectBox and TagBox — Additional Events to Submit Custom Items

Previously, our SelectBox and TagBox could only create new items when users pressed the Enter key. This default behavior has been changed: items are created both on Enter key press events and when the component loses focus. You can assign a DOM event to the customItemCreateEvent property to change the event raised when a new item is created.

Angular

<dx-select-box ... 
    [acceptCustomValue]="true" 
    (onCustomItemCreating)="addCustomItem($event)" 
    customItemCreateEvent="focusout" 
></dx-select-box> 

VectorMap — Control Panel Customization

You can now change the visibility of the VectorMap control’s bar elements: pan control and zoom bar. Use the panVisible and zoomVisible properties for this purpose.

View Demo

Vue

<DxVectorMap ... > 
    <DxControlBar 
        :pan-visible="true" 
        :zoom-visible="false" 
    /> 
</DxVectorMap> 

Data Visualization Components — Adapt to Container Resize

With our v22.2 release, Charts, Gauges, and Maps are automatically redrawn whenever container size changes.