Released: Jun 13, 2024

24.1 での更新項目

機能

Microsoft ASP.NET Core

• ASP.NET Core - Data Validation
  • Standalone Editor Validation - With this release, you can use Razor syntax (in addition to Model-based method) to add validation rules directly to DevExtreme Editors. This method can be used in the following situations:
    • Modifying validation rules when model changes are impossible, such as when models are shared across views.
    • Adding extra editors to a view and defining associated validation rules independent of a model.
  • Remote Attribute - AdditionalFields Property Support - In ASP.NET Core, the Remote attribute facilitates client-side validation. Its AdditionalFields property enables server-based validation of field combinations. This release introduces support for the AdditionalFields option in the DevExtreme DataGrid and TreeList.
• ASP.NET Core - Rich Text Editor
  • New Table API - With this release, the DevExpress Rich Text Editor for ASP.NET Core now allows you to modify table layout, decoration, and structure at runtime.
  • HTML Export/Import - The Rich Text Editor now supports the import and export of documents in HTML format. You can add HTML markup to the main sub-document (insertHtml method overloads), obtain HTML text and markup of the main sub-document (getHtml method overloads), and download document content to a file in HTML format.
• New Splitter Component
  • The new Splitter component allows you to divide a page or section into multiple adjustable panes.
  • The Splitter component can be oriented either vertically or horizontally. Orientation affects the following pane-related properties (can be specified in pixels or percents):
    • size - Specifies initial width (horizontal orientation) or height (vertical) of the pane.
    • maxSize, minSize - Defines resizing limits for the pane.
    • collapsedSize - Specifies the size of a collapsible pane when collapsed.
  • Splitter panes can contain multiple content types, ranging from simple HTML to complex components. You can place HTML markup inside the item tag or use the following properties to populate panes with content:
    • itemTemplate - Defines a custom template for all panes.
    • template - Sets a custom template for each specific pane.
• UI/UX and API Enhancements
  • DropDownButton - Custom Button Template - With this release, you can replace the base button in DropDownButton with custom content (such as an avatar or multiline text).
  • Menu/ContextMenu - Item Scrolling - Submenus that exceed page size (in Menu or ContextMenu) can now be scrolled. You can use CSS stylesheets to customize submenus as needs dictate. In the Menu component, use the onSubmenuShowing function to configure scroll-related settings. For instance, you can restrict the size of the submenu when item count surpasses a specified limit.
  • Form - Group Caption Custom Content - The new Form groupItem.captionTemplate option enables custom content replacement for group captions.
  • HTML Editor - Spellcheck and CSP Support - The DevExtreme HTML Editor now uses spellcheck functionality across all supported browsers. This addition enhances text editing capabilities through real-time spelling correction/suggestion support. Previous versions required Content Security Policy (CSP) directives when passing markup with inline styles to the HTML Editor. The DevExtreme HTML Editor in this release fully supports CSP.
• Reduce JS Bundle Size - The DevExtreme bundle size has been reduced by making the following changes:
  • Code used by supported browsers is no longer transpiled.
  • Eliminated time zone data stored in the bundle and switched to internal browser time zone engine.
• New Angular DxHttpModule
  • Simplified Request Interception - Angular HttpClientModule is a module that simplifies HTTP requests. It supports request and response interceptors, which allows you to introduce capabilities such as authentication tokens or logging across all HTTP requests.
    • Previously, the DataSource, FileUploader, and Map components depended on non-native Angular Ajax requests for server communication.
    • With this release, these components have been transitioned from Ajax to the HttpClientModule. Simply import the DxHttpModule to activate this new functionality.
• Shadow DOM Support (CTP) - Shadow DOM represents one of three Web Components specifications, complemented by HTML templates and Custom Elements. Shadow DOM allows the attachment of a hidden, separate Document Object Model (DOM) to an element, termed the 'Shadow Host'. This hidden DOM, called the 'Shadow DOM', can contain additional nested Shadow Hosts, forming a structure known as a Shadow Tree. It's a direct method to create components with isolated CSS and JavaScript. Many everyday web interfaces use Shadow DOM (a feature available in all major browsers). This release introduces Shadow DOM support in Angular, React, and Vue as a Community Technology Preview (CTP).
• Accessibility
  • Accessibility-related enhancements in this release include NVDA support for improved keyboard navigation and pronunciation support across the following components:
    • Tabs.
    • TabPanel.
    • TagBox.
    • List.
    • DropDownButton.
    • Calendar.
    • DataGrid with Master-Detail.
  • DataGrid and TreeList now meet the Status Messages criterion.

