Essential Studio^® for React Release Notes

Common

Features

• Introduced the Animation component, now including built‑in animations such as Fade, Zoom, Slide, and Flip to deliver smoother transitions and an improved user experience.
• Introduced new Draggable and Droppable components, enabling intuitive and flexible drag‑and‑drop interactions within the UI.

Autocomplete

The React Autocomplete component is a compact, accessible single-input control that provides typed suggestions as users enter text. It supports local or remote data, autofill and highlighting, customizable rendering, and full keyboard navigation for quick, accurate entry in forms and search flows.

Explore the demo here

Key features

• Type-to-Suggest: Show matching suggestions as the user types with configurable minLength and debounce.
• Autofill & Highlighting: Optional autofill of the first match and visual highlighting of matched text.
• Custom Templates: Customize suggestion items and input value rendering.
• Controlled/Uncontrolled: Use value/defaultValue patterns for managed or unmanaged usage.
• Local & Remote Data: Bind arrays or remote data sources with fields mapping and query support.
• Keyboard & Accessibility: Complete keyboard navigation, Enter to commit, and accessible (ARIA) behavior.
• Custom Values: Allow free-form/custom values with an onCustomValueSelect callback.
• Performance: Filtering, virtualization, and debounce for large datasets.

Chart

Features

• Waterfall: Introduces the Waterfall series for visualizing the cumulative effect of sequential positive and negative values on a running total. Supports automatic cumulative calculations, start/end totals, intermediate subtotals, and customizable rise, fall, and total segment colors. Includes styling options for connector lines, column width, borders, and data labels, and integrates fully with legend, tooltip, zooming, and panning interactions.
• Histogram: Adds the Histogram series for displaying the distribution of continuous numeric data by grouping values into bins. Supports automatic or manually defined bin widths, frequency or density modes, configurable bin boundaries, and full styling for gaps, borders, and fills. Compatible with numeric and datetime axes, and includes tooltip, crosshair/trackball, and animated transitions.
• Multi‑colored Area: Introduces the Multi‑colored Area series for rendering area charts where the fill or stroke color changes across defined ranges or conditions.
• Pareto: Adds the Pareto chart type, combining a column series with a cumulative‑percentage line to emphasize the most significant contributors based on the 80/20 principle. Automatically sorts categories in descending order, computes cumulative percentages, and renders the percentage line on a secondary axis. Supports reference lines (such as the 80% threshold) using strip lines and offers independent styling for columns and lines with shared tooltips.
• Trendlines: Introduces built‑in Trendline support for analyzing data direction and forecasting patterns. Supports common trendline types such as Linear, Exponential, Polynomial, Logarithmic, and Power. Each trendline can be styled independently with customizable stroke, dash patterns, markers, and forward/backward forecast options. Fully integrated with legend, tooltip, and animation support.

ComboBox

The React ComboBox component combines a text input with a dropdown list to let users type to search or pick a single option. It includes filtering, optional custom values, templating, and icon support, making it suitable for compact single-select scenarios in forms and toolbars.

Explore the demo here

Key features

• Hybrid Input + List: Search-enabled list with a selectable popup and optional dropdown icon.
• Filtering: Built-in filtering modes (StartsWith/Contains) with debounce for responsive UX.
• Custom Values: Accept and commit free-form input when enabled.
• Custom Templates: Item and value templates for rich visual presentation.
• Controlled/Uncontrolled: value/defaultValue usage for flexible state management.
• Data Binding: Works with local arrays or remote data, supports fields mapping and queries.
• Accessibility & Keyboard: Full keyboard support and ARIA attributes for screen readers.
• Virtualization & Performance: Handles large lists efficiently with virtualization and sorting.

Data Grid

Features

• DOM Virtualization & Virtual Scrolling: Enables efficient rendering of large datasets with improved performance and responsiveness. Try the DOM virtualization configuration & Virtual Scrolling demo.
• Excel Mode & CheckBox Filtering: Provides advanced filtering options with intuitive, checkbox-based selection. Try the Excel mode filtering & CheckBox mode Filtering demo.
• Enhanced CheckBox Selection: Added support for efficient multi‑row selection, enabling bulk actions with ease. Provides quick deletion of all records or selective removal of only visited entries for streamlined data management. Try the CheckBox Selection demo.

DateRangePicker

The React DateRangePicker component is a dual‑date selector that provides a single input with a popup or inline panel to choose a start and end date. It supports presets, strict ranges, min/max constraints, optional min/max span limits, keyboard navigation, and customizable templates. With localization and RTL support it suits booking flows, analytics filters, and reporting UIs.

Explore the demo here

Key features

• Start & End Selection: Choose a contiguous date interval with intuitive start/end flow.
• Presets & Custom Ranges: Built‑in preset ranges plus a custom range panel.
• Popup or Inline Modes: Render as a centered dialog or anchored inline popup.
• Controlled/Uncontrolled: Use value or defaultValue to manage the selected range.
• Min/Max Date Constraints: Clamp navigation and selection within allowed dates.
• Min/Max Range Length: Enforce minimum or maximum number of days in a range.
• Keyboard Accessibility: Full keyboard navigation and preset list support.
• Localization & Globalization: Locale aware formatting and RTL compatibility.
• Templating: Customize header, footer, and cell templates for branding and UX.

DateTimePicker

