DevExpress ASP.NET and Blazor 23.1

You can now customize styles and apply gradients, patterns, and images to charts.

Features

Microsoft ASP.NET Core

• New DateRangeBox Component
  • The DateRangeBox component for Angular, React, Vue, and jQuery allows you to select a date range. Features include:
    • Masked Input.
    • Popup and Calendar Customization.
    • Input Label and Styling Modes.
    • Value Mode.
    • Input Validation.
• Data Grid and Tree List
  • Column Chooser Customization - The new ColumnChooserSelectionConfigBuilder object allows you to configure selection options within the Column Chooser window.
    • Available options include:
      • Recursive selection.
      • Select all.
      • Select a column by clicking its label.
    • You can specify a ColumnChooserSearchConfigBuilder configuration object to customize search within the Column Chooser.
    • The new position method allows you to specify the display location of the Column Chooser.
• Data Filtering - UI Customization
  • Header Filter Customization in DataGrid, PivotGrid, TreeList, Gantt - You can now customize search options and the appearance of the search box in column header filters.
• Data Visualization
  • Charts - Сolor Gradients and Patterns - You can now customize styles and apply gradients, patterns, and images to DevExpress Charts.
  • Charts - Customize Label Position in Series - The new shift(x,y) method allows you to display series labels at a specified offset from their default position.
  • Gauge - Display Custom SVG Content - Use the new CenterTemplate method to display custom SVG content inside the Gauge component.
  • BarGauge - Support 'Shift' Mode to Address Overlapping Labels - If BarGauge displays multiple values ​​next to each other, corresponding labels may overlap. You can now use the ResolveLabelOverlapping method to specify how the BarGauge component modifies the position or visibility of labels.
• Accessibility
  • Extended the following accessibility-related capabilities:
    • Focus disabled UI elements - Switching focus between accessible and disabled (unavailable) UI elements in the components now complies with the WAI-ARIA standard. Screen readers can now report a disabled element when the user focuses on it. Any other interaction with disabled UI elements is not allowed.
    • Keyboard navigation in TreeView - Improved the tab navigation (Tab key) between item checkboxes and 'selectAll' checkbox.
    • Keyboard navigation in Calendar - Users can now focus the Today button and press Enter to navigate to the today date. Enable the showTodayButton setting to display the Today button within the calendar.
    • Global rework of aria-*attributes - This enhancement allowed us to better support screen readers in all UI components.
    • Tabs and TabPanel - Design improvements in Material and Generic themes - Added new visual states for the Tabs and Tab Panel components. And also improved existing states: hover, active, disabled, focused, and selected.
    • Charts - Pattern and Image fill - With this new customization option, you can edit styles, apply images and SVG patterns to DevExpress Charts, making them accessible to visually impaired people.
  • Improved the documentation of the DataGrid, TreeList, and dropdown editors - The documentation now includes help topics about accessibility support. Each help topic includes a table with the features and standards supported by the component. Lighthouse, WAVE, and Axe accessibility tools are used to test the components and display results in the table.
• Security
  • Content Security Policy (CSP) Support - The DevExtreme UI library now supports Content Security Policy (CSP) integration and introduces advanced security features to help you detect and mitigate certain types of security risks, including Cross-Site Scripting (XSS) and data injection attacks.
• UI Components
  • Overlay Components - Native Scrolling - The Popup, Popover, and Tooltip components now support native scrolling, which improves usability on mobile devices. If content height is greater than the height of the overlay component, the component displays the browser's native scrollbar. With this new enhancement, you do not need to wrap content into the ScrollView component.
  • TreeView - Display Custom Expand/Collapse Icons - TreeView nodes can now display custom expand/collapse icons. Use the CollapseIcon and ExpandIcon methods to specify node icons. You can load icons from URLs, specify icons in CSS class (if working with external libraries), or display default icons.
  • List - Select Items on Click - The new SelectByClick method specifies whether to select an item when the user clicks its caption.
  • ColorBox - Hexadecimal 8-digit RGBA Format Support - You can now specify colors in hexadecimal 8-digit RGBA format.
  • Menu - Add the 'url' Option for Items - Added a new URL method for Menu items. Use the LinkAttr method to specify link attributes.

