DevExpress ASP.NET 21.2

Microsoft Visual Studio 2022 Support

• DevExpress installers now ship separate VSIX extensions for Visual Studio 2022 to ensure that all major design-time tools (like the "DevExpress" menu, DevExpress Template Gallery, Toolbox, etc.) are fully functional.

Blazor UI Components

New Blazor DropDown

• The new Blazor DropDown component allows you to display a non-modal drop-down window within a Blazor application. The DropDown includes the following integrated features:
  • Header, Body, and Footer Customization.
  • Position Customization.
  • Position Restrictions.
  • Custom Size.
  • Resizing.
  • Scrolling.
  • Show and Close Actions.

New Dashboard

• Added localization support and includes a new API to unregister extensions. Note: DevExpress Dashboard ships as part of the DevExpress Universal Subscription.

New Rich Text Editor

• The Rich Text Editor allows you to incorporate advanced text editing functionality into your Blazor app. You can create, open, edit, convert, save, and print rich-formatted text files (DOCX, RTF, TXT). Features include:
  • Ribbon UI.
  • Print Layout / Simple View.
  • Horizontal Ruler.
  • Character & Paragraph Formatting.
  • Bullets & Numbering.
  • Header & Footer.
  • Document Sections.
  • Table of Contents.
  • Bookmarks & Links.
  • Page Numbers.
  • Fields.
  • Pictures & Text Inputs.
  • Dialogs.
  • Undo / Redo.
  • Localization.

Grid (CTP)

• Data Editing and Input Validation
  • The Blazor Grid now allows you to edit associated data within a standard edit form or a popup edit form. To enable data editing:
    • Create an edit form template and assign it to the EditFormTemplate property.
    • Handle the EditModelSaving event to post changes made in the edit form to a data source.
    • Set the EditMode property to 'PopupEditForm' to display the edit form as a popup.
  • The Blazor Grid automatically validates user input based on data annotation attributes. You can also apply and use custom data validation rules.
• Filter Row
  • Blazor Grid now ships with an integrated Filter Row. The Filter Row displays in-place text editors for all associated data columns. The Grid creates a filter condition based on editor values and applies this condition to the corresponding column. To display the Filter Row, enable the ShowFilterRow option.
  • Added the following new options to help you customize the Filter Row as requirements dictate:
    • FilterRowOperatorType – Specifies the comparison operator used to create filter conditions (Equals, Contains, StartsWith, Greater, Less, etc.).
    • FilterRowValue - Specifies the initial value in a filter row cell.
    • FilterRowCellTemplate - Allows you to display a custom editor in a filter row cell.
    • FilterRowEditorVisible - Specifies whether to display the filter row editor.
  • You can also manage filter options in code. Call the FilterBy method to filter Grid data and the ClearFilter method to reset the applied filter.
• Command Column
  • Added a new Command Column (DxGridCommandColumn) which can display CRUD-related commands (New, Edit, Delete) for each row. It can also clear the filter applied within the Grid's Filter Row.
• Row Selection
  • Blazor Grid now supports single and multiple row selection. Use the SelectionMode property to specify the desired selection mode. To select/deselect rows with a pointing device, enable the AllowSelectRowByClick option.
  • The Blazor Grid also ships with a new column type - DxGridSelectionColumn. This column can display a checkbox (with multi-select support) or radio buttons in single selection mode.
  • Added new methods to help manage record selection in code:
    • SelectRow / DeselectRow.
    • SelectRows / DeselectRows.
    • SelectDataItem / DeselectDataItem.
    • SelectDataItems / DeselectDataItems.
    • SelectAllOnPage / DeselectAllOnPage.
    • ClearSelection.
  • To access selected data items in code, use the SelectedDataItems property.
• Group Footer Summary
  • You can now display group summary values within group footers. To display group summary values, set the summary item’s FooterColumnName property to the name of a group footer column.
• Group Footer Templates
  • Added new DxGrid.ColumnGroupFooterTemplate and DxGridColumn.GroupFooterTemplate properties which allow you to customize group footers as needed.