Blazor

• New TreeList (CTP)
  • The new Blazor TreeList allows you to organize, display, and navigate hierarchical data with absolute ease. The component ships with the following integrated capabilities:
    • Data Sorting.
    • Filter Row with Auto-Generated Editors.
    • Total Summaries.
    • Single and Multiple Node Selection.
    • Focused Row.
    • Header Bands.
    • Paging and Scrolling.
    • Virtual Scrolling.
    • Toolbar.
    • Keyboard Support.
  • Bind to Flat Data - The Blazor TreeList component can be bound to any traditional data source. Since the TreeList is designed to display information using a tree structure, its data source must meet specific requirements. If a data source contains flat data, two additional fields are necessary to build the appropriate tree structure:
    • A field that contains a node's unique identifier. Assign this field to the KeyFieldName property.
    • A field that contains the unique identifier of a node's parent. Assign this field to the ParentKeyFieldName property.
  • Bind to Server-Side Data
    • You can also bind the DevExpress Blazor TreeList component to the DevExtremeDataSource. This data source allows you to improve TreeList performance when binding large data sets for the following reasons:
      • The TreeList loads child nodes on demand (when user expands a node).
      • DevExtremeDataSource performs data filtering operations on the server.
    • To bind the component to DevExtremeDataSource, you must:
      • Assign a GridDevExtremeDataSource instance to the Data property.
      • Specify KeyFieldName and ParentKeyFieldName properties.
      • Specify the HasChildrenFieldName property. This property helps determine whether a node includes children and if the node requires an expand button.
  • Bind to Hierarchical Data - If each node in your data source includes a field with a list of child nodes, assign the field's name to the ChildrenFieldName property and bind the Data property to the data source.
    • Alternatively, you can assign a collection of root nodes to the Data property and handle the ChildrenLoading event to populate nodes with children. In the event handler, use the Parent argument to determine the processed node and assign this node's children to the Children property.
  • Load Data on Demand - The DevExpress Blazor TreeList allows you to initially load only root nodes and retrieve node children when a node is expanded for the first time. To switch the component to on demand mode, follow the steps below:
    • Assign root data items to the Data property.
    • Specify the HasChildrenFieldName property.
    • Handle the ChildrenLoadingOnDemand event. In the event handler, use the Parent argument to determine the processed node and assign the node's children to the Children event argument.
• New HTML Editor - The Blazor HTML Editor allows you to format/display text and visual content and store it as HTML or Markdown. Users can apply inline formatting and modify font, size, and color as needs dictate. Additionally, the DevExpress Blazor HTML Editor offers the following integrated features:
  • Block formatting, including headings, text alignment, lists (bullet and numbered), code blocks, and quotes.
  • Variables support (for example, {{companyName}}): Among other use cases, this capability can be used to generate dynamic email content.
  • Toolbar with adaptive layout support.
  • Built-in toolbar customization.
  • Image Insert: You can upload an image from the local file system or specify a URL.
  • Table support.
  • Mentions support.
• New PDF Viewer (CTP) - The new DevExpress Blazor PDF Viewer component can display PDF file content directly in your DevExpress-powered Blazor app. The component allows you to navigate through the document, set zoom level, print, and download the document. Additionally, the CTP version of the Blazor PDF Viewer includes a single-page preview and toolbar customization option (such as rearranging, grouping, hiding, and adding items).
• New Map - The DevExpress Blazor Map component can display geo maps with markers and route info within your DevExpress-powered Blazor web app. The component retrieves relevant data from a GIS service (Bing, Google, or GoogleStatic - requires application authentication with an appropriate API key) and ships with the following capabilities:
  • Marker/route configuration and customization options.
  • Built-in map navigation and type controls.
  • Manual map adjustment (set Zoom and MapCenter).
  • Map and marker "click" support.