Blazor

• New Radio
  • The new Blazor Radio component allows users to select a single choice from a group of options. Features include:
    • Bind to Data.
    • Input Validation.
    • Appearance Customization.
• New Radio Group
  • The Blazor Radio Group generates and arranges radio items based on a collection. Features include:
    • Bind to Data.
    • Horizontal / Vertical Layout.
    • Input Validation.
    • Disable Individual Radio Items.
• New Loading Panel
  • The Blazor Loading Panel indicates status/progress of an operation. Features include:
    • Built-in Animations (Spin, Pulse, Flip).
    • Block Underlying Content (UI).
    • Content and Appearance Customization.
    • Shading.
    • Close on Click.
    • Show / Hide API.
• New Wait Indicator
  • The Blazor Wait Indicator displays progress associated with time-consuming operations. You can embed the Wait Indicator into other UI controls (for example, buttons, data editors).
• Grid
  • Column Filter Menu - The Blazor Grid now supports Microsoft Excel-inspired filter dropdowns. These dropdowns display unique column values as a checklist, include a search box, and a Select All option. Use the following new APIs to customize filter dropdowns:
    • CustomizeFilterMenu - Handle this event to customize items in a filter dropdown before it is displayed.
    • FilterMenuTemplate - Use this property to display custom content in a filter dropdown.
    • DataColumnFilterMenuTemplate - Use this property to specify a common template for all filter dropdowns in the Grid.
  • Virtual Scrolling (CTP) - In virtual scrolling mode, The Blazor Grid does not display its pager. Users navigate through all data rows using the vertical scroll bar. To optimize performance, The Grid only renders rows that appear in the scroll viewport. For server-side data, the Grid requests data in small chunks as the user scrolls (up/down).
  • Keyboard Support (Community Tech Preview - CTP) - Users can now access every UI element in the DevExpress Blazor Grid with a keyboard. Keyboard navigation is implemented on the client and works seamlessly in Blazor Server apps with a slow connection. Keyboard navigation uses TAB, Arrow, ENTER, and space bar keys.
  • Auto-Generated Cell Editors - The Blazor Grid can now automatically generate pre-configured column cell editors based on the type of data they display (including the Filter Row).
  • Foreign Key Column - You can now display values from external collections in columns that use a ComboBox to display and edit cell values (DxComboBoxSettings).
  • Checkbox Column - The Blazor Grid now displays checkboxes (instead of text strings) in columns with Boolean values. Use the DxCheckBoxSettings.ShowCheckBoxInDisplayMode property to specify whether to use checkboxes or strings to represent Boolean values.
  • Fixed (Pinned) Columns - Use the new FixedPosition property to anchor columns to the left or right side of the Grid. Fixed columns always remain visible when a user scrolls the Grid horizontally. Just like regular columns, users can resize, show, and hide fixed columns. Users can also reorder columns pinned to the same side of the Grid.
  • Move and Resize a Column Chooser Window - Users can now resize and move a Column Chooser window. Use the ShowColumnChooser method to display the Column Chooser at the desired position.
  • Truncated Text and Tooltips - Added a new TextWrapEnabled option. When this option is disabled, the Blazor Grid truncates long text in cells, column headers, and summaries. Cells, columns, and summaries with truncated text automatically display a tooltip.
  • New Scrolling API - New MakeRowVisible and MakeDataItemVisibleAsync methods allow you to navigate to a specific row when paging or scrolling is enabled.
• Accordion
  • New Render and Size Modes - The DevExpress Blazor Accordion component now uses the optimized rendering engine - first introduced in November 2022 (instead of Bootstrap).
• Data Editors
  • DateEdit - Client Time Zone Support - The Devexpress Blazor DateEdit control now computes/accepts time zone on the client-side (to highlight the current date, handle the Today button click). The DateEdit also converts DateTimeOffset values based on time zone on the client-side to correctly display date/time for Web applications with different client and server time zones.
  • ComboBox - Selected Item Template (Edit Box) - Use the EditBoxTemplate property to customize selected item appearance (displayed in the edit box). Also introduced a new DxInputBox component. You can place it within an edit box template to enable user input and filter mode.
• Menu and Context Menu
  • New Render and Size Modes - The Menu and Context Menu components now use the optimized rendering engine - first introduced in November 2022 (instead of Bootstrap).
  • Miscellaneous Enhancements - The new SubMenuCssClass property allows you to customize the appearance of drop-down items.
• Popup (Modal Window)
  • Move and Resize - Users can now resize and move modal dialogs within the browser. Activate AllowResize and AllowDrag settings to enable new UX options. Use the DxPopup.PositionX and DxPopup.PositionY properties to specify dialog location.
• Reporting
  • Blazor Report Viewer - Added new zoom options including:
    • Page Width - Zooms a page to fit page width.
    • Whole Page - Scales a page to display the entire page.
    • Changed the default zoom level so that it is now Whole Page.
  • Blazor Report Viewer - Support for WebAssembly, Ahead-Of-Time (AOT) Compilation, and .NET MAUI Blazor - The Native Blazor Report Viewer component supports the Blazor WebAssembly (WASM) hosting model and ahead-of-time (AOT) compilation. You can now preview, print, and export reports in your browser (with no need for an ASP.NET Core backend). The Project Templates have also been extended with a WebAssembly Reporting Application option. You can leverage the capabilities of the Native Blazor Report Viewer component within .NET MAUI apps by hosting the component within the BlazorWebView.
• Scheduler
  • Client Time Zone Support - The Devexpress Blazor Scheduler computes/accepts time zone on the client-side (for example, to display current date and time).
  • Custom Edit Form - Use the new AppointmentFormShowing event to display your own UI for editing appointments.
  • Appointment Edit Form and Appointment Tooltips - Header Customization:
    • Added new templates that allow you to customize appointment tooltip and edit form headers (for example, to add buttons).
    • The Blazor Scheduler now ships with new events that allow you to prevent specific tooltips and edit forms from being displayed/hidden.
  • Customize User Experience - New API:
    • Added new events that fire in response to user actions (for example, create, edit, move, resize appointments).
    • Handle these events to implement custom behavior or cancel the action based on a specific condition. New APIs allow you to easily implement role-based apps where a user can interact with specific appointments based on pre-defined permissions.
• Tabs
  • Tab Header Position - You can now use the TabsPosition property to specify where tab headers appear relative to tab content. Display options include:
    • Above.
    • Below.
    • Left / Right.
  • Miscellaneous Enhancements:
    • The new TabIconUrl property allows you to load tab header icons from URLs.
    • The Tooltip property now allows you to specify tooltips for tab headers.
• TreeView
  • New Render and Size Modes - The DevExpress Blazor TreeView component now uses the optimized rendering engine first introduced in November 2022 (instead of Bootstrap).
  • Check/Uncheck Nodes - The Blazor TreeView can now display checkboxes for nodes and a checkbox that checks/unchecks all nodes. Available options include: Multiple, Recursive and Disabled.
  • Vertical Scrolling - The TreeView component now automatically displays a vertical scroll bar when its nodes do not fit in the viewport.
  • API Enhancements:
    • DxTreeView.AllowSelection - Specifies whether to allow users to select nodes.
    • DxTreeViewNode.TextWrapEnabled - Allows you to specify whether to wrap or truncate long text in node cells.
• Window
  • Move and Resize Performance Enhancements - Optimized the Blazor Window component for smoother response in Blazor Server and Blazor WebAssembly applications.
  • Display Multiple Windows - You can now have multiple windows open at the same time. Users can switch between open windows as needed.
  • Window Resize Enhancements - The size grip has been hidden. Users can resize the window by dragging its edge.
• Miscellaneous Enhancements
  • Form Layout - The DxFormLayoutGroup.HeaderIconUrl and DxFormLayoutTabPage.HeaderIconUrl properties now allow you to load header icons from URLs.
  • Grid and Stack Layout - The ItemContainerCssClass property now allows you to apply a CSS class to the inner container and specify CSS properties that affect layout items (for example, gap).