Essential Studio^® for React Release Notes

Common

Features

• Standalone UI SDKs (v35.1 and Later)

  The Essential Studio UI Edition includes access to Standalone UI SDKs, providing all UI components across supported platforms. Organizations can choose from individual standalone component offerings or a comprehensive UI suite based on application requirements and licensing preferences.

• Consolidated Theme Styles via index.css

  The theme package now provides an index.css file in each component folder that loads all dependency styles, so importing it alone is sufficient instead of referring individual dependent styles for each component.

• LLM-Ready Documentation and AI Agent Support

  The sample browser now includes LLM-ready documentation, making it easier for AI agents to discover and consume component APIs and samples. Published skills for the SDK components are now available, and migration guidance is provided for moving from EJ2 React to the Pure React components.

Bug Fixes

• Updated component name casing in telemetry to ensure consistent event tracking and reporting
• Resolved the blocking License Purchase Banner Popup issue.

Chart

Features

• Excel and CSV Export: Enables exporting chart data directly to Excel (.xlsx) and CSV formats, making it easy to save, share, or further analyze the underlying data outside the chart. View Excel and CSV Export demo.

• Linear and Radial Gradient: Introduces linear and radial gradient fill support for series, backgrounds, and other chart elements, enabling smoother color transitions and richer visual styling. View Linear and Radial Gradient demo.

• Axis Label Template: Supports template-based rendering of axis labels, allowing custom HTML content, icons, and styling to be applied for more informative and visually distinct axes. View Axis Label Template demo.

• Minimum Visible Points in Zooming: Introduces a configurable minimum number of visible data points during zoom operations, preventing excessive zoom-in and preserving chart readability. View Minimum Visible Points demo.

Data Grid

Features

• Added column resizing, reordering, and pinning: Flexible layout control with dynamic column adjustments. Explore the demo here.
• Introduced row ordering and pinning: Organize rows with intuitive drag‑drop ordering and pinning. Explore the demo here.
• Enabled batch editing with undo/redo: Simplified bulk data entry with reversible actions. Explore the demo here.
• Added formula cell support: Perform calculations directly in grid cells. Explore the demo here.
• Introduced Tree Grid and Pivot Table views: Hierarchical and analytical views integrated with Data Grid. Explore the demo here.
• Provided async data operations: Improved responsiveness with asynchronous data handling.
• Delivered multi exporting: Export data in Excel, PDF, and CSV formats. Explore the demo here.
• Added filter menu support: Enhanced filtering with menu‑based options. Explore the demo here.
• Provided sidebar tools: Manage columns, filters, and editing tools via sidebar. Explore the demo here.
• Delivered clipboard and autofill: Copy/paste grid content and autofill for faster workflows. Explore the demo here.
• Enhanced bundle optimization: Reduced package size with module‑wise feature loading. Explore the demo here.

DatePicker

Breaking Changes

• Replaced position with anchorAlign and popupAlign in PopupSettings. The previous position: PositionAxis accepted a { X, Y } object where each axis was 'left' | 'center' | 'right' | 'top' | 'bottom' | number, limiting alignment flexibility. anchorAlign defines the anchor reference point, while popupAlign defines the popup reference point, enabling independent alignment of both elements.

• This enhancement is also applicable to the DateRangePicker, DateTimePicker, and TimePicker components.

Dropdown Button

Breaking Changes

• Replaced position with anchorAlign and popupAlign in PopupSettings. The previous position: PositionAxis accepted a { X, Y } object where each axis was 'left' | 'center' | 'right' | 'top' | 'bottom' | number, limiting alignment flexibility. anchorAlign defines the anchor reference point, while popupAlign defines the popup reference point, enabling independent alignment of both elements.
• This enhancement is also applicable to the Split Button component.

Dropdown List

Breaking Changes

• Replaced position with anchorAlign and popupAlign in PopupSettings. The previous position: PositionAxis accepted a { X, Y } object where each axis was 'left' | 'center' | 'right' | 'top' | 'bottom' | number, limiting alignment flexibility. anchorAlign defines the anchor reference point, while popupAlign defines the popup reference point, enabling independent alignment of both elements.
• This enhancement is also applicable to the Multiselect, Autocomplete, and ComboBox components.

FileUpload

The FileUpload component enables users to select and upload files or folders to a server with support for drag-and-drop, validation, chunk upload. It supports both single and multiple file, and exposes a flexible composition API for customizing the drop hint, file list, and action buttons.

Explore the demo here

Key features

• Drag-and-drop: Supports native drag-and-drop file selection and the optional use of an external element as the drop target through the dropArea ref.

• File validation: Built-in validation for accepted file types, minimum and maximum file size, minimum and maximum file count, and duplicate detection, surfaced through the onValidationError event.

• Auto and manual upload: Upload files immediately on selection with autoUpload, or queue them for manual upload via the provided Upload action.