• New Polar Chart - The DevExpress Polar Chart for Blazor allows you to visualize data within a polar coordinate system - where each point on a plane is determined by the distance from the center and the angle from a fixed direction. The DevExpress Blazor Polar Chart component ships with the following capabilities:
  • Multiple series types: line, area, bar, stacked bar, and scatter.
  • Continuous, discrete, and logarithmic axis value support.
  • Spider web mode.
  • Chart element customization: labels, tooltips, legend, and many more.
• New Date Range Picker - The DevExpress Date Range Picker for Blazor allows you to select a range of dates within a single calendar dropdown. The component ships with the following integrated capabilities:
  • Minimum and maximum dates.
  • Special date highlighting.
  • Selected date formatting API.
  • Input validation.
  • Clear button.
  • Nullable date support and placeholder.
  • Automatic support for browser time zone and localization.
• New DropDown Box - The DevExpress Blazor DropDown Box is a customizable editor - designed to display/use a variety of UI elements within its drop-down window: from simple lists and trees, to grids, or any combination therein. You can assign an editor value programmatically based on page interactions.
  • The DropDown Box' value is not limited to a single object. It can be a collection of objects (for those looking to implement a multi-selection editor), or even a composite data item generated based on user selection made within the popup.
• New File Input - The new Blazor File Input component allows you to introduce file upload functionality to your Blazor app without creating a separate Web API project with an upload controller.
  • The Blazor File Input control supports multiple upload modes (Instant and OnButtonClick), can upload multiple files simultaneously, and allows you to validate file size and extension both on the client and server.
  • Handle the FilesUploading event to upload selected files. For each file, the event supplies a Stream you can open to read file content. Once the read operation is complete, you can send the file to another destination, save it to the file system, or display the file content on a web page.
• New Drawer - The new Blazor Drawer component allows you to add a "dismissible" navigation side panel to your web application. The control includes the following features:
  • Left-side and right-side position.
  • Overlap and shrink display modes.
  • The minimized drawer state.
  • Header, body, and footer templates.
• New Toast - The new Blazor Toast component allows you to notify users about processes and events. Notification messages can remain visible until a user clicks the close button or closed automatically after a predetermined amount of time. The DevExpress Blazor Toast component supports four theme modes (Dark, Light, Pastel, and Saturated) and the following notification styles:
  • Danger.
  • Info.
  • Primary.
  • Success.
  • Warning.
• New Progress Bar - The new DevExpress Blazor Progress Bar component allows you to communicate the status of ongoing processes with end-users. When progress cannot be estimated, the component can display an infinite moving bar. The control includes the following integrated features:
  • Horizontal, vertical, and circular layout.
  • Four statuses to indicate process state: InProgress, Warning, Error, and Success.
  • Indeterminate state.
  • Element customization: icon, label, and bar thickness.
• New Bar Gauge - The Bar Gauge for Blazor allows you to display data as circular bars where each bar indicates a single value. The component ships with the following capabilities:
  • Geometry and layout configuration.
  • Palette customization.
  • Export and printing support.
  • Real-time data updates.
  • Gauge element customization: labels, tooltips, legend, and many more.
• New Sparkline - The new Blazor Sparkline component allows you to display value trends using a compact UI metaphor. You can use the DevExpress Blazor Sparkline as a standalone component or embed it into other UI controls. Sparkline allows you to configure all series and point settings at the root component level. Sparkline applies corresponding settings based on the Type property value (which defines series type). In addition to series and point settings, you can configure tooltips and customize the component's container. Sparkline includes built-in export and print capabilities. You can call the ExportToAsync method to export data to a file (PNG, PDF, JPEG, or SVG) or call the GetSvgMarkup method to obtain the component's SVG markup.
• New Rendering Engine - The following DevExpress Blazor components now use the optimized rendering engine (instead of Bootstrap):
  • Charts.
  • Rich Text Editor.
  • Scheduler.
  • Pivot Grid.
  • Upload.
  • Report Viewer.