• Group Footer Display Mode
  • Added a new GroupFooterDisplayMode property which allows you to specify the manner in which group footers are displayed. Available options include:
    • Auto.
    • Always.
    • Never.
    • IfExpanded.
• Vertical and Horizontal Scrolling
  • The Blazor Grid now displays a vertical scrollbar when content height exceeds the height of the component itself.
  • A horizontal scrollbar automatically appears when total width (of all columns) exceeds the width of the component itself.
• Pager Customization
  • The DevExpress Blazor Grid includes the following pager-related customization options:
    • PagerVisible - Specifies whether the Grid displays its pager.
    • PagerPosition - Specifies pager position (at the bottom, the top, or both at the bottom and the top).
    • PagerNavigationMode - Sets the navigation mode available to users (use numeric buttons, use the input box, or automatic).
    • PagerSwitchToInputBoxButtonCount - Specifies the number of pages used when the pager automatically switches from numeric buttons to the input box.
    • PagerAutoHideNavButtons - Hides the pager's built-in navigation buttons when all numeric buttons are displayed on-screen.
    • PagerVisibleNumericButtonCount - Specifies the maximum number of numeric buttons displayed within the pager.
• Page Size Selector
  • Users can now modify page size at runtime. To display the Blazor Grid's page size selector, enable the PageSizeSelectorVisible option. Use the PageSizeSelectorItems property to define available page size values.
  • To display all records in the underlying data source, enable the PageSizeSelectorAllRowsItemVisible option (the page size selector will include "All" within the page size list).
• Column Width Enhancements
  • Improved the algorithm used to manage column width and added a MinWidth property. By default, minimum column width is 50 pixels.
• Column Text Alignment
  • The Blazor Grid automatically aligns text within data cells/footer cells based on column type and bound data type. Use the new TextAlignment option to specify text alignment as needs dictate.
• Column Name
  • Added a Name property to all Grid columns. Use this property to specify the column’s unique identifier.
• Access Data Item
  • You can now access the processed data item within data-related event handlers (CustomSort, CustomGroup, CustomSummary, etc) and the CellDisplayTemplate.

Data Grid

• Extended the capabilities of the original Blazor Data Grid (DxDataGrid) with the following features:
  • Optimized JavaScript interop operations for speed and stability.
  • A column's Visible, SortIndex, SortOrder, GroupIndex, VisibleIndex properties now support two-way data binding.
  • You can now bind the grid to a dynamic object with compound property names.
  • HtmlDataCellDecoration event now supports INotifyPropertyChanged data objects.
  • You can now create/render grid columns based on a condition.

Charting

• New Pie/Donut Chart Component
  • The Blazor Chart has been split into two distinct components:
    • DxChart - represents Cartesian charts.
    • DxPieChart - represents Pie and Donut charts.
  • Added the following new properties for the Pie/Donut Chart:
    • Diameter.
    • MinDiameter.
    • InnerDiameter.
• Localization
  • You can now localize months and days (numeric and date formats now correspond to the current thread locale).
• Custom Position of an X-Y Axis
  • The following new properties allow you to customize X-Y axis position:
    • Alignment.
    • CustomPosition.
    • CustomPositionAxisName.
    • Offset.
• Side-by-Side Stacked & Full-Stacked Bar Charts
  • You can now create side-by-side Blazor Bar Charts. Use the new Stack property to specify the desired chart stack.
• Series and Constant Line Appearance
  • The new Blazor Charts DashStyle property allows you to specify a dash style for a line series or a constant line. The following settings to control the appearance of constant lines have been added:
    • Color.
    • DisplayBehindSeries.
    • ExtendAxis.
• Break Series on Empty Points
  • The Blazor Chart component now includes a new BreakOnEmptyPoints option. Enable this option to display empty points (points with undefined/null values) as breaks.