• Chunk upload: Split large files into configurable chunk sizes for resilient, resumable uploads, with per-chunk pause, resume, and cancel controls.

• Composition API: Customize the UI with compound children — <BrowseButton>, <DragHint>, <FileList>, and <Actions> — to tailor the trigger, hint, list, and action buttons.

Popup

Breaking Changes

• Replaced position with anchorAlign and popupAlign. The previous position: PositionAxis ({ X, Y }, each 'left' | 'center' | 'right' | 'top' | 'bottom' | number) could not express arbitrary anchor/popup corner pairs.
• anchorAlign: AlignmentPoint — point on the anchor used as reference. Default: { horizontal: 'left', vertical: 'top' }.
• popupAlign: AlignmentPoint — point on the popup aligned with anchorAlign. Default: { horizontal: 'left', vertical: 'bottom' }.

Scheduler

Features

• Timeline views: Timeline views are supported in the Scheduler. They display a horizontally scrollable layout in day, week, work week, and month views. They help present appointments in a continuous time range with support for visible time-period customization, time intervals, working days and hours, automatic row heights, header rows, custom templates, drag-and-drop, and event resizing.

• Resource grouping: Resource grouping is now available for agenda and timeline views. In agenda view, resources are shown as grouped lists so appointments can be viewed under each resource in an organized schedule layout. In timeline views, resources are displayed in rows while dates and time slots run horizontally, making it easier to compare appointments across multiple resources over a selected time or date range.

• Adaptive grouping: The Scheduler now provides an Adaptive grouping layout for resource-grouped schedules. When group.enableCompactView is enabled, the multi-resource columns are replaced with a single active-resource view — a sidebar tree lets users pick one resource at a time, and Day, Week, Work Week, Month, Agenda, and Timeline views adapt their chrome so dense groupings remain usable on mobile, tablet, and desktop. The layout activates only when resources are grouped and at least one leaf resource exists; it is inactive when no resources are configured.

Sidebar

The Sidebar component renders a collapsible drawer for navigation and custom content. It supports left/right anchoring, push/over interaction modes, optional backdrop, configurable transitions, and a dockable compact state for responsive layouts.

Key features

• Positioning: Anchor the sidebar to either the Left or Right edge of the viewport to fit different navigation patterns.
• Interaction Modes: Choose between Over (floats above content) and Push (shifts main content) modes to control how the sidebar coexists with surrounding content.
• Backdrop Overlay: Render an optional backdrop when the sidebar is open to focus attention and intercept outside interactions.
• Configurable Transitions: Customize the enter and exit transition durations independently for smooth, polished animations.
• Dockable State: Collapse the sidebar into a compact docked state that remains visible, configurable via a dockableWidth value.
• Responsive Media Queries: Drive the sidebar's open/closed state automatically based on a media query for adaptive layouts.
• Controlled and Uncontrolled State: Manage visibility through open/onOpenChange for controlled usage or defaultOpen for uncontrolled usage.
• Composite Layout API: Pair the sidebar with SidebarLayout, SidebarMain, and SidebarTrigger components to coordinate drawer, content area, and toggle button.
• Outside Click Handling: Automatically close the sidebar when clicking outside, configurable via closeOnDocumentClick.

TreeView

The TreeView component renders structured node collections as an expandable, navigable list. It supports both local arrays and remote DataManager data sources, controlled and uncontrolled expansion and selection, multiple selection modes, tri-state checkboxes, inline label editing, and rich keyboard interaction for accessibility.

Key features

• Hierarchical Data Binding: Render nested trees from a children field, a self-referential parentId field, or a remote DataManager with a Query and lazy-loaded children.
• Custom Field Mapping: Map any dataSource property names to the TreeView fields (id, label, children, parentId, disabled, icon, hasChildren, tooltip, navigateUrl, and more) using the fields prop.
• Selection Modes: Choose between None, Single, Multiple, or Checkbox selection. Checkbox mode supports tri-state checkboxes with optional cascading to descendants and disabled-children participation via autoCheck and checkDisabledChildren.
• Expansion Control: Expand on Click, DoubleClick, or None, and drive the expanded set through expandedIds (controlled) or defaultExpandedIds (uncontrolled).
• Inline Editing: Enable editable to let users rename nodes in place. The onNodeEdit callback receives the old and new label and can return false to reject the change. A TreeViewEditInput slot is provided for full editor customization.
• Sorting and Empty State: Sort siblings with sortOrder and render a custom TreeViewEmptyState when the resolved list is empty.
• Row Templates: Replace the default row rendering with a TreeViewNodes render-prop child, or compose individual parts using TreeViewItemIcon, TreeViewItemLabel, TreeViewItemToggle, and TreeViewItemCheckbox.
• Keyboard Navigation: Comprehensive keyboard support for accessibility, including arrow keys to move focus, Home/End for first/last, Enter/Space to select, and F2 to begin editing.