The React DateTimePicker component is a compact, accessible input that combines a text box with an integrated calendar and time panel for selecting a single date and time value. It supports flexible formatting and parsing, min/max date and time constraints, step intervals, strict mode validation, inline or dialog rendering, and full keyboard navigation. With localization, RTL support, and templating hooks for header, footer and cells, it fits both simple forms and advanced scheduling scenarios.

Explore the demo here

Key features

• Integrated Calendar + Time Panel: Pick date and time in one combined UX (toggle between panels).
• Popup or Inline Modes: Render as a dialog/popup or inline panel.
• Clear & Toggle Icons: Built‑in icons to open the picker and clear the value.
• Controlled/Uncontrolled: Manage value externally via value or internally via defaultValue.
• Min/Max Date & Time: Restrict both calendar navigation and selectable times.
• Step Intervals & Snapping: Time lists generated by configurable step with nearest time snapping.
• Strict Mode & Validation: Enforce parsing/selection rules and show validation states.
• Keyboard Accessibility: Full keyboard support for opening, navigation, and committing values.
• Localization & Globalization: Locale aware formatting, RTL support, and customizable labels.
• Templating: Header, footer, and cell/item templates for custom rendering.

Dropdown List

Features

The Dropdown List now includes virtualization to efficiently render very large datasets by only mounting visible items. This reduces memory usage, improves rendering and scroll performance for long lists.

Form

Added support for field-level validation rules on FormField. Field-level rules now override form-level rules for the same field, enabling per-field custom validation and messages while remaining backward compatible.

Features

• Field-level Rules: Specify a rules prop on FormField to define validation specific to that field.
• Override Behavior: Field-level rules take precedence over form-level rules with identical rule names.
• Custom Messages: Field-level rules support custom error messages for more granular feedback.
• Backward Compatible: Existing form-level rules continue to function when no field-level rules are provided.

ListView

The React ListView component renders a flexible, accessible list UI that supports multiple data sources (plain arrays or DataManager), field mappings, grouping and sorting, templates for items and group headers, optional header/footer content, virtualization for large lists, and scroll/data lifecycle events. It is designed for high-performance scenarios (virtualization + windowed rendering) while providing templating hooks and a small public API surface for integration via refs.

Key features

• Flexible Data Sources: Accepts arrays of primitives/objects or a DataManager with Query support for remote operations.
• Field Mapping: fields mapping merges with sensible defaults to map id, text, icon, imageUrl, groupBy, and more.
• Templates: itemTemplate, groupTemplate, headerTemplate, and footerTemplate for complete visual customization.
• Grouping & Sorting: Group items by a field and control sort behavior with sortOrder and fields.sortBy.
• Virtualization & Performance: Windowed rendering with virtualization props and scroll request callback for very large data sets.
• Data Events: onDataRequest and onDataLoad hooks for request/response lifecycle; onScroll for virtualization-aware scrolling.
• Accessibility & RTL: Honors provider dir (RTL) and includes focus/interaction-friendly structure.
• Disabled State: Disable user interactions via the disabled prop.

Explore the demo here

MultiSelect

The React MultiSelect component enables selection of multiple options from a list with tag/chip or delimiter display. It supports filtering, select-all, checkboxes, custom templates, and flexible display modes for dense forms and tag-based inputs.

Explore the demo here

Key features

• Multiple Selection Modes: Tags/chips or delimiter display, plus checkbox mode for bulk selection.
• Tag/Chip Templates: Customize tag appearance and behavior, including chipTemplate and delete handlers.
• Select All / Clear: Optional Select All / Unselect All controls and corresponding callbacks.
• Filtering & Search: Instant filtering with configurable filter modes and debounce delay.
• Maximum Selection & Hiding: Limit selections via maximumSelectionLength and hideSelectedItem option.
• Custom Values: Accept custom entries and expose onCustomValueSelect.
• Performance: Virtualization, efficient rendering for large datasets, and server-side querying.
• Accessibility: Keyboard navigation, accessible features (ARIA), and configurable open/close behavior.

Pie Chart

Features

• Highlight & Selection: Adds highlight and selection interaction for Pie and Donut charts, enabling segment emphasis on hover or click. Supports point‑level selection with customizable fill, border, opacity, and pattern styles. Offers both single and multiple selection modes for enhanced user interaction and data exploration.

Scheduler

Features

• Recurrence support: Built-in support for defining and managing recurring events with flexible repeat patterns such as daily, weekly, monthly, and yearly, including end conditions like end date and occurrence count, with options to edit or delete individual occurrences or the entire series.
• Event resize customization: Support for customizing event resize behavior, allowing control over resize actions through events and interactive updating of event duration by dragging the resize handle to the desired time slot.
• Header customization: Support for customizing the Scheduler header area using custom templates, allowing modification or replacement of the default navigation bar, view buttons, and date range display with custom content and styles.
• Editor window customization: Support for customizing the default event editor dialog with custom fields, templates, and layouts, enabling extension or complete redesign to fit application requirements. Includes built-in field validation to define rules such as required fields, format checks, and custom validation logic before saving an event.
• Quick popup customization: Support for customizing the quick info popup that appears on cell click and event click, allowing override of the default popup header, content, and footer sections with custom templates and actions.
• Header indent customization: Header indent template support for customizing the indent cell area displayed at the top-left corner, enabling placement of custom content such as labels, icons, or controls in that region.
• Context menu integration: Context menu support providing a right click menu on Scheduler cells and events, offering quick access actions such as add, edit, and delete, with full support for custom menu items and action handling.
• Tooltip integration: Built-in tooltip support for events, enabling display of additional event details on hover through default or fully customizable tooltip templates.