• Axis Major and Minor Ticks
  • This release includes two new Blazor components: DxChartAxisTick and DxChartAxisMinorTick. Use the following options to customize the appearance of major (AxisTick) and minor ticks (AxisMinorTick):
    • Visibility (Visible).
    • Color.
    • Length.
    • Shift.
    • Width.
    • Opacity.
• Zero Value Always Visible
  • The Blazor Chart component's value axis now always displays a zero value for Area and Bar series. For other series types (like Line, Point and Range), zero values may be omitted. To display a zero value regardless of series type and value(s), use the ZeroAlwaysVisible property.
• Refresh and Redraw Blazor Charts Manually
  • You can now refresh and redraw your Blazor Chart as needs dictate.
    • RefreshData - updates the Chart control to reflect changes made to the underlying data source and then redraws the Chart control.
    • RedrawAsync - forces the Chart control to redraw itself (immediate redraw).
• Limit the Maximum Number of Auto-Generated Scale Breaks
  • You can now use the MaxAutoBreakCount property to limit the maximum number of auto-generated value axis breaks (when the AutoBreaksEnabled property is set to 'true').

Data Editors

• Date Edit - Date Time Offset Type Support
  • You can now bind the Blazor Date Edit component to DateTimeOffset and DateTimeOffset? data types.
• ComboBox, ListBox, and TagBox - Item Template
  • The Blazor ComboBox, ListBox, and TagBox components now support item templates. Use the 'ItemTemplate' property to define your custom template.
• ComboBox - Validate by Text or Value
  • Use the ValidateBy property to validate the editor based on its text or underlying value.
• SpinEdit - Enable/Disable Mouse Wheel
  • The Blazor SpinEdit now ships with a new AllowMouseWheel property (prevents users from modifying the editor's value with the mouse wheel).
• Button - Navigate URL
  • The Blazor Button component now ships with a new NavigateUrl property (URL used when a button is clicked).
• CheckBox - API Enhancements
  • This release includes the following Blazor CheckBox-related API enhancements:
    • AllowIndeterminateState - Enables indeterminate checkbox state.
    • LabelWrapMode - Specifies CheckBox label wrap mode. Available values: WordWrap, Ellipsis and NoWrap.

Navigation and Layout

• Form Layout - Disabled and Read-Only States
  • The Blazor Form Layout component and its associated layout elements (items, groups, and tab pages) now support disabled and read-only states (new Enabled and ReadOnly properties).
• Form Layout - Tab Page Header CSS
  • The DxFormLayoutTabPage component now ships with a new HeaderCssClass property (applies a custom CSS class to tab page headers).
• Form Layout Groups - Header Template and API Enhancements
  • Groups within the Blazor Form Layout component now support header templates - HeaderTemplate.
  • You can also use the HeaderCssClass property to assign a custom CSS class to a group header. To assign a CSS class to the entire group, use the CssClass property.
• Tabs - Scroll Modes
  • You can now use the new DxTabs.ScrollMode property to specify navigation options when tabs do not fit within a container (width). The following tab scroll modes are available:
    • NavButtons - Users can navigate to non-visible tabs in the following manner: via navigation buttons, or by hovering the mouse pointer over a tab, holding the Shift key, and scrolling the mouse wheel.
    • Swipe - User can navigate to non-visible tabs in the following manner: via a wipe gesture or by hovering the mouse pointer over the container, holding the Shift key, and scrolling the mouse wheel.
    • Auto - Tab scroll mode adapts to device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
    • NoScroll - Users cannot scroll to non-visible tabs. Tabs that do not fit the container are moved to a new tab row.
• Context Menu - Templates
  • You can now customize the content and appearance of Context Menu items. Use the following properties to specify common templates for all items and templates for individual items:
    • DxContextMenu.ItemTemplate / DxContextMenuItem.Template - Templates used to display the entire area (for all or individual items).
    • DxContextMenu.ItemTextTemplate / DxContextMenuItem.TextTemplate - Text templates (for all or individual items).
    • DxContextMenu.SubMenuTemplate / DxContextMenuItem.SubMenuTemplate - Submenu templates (for all or individual items).
• Context Menu, TreeView - Bind to Flat Data
  • You can now bind the Context Menu and TreeView components to flat data with the following:
    • Context Menu - DxContextMenu.Data and DxContextMenu.DataMappings.
    • TreeView - DxTreeView.Data and DxTreeView.DataMappings.
• Menu - Bind to Data
  • You can now bind the Menu component to a data source. To bind a menu, use the component's Data and DataMappings properties. In bound mode, data source items are used to auto populate menu items.
• Popup Enhancements
  • You can now use the IsInitialized property to track a Popup's initialization state within code.
  • The Closing event's arguments now include a new property - CloseReason. This property identifies the action that initiated the close operation: Programmatically, EscapePress, CloseButtonClick, or OutsideClick.
• API Enhancements
  • DxToolbarItem.SubmitFormOnClick - Item click can submit a parent form.
  • DxTreeView.Target | DxTreeViewNode.Target - Specify the target attribute's value for all or individual nodes. In bound mode, DxTreeViewDataMapping.Target defines a mapping to a data source field with the target attribute's values.
  • DxTreeViewNode.IconUrl - Specifies the URL of a node's icon. In bound mode, DxTreeViewDataMapping.IconUrl defines a mapping to a data source field with icon URLs.

Scheduler

• Date Header, Resource Header, and Time Cell Customization
  • You can now customize the content and appearance of time cells, date headers, and resource headers.
• Snap to Cells
  • All Blazor Scheduler Views now include a SnapToCellsMode property. With this property, you can enable/disable the snapping of appointments to time cells or enable automatic snapping (based on appointment time intervals).
• Responsive Layout - Enhancements
  • The Blazor Scheduler component's Day, Week, and Work Week Views now have compact date headers. These Views also adapt date headers and the time ruler to small screens.
  • All Scheduler Views can also hide appointment captions (when space limits the component's ability to display the caption in full).
• HTML Cell Decoration
  • The new HtmlCellDecoration event allows you to customize the appearance of Scheduler cells.

Blazor Report Viewer

• Search, Document Map and Export Options Panels
  • The Blazor Report Viewer has now reached feature parity with the HTML5 Document Viewer. In this release, the following UI elements were added:
    • Export Options Panel.
    • Search Panel.
    • Document Map with Bookmarks.
• Multi-Page View
  • The Blazor Report Viewer can now display the entire document. You can scroll pages and zoom the view to see multiple pages at once.
• Content Security Policy (CSP) Support
  • You can now use the DevExpress Blazor components on websites with a Content Security Policy (CSP).

ASP.NET Controls

Charting

• Customizable Empty Points
  • The DevExpress Chart Control can now process gaps (within a data source) as empty points (points with undefined values). The appearance of these gaps can now be customized with different style options (based on Series view type). You can fully customize the appearance of point markers, line, and area segments for empty points.
  • You can also draw 'mock' points instead of gaps (based on values for neighboring Series points). Set the series view's EmptyPointOptions.ProcessPoints property to 'Interpolate'.

Diagram

• Touch Support Enhancement
  • Improved touch screen support in Chromium-based browsers (Google Chrome, Microsoft Edge and Opera).

Gantt

• Custom Callbacks
  • The new client-side PerformCallback method and server-side CustomCallback event allow you to send and handle custom requests between the server and the client.
• Visible Date Range
  • You can now specify a visible data range using the following server-side properties:
    • GanttViewSettings.StartDateRange.
    • GanttViewSettings.EndDateRange.
  • To specify the visible date range on the client side, use the SetStartDateRange and SetEndDateRange methods.
• Display/Hide Dependencies
  • Added a new UI element alongside new APIs to display/hide dependencies in the Gantt chart:
    • Show Dependencies Toolbar Item.
    • ShowDependencies().
    • ASPxGantt.GanttViewSettings.ShowDependencies.
• New Gantt API
  • This release ships with the following new APIs:
    • UnassignAllResourcesFromTask - Unassigns all resources from tasks.
    • ShowTaskDetailsDialog - Displays the 'Task Details' dialog.
    • ZoomIn and ZoomOut - Zooms in and out.
    • ViewTypeRangeMin and ViewTypeRangeMax - Limits zoom range.
    • ShowResources - Displays/hides resources.

General Enhancements

• This release includes quality-related enhancements for both the Web Forms/MVC data container controls (GridView, TreeList, and CardView) and the Web Forms/MVC Data Editors Library. Major enhancements include:
  • New client-side API for Batch Mode.
  • Improved adaptivity and accessibility.
  • Enhanced client and server architecture.

ASP.NET Core Controls

Data Grid

• Add New Row at a Specified Position
  • You can now specify where to insert a new row when using InsertBeforeKey or InsertAfterKey methods. Both properties accept a key for the row before/after which to insert the new row. For popular use cases, a NewRowPosition method has been added with a set of shortcut values:
    • "first"/"last" - Insert a new row at the beginning/end of the dataset.
    • "pageTop"/"pageBottom" - Insert a new row at the top/bottom of the current page.
    • "viewportTop"/"viewportBottom" - Insert a new row at the top/bottom of the viewport.

Data Grid and Tree List

• API Enhancements:
  • New Toolbar Customization API
    • You can now customize the DataGrid/TreeList Toolbar on-the-fly:
      • You can alter Toolbar items dynamically, at any time (in the past, you could only do so once when the Toolbar was created).
      • When using the DataGrid/TreeList within a React, Angular or Vue app, you can customize the toolbar declaratively without direct DOM manipulation.
    • Added a new Toolbar method that allows you to customize toolbar items in much the same way as a standalone Toolbar. Each DataGrid/TreeList Toolbar item can be specified as an object with the same structure as a standalone Toolbar. You can also specify an item using a predefined string name from the list of built-in DataGrid/TreeList commands (such as 'addRowButton', 'applyFilterButton','columnChooserButton', 'exportButton', 'groupPanel', 'revertButton', 'saveButton', 'searchPanel').
  • Disable Command Buttons
    • You can now disable certain command buttons for specific rows using the new Disabled column button's method.
  • Extended navigateToRow API
    • The navigateToRow method now returns a Promise object. You can now be notified when a background operation has finished.
• Virtual Scrolling Enhancements
  • Reworked the DataGrid/TreeList's Virtual Scrolling engine and introduced the following enhancements:
    • Optimized the row rendering algorithm to increases overall FPS.
    • Optimized the data loading algorithm to reduce the number of remote data requests.
    • Added a new scrolling.renderAsync property so you can render rows synchronously or asynchronously.
• Improved Search
  • Reduced false-positive matches when users search for numbers within the DataGrid's Search Panel. The DataGrid now matches search string with both original and formatted cell values, respecting column formatting.

HTML/Markdown Editor

• Table Management
  • This update includes the following table-related features:
    • Support for the 'thead' HTML tag (table headers).
    • Support for table and column resize operations via the new TableResizing method.
    • Context menu for table-related operations. To enable the menu, activate the TableContextMenu method.
    • Multiple paragraph support (<p> tag) within a table cell.
    • Table Context Menu customization.
    • Manage table/cell properties via built-in dialogs.
• Soft Line Breaks
  • The HTML/Markdown Editor now includes a new AllowSoftLineBreak method. When enabled, users can break text within a single block element into multiple lines (via the <br> tag using the new Shift+Enter keyboard shortcut). As you would expect, this feature allows you to break a list item (<li>) into multiple lines or add multiline cells.

Diagram

• Touch Support Enhancement
  • Improved touch screen support in Chromium-based browsers (Google Chrome, Microsoft Edge, Opera).

Gantt

• Visible Date Range
  • You can now specify the visible data range using the StartDateRange and EndDateRange methods.
• Sorting
  • You can now sort tasks by one or more columns. Use the new Sorting method to configure corresponding UI elements and their behavior.
• New API to Expand/Collapse Tasks
  • Task-related (expand/collapse) API enhancements include:
    • expandAll - Expands all tasks.
    • collapseAll - Collapses all tasks.
    • expandAllToLevel - Expands all tasks up to the specified level (the root task has depth zero).
    • expandToTask - Expands all tasks to make the specified task visible.
    • collapseTask - Collapses the specified task.
    • expandTask - Expands the specified task.
• API Enhancements
  • Gantt control API enhancements include:
    • ShowDependencies - Specifies whether dependencies are visible in the chart area.
    • ScaleTypeRange - Allows you to limit zoom range.
    • showResources and showDependencies - Shows/hides corresponding UI elements.
    • refresh - Reloads data and redraws the entire component.
• Export to PDF
  • You can now export Gantt data to PDF. Export options allow you to:
    • Set document size and page orientation.
    • Limit data export to a specific date range.
    • Specify whether to export only chart area, tree list area, or the entire Gantt component.
• Filtering
  • The Gantt control now supports filtering. End-users can filter tasks using the header filter or filter row. To filter tasks in code, use the following API:
    • HeaderFilter.
    • FilterRow.

File Manager

• New API
  • The File Manager now ships with the following new API:
    • Create a directory (OnDirectoryCreating and OnDirectoryCreated).
    • Upload a file (OnFileUploading and OnFileUploaded).
    • Copy a file or directory (OnItemCopying and OnItemCopied).
    • Delete a file or directory (OnItemDeleting and OnItemDeleted).
    • Download a file (OnItemDownloading).
    • Move a file or directory (OnItemMoving and OnItemMoved).
    • Rename a file or directory (OnItemRenaming and OnItemRenamed).

UI Components

• Overlay and Popup Enhancements
  • New OnShowing and OnHiding methods allow you to manage the display of a popup.
  • The new WrapperAttr method allows you to add custom HTML attributes to the popup root element.
  • Popup can now automatically adjust its position when its content changes.
  • The new HideOnParentScroll method allows you to close the popup when a user scrolls its container.
  • The new DragAndResizeArea method specifies boundaries for drag and resize operations.
  • The new DragOutsideBoundary method specifies whether the Popup can overlap container (and window) boundaries during drag operations.
  • The new RestorePosition method specifies whether the Popup restores its initial position or whether the Popup maintains its position after drag/resize operations.
• CheckBox, TagBox, List Enhancements
  • CheckBox enhancements include the following:
    • Blur method: Removes focus from the component.
    • IconSize method: Specifies desired icon size.
    • You can now assign a 'null' value to the CheckBox 'value' property (to set an indeterminate state).
    • CheckBox text is now automatically centered by its icon.
  • The new SelectAllText method allows you to specify custom text displayed within the "Select All" switch in the List and TagBox components.
• Floating Labels
  • Text input/placeholders now support the use of floating labels (conforms to Google's Material Design guidelines) so you can eliminate field labels from all your forms.
• Miscellaneous Widgets Enhancements
  • PivotGrid - Export Merged Cells to Microsoft Excel
    • The new MergeColumnFieldValues and MergeRowFieldValues properties allow you to disable/enable cell merge while exporting.
  • TreeView
    • The DevExtreme TreeView widget ships with native scrolling support. Call the UseNativeScrolling property to 'true' to enable this feature.
  • ScrollView - RTL Support
    • ScrollView fully supports RTL rendering mode.
  • Button Group - New Selection Mode
    • The ButtonGroup ships with a new selection mode - 'none'. In this mode, group buttons are not selected on click.

Material Theme Enhancements

• Applied changes to the product libraries to mirror some of Google’s most recent Material Design Guidelines. For instance, Google deprecated the ‘underlined’ styling mode for inputs and elected to use ‘filled’ mode by default. Both modes have been preserved and you can switch back to the previous display style when necessary.