• Keyboard Support - To address accessibility standards and improve user experiences for those with disabilities, this release adds keyboard navigation support for the following Blazor UI components:
  • Date Edit.
  • Time Edit.
  • Tree View.
  • Accordion.
  • ComboBox.
  • List Box.
  • TagBox.
  • Rich Text Editor.
  • Upload.
  • Report Viewer.
• Project Templates
  • .NET 8 Authentication and Authorization - The Blazor project templates for .NET 8 include an option to add ASP.NET Core Identity and Token-based Authentication to your projects. In addition to the necessary infrastructure, the templates generate an authentication interface powered by DevExpress Blazor components.
• Grid
  • Header Bands - The DevExpress Blazor Grid can now arrange its columns into logical groups called bands. Each band contains its own header displayed above column headers. Columns without a band span the entire band region. The Grid also supports multi-level bands wherein a band can display other bands within it.
    • While end-users can reorder columns within bands or move them to the Group Panel, column movement between bands is restricted.
    • The Grid's Column Chooser has also been updated to support Header Bands. It displays bands and columns hierarchically and allows end-users to toggle the visibility of entire groups, not just individual columns.
  • Export Server-Side Data - This release introduces Blazor Grid data export functionality for any supported server-side data/Server Mode sources (GridDevExtremeDataSource, or CustomDataSource). Remote data can be exported to XLS, XLSX, and CSV formats. The DevExpress Blazor Grid can now fetch records from a remote data source to/from the exported document. While fetching records, the Grid displays a loading indicator. To avoid flickering, the indicator is displayed only during estimated fetch time.
  • New Cell Editor Appearance - In-place editors in the filter row, edit row, and edit cells of the DevExpress Blazor Grid ship with a new improved look/feel - and automatically display validation icons, when required. The appearance of grid cells is now consistent in both display and edit modes.
  • Cell Editing Enhancements - The Blazor Grid's Edit Cell mode feature is now official and includes Virtual Scrolling support. It now ships with the following enhancements:
    • Users can now change a check box value with a single click.
    • The Grid automatically selects cell text when the cell switches to edit mode.
    • The Grid now automatically updates the focused row when switching to edit mode.
    • The Grid's new GetEditContext method allows you to obtain edit context at any time.
    • Column text alignment affects editors displayed inside the column.
  • Keyboard Navigation Enhancements and New Tab Navigation
    • In this release, the Blazor Grid ships with enhanced keyboard navigation and virtual scrolling support. The Grid component now automatically activates keyboard navigation and built-in shortcuts (Note: You may want to remove the KeyboardNavigationEnabled property from your project as it's now obsolete).
    • The Tab key navigates between all Grid cells regardless of a cell editor's active state. Users can also leave the table area by pressing Ctrl + Up or Ctrl + Down (Alt + Up or Alt + Down on Mac).
    • Improved the RowClick event. With this release, this event allows you to implement custom actions in response to mouse clicks and after a user presses Enter when a data row has focus.
  • Built-in Value Posting - Added the following new method to EditModelSaving event arguments: CopyChangesToDataItem. This method allows you to copy all changes made to the edit model during editing. Complex field values can be copied as well.
  • DateOnly and TimeOnly Support - With this release, the Blazor Grid component supports DateOnly and TimeOnly types for the following:
    • Sorting.
    • Filtering.
    • Hierarchical Filter Menu for DateOnly values.
    • Grouping.
    • Summaries.
    • Auto-generated cell editors.
    • Interval grouping for DateOnly values.
    • Value formatting using DisplayFormat.
    • Excel Export.
  • Enable/Disable Skeletons - The DevExpress Blazor Grid no longer displays skeletons by default when Virtual Scrolling is used with local data. Since rows in a local data source are usually rendered quickly, this new behavior produces a more fluid experience, with fewer visual updates. Skeletons are still enabled by default for remote data sources (for record loading from a server or database). You can now use the SkeletonRowsEnabled property to control skeleton behavior - enable it for local sources or disable it for remote sources if server response time is acceptable.
  • Highlight Rows on Hover - To highlight Blazor Grid rows when hovering rows, simply enable the new HighlightRowOnHover property (highlight color is based on the theme used within your DevExpress-powered Blazor app).
• Charts
  • Annotations - The new Blazor DxChartAnnotation object allows you to create chart annotations - comments that contain information about chart content. You can populate annotations with image or text content. You can also anchor annotations to chart elements (series points or axes) or position annotations based on pixel coordinates. DevExpress Blazor Chart components also allow you to customize annotations as needed - you can configure annotation borders and shadows, image and text settings.
  • Strips - The new Blazor DxChartAxisStrip object allows you to create and configure axis strips. You can use a strip to highlight a range between two axis values or an area above/below a value. These highlighted areas help users determine whether a point falls in or out of a predefined range. You can also add a DxChartAxisStripLabel object to strip markup to display and configure strip labels.
  • Error Bars - The new DxChartSeriesValueErrorBar object allows you to configure error bars (indicate measurement precision or uncertainty). They display a possible value range next to a series point. Error bars can display fixed values or percentages, statistical function values, or error values obtained from data source fields.
  • Tooltip Enhancements - This release introduces extended tooltip functionality for DevExpress Blazor Chart components. You can now change tooltip visibility for individual series points in code. To display a tooltip for a particular series point, call component-specific ShowTooltip method overloads (DxChart.ShowTooltip, DxPieChart.ShowTooltip, or DxPolarChart.ShowTooltip). To hide the tooltip, call the HideTooltip method. You can also handle the TooltipShowing event to obtain information about a tooltip before it appears (or cancel the tooltip as needed).
  • Label Customization Enhancements - Expanded the list of available label customization settings. You can now set individual text for each point label using the Texts property. Moreover, you can modify the following properties for point labels:
    • Alignment.
    • HorizontalOffset.
    • VerticalOffset.
    • RotationAngle.
    • ShowForZeroValues.
    • Font.
    • Border.
  • Live Update Enhancements - Extended the Blazor Chart's live update capabilities and introduced Length and VisualRangeUpdateMode properties. These enhancements allow the chart to retain its visual state (zoom and scroll position) when Chart data changes.
  • API Enhancements
    • PieChart settings:
      • SegmentDirection - Specifies the direction in which the chart arranges series slices.
      • StartAngle - Specifies the angle at which the chart positions the first series slice.
    • Axis settings:
      • WorkdaysOnly - Specifies whether the chart displays only workdays on the axis.
      • WorkWeek - Specifies weekdays DxChart treats as workdays.
      • WorkDates - Specifies dates DxChart treats as workdays.
      • Holidays - Specifies dates DxChart marks as holidays.
    • Axis Range settings:
      • Length - Specifies range length.
      • MinVisualRangeLength - Specifies the minimum length of the visual range.
      • VisualRangeUpdateMode - Specifies how the visual range behaves if new points are added to the data source.
• New ComboBox and TagBox
  • The DevExpress Blazor ComboBox and TagBox components have been rebuilt, maintaining their existing API while revamping visual and data layers for improved stability, visuals, and performance.
    • Performance Enhancements - Overall ComboBox and TagBox performance has been improved significantly. Tasks like opening the dropdown, searching, or navigating through items are now more responsive. In addition, startup times for ComboBox/TagBox have been reduced by up to three times. This boosts overall performance for forms that contain these editors and any components utilizing ComboBox/TagBox internally, such as the Blazor Grid, Rich Text Editor, Scheduler, and Toolbar.
    • Search Across Multiple Columns - The ComboBox and TagBox can now search for text in any defined column, even columns whose values are not displayed in the edit box. Use the new SearchEnabled property to exclude specific columns from search when necessary.
    • New Search API - In addition to 'Contains' and 'StartsWith', ComboBox and TagBox include an 'Equals' condition for searching within collections of similarly named items. The new SearchTextParseMode property also defines how editors interpret search strings divided by spaces:
      • GroupWordsByAnd - search words are treated as individual conditions grouped by the AND logical operator; only items that match all of the words are displayed.
      • GroupWordsByOr - search words are treated as individual conditions grouped by the OR logical operator; items that match at least one of these words are displayed.
      • ExactMatch - search words are not treated separately; only items that match search text (exact match) are displayed.
    • New Templates - Introduced new templates for ComboBox and TagBox to simplify popular customization usage scenarios:
      • ColumnCellDisplayTemplate - allows you to implement custom formatting for values in a multi-column ComboBox/TagBox.
      • ItemDisplayTemplate/TagDisplayTemplate - these templates are similar to ItemTemplate/TagTemplate (available previously), but offer information about the underlying data item, value, and displayed text in context.
      • EmptyDataAreaTemplate - allows you to customize the area displayed when the ComboBox/TagBox popup displays no items.
    • Keyboard Navigation Enhancements - Both ComboBox and TagBox now use a client-side keyboard navigation engine in their dropdowns. This makes keyboard navigation more responsive in Blazor Server apps since each keystroke doesn't need to be sent to the server. In addition, keyboard navigation is now more stable when used in combination with Virtual Scrolling.
• List Box
  • New Search and Filter API - The DevExpress Blazor List Box introduces new API that allows you to connect it to external search/filter UI elements:
    • SearchText - sSpecifies text used by the List Box to filter and highlight search results.
    • SearchTextParseMode - Specifies how the List Box interprets search strings divided by spaces.
    • SetFilterCriteria/GetFilterCriteria/ClearFilter - Allows you to apply filters (of any complexity) using the CriteriaOperator language.
  • New Scroll API - The following new APIs allow you to scroll to a specific ListBox item:
    • MakeItemVisible - scrolls to an item with a specified visible index.
    • MakeDataItemVisibleAsync - finds a data item in the list and scrolls to it.
• Date Edit and Time Edit
  • DateOnly and TimeOnly Support - DevExpress Blazor Date Edit and Time Edit components now support DateOnly and TimeOnly values, respectively. All editor features - including masks, formatting API, and validation - now function properly with these new data types.
• File Management
  • New Upload Appearance - The Blazor Upload component's file list ships with a revamped look and feel. To make the list more understandable and visually compact, the common progress bar has been removed, resized and rearranged UI elements, updated icons, and text has been added to certain action buttons.
• Form Layout
  • Item Caption Template - The new DxFormLayoutItem.CaptionTemplate property allows you to set icons, buttons, links, or other elements near each LayoutItem caption.
• Rich Text Editor
  • New Table API - With this release, the DevExpress Rich Text Editor for Blazor allows you to modify table layout, decoration, and structure at runtime.
  • HTML Export/Import - Added support for document import/export in HTML format. You can add HTML markup to the main sub-document (AddHtmlAsync method overloads), obtain HTML text and markup of the main sub-document (GetHtmlAsync method overloads), and download document content to a file in HTML format.
  • Context Menu Customization - This release introduces extended UI customization options for the DevExpress Blazor Rich Text Editor. You can now customize the component's context menu and associated sub-menus.
• Scheduler
  • Multiple Resources - The Blazor Scheduler allows users to assign multiple resources to an appointment. With this release, users can create meetings with multiple participants, group events, or services that require coordination among multiple resources.
  • Built-in Scroll Bars - The DevExpress Blazor Scheduler component now automatically displays a scroll bar when cells don't fit within control boundaries/size.
  • Scroll API - This release ships with a new ScrollTo() method. This method scrolls the view area to a specified date or appointment. When used, ScrollTo() can help you focus user attention on the most important time/appointment/event within the currently displayed view (for example, the beginning of a work day).
  • Recurrence Form Customization - Enhanced the Scheduler's AppointmentFormShowing event. It now allows you to customize recurrence options for both Appointment and Recurrence forms. For instance, you can modify the list of items available in the Appointment form's Repeat section as needs dictate:
  • Day, Week, WorkWeek Views - Minimum Cell Width - You can now specify the minimum width of a day cell in day, week, and work week views. Pass the integer value to the CellMinWidth property to set this width in pixels.
• Window and Popup
  • Drag And Drop Using Multiple Window Elements - You can now disable the new DxPopup.AllowDragByHeaderOnly / DxWindow.AllowDragByHeaderOnly option to allow users to drag and drop a window by its header, body, or footer.