DevExpress ASP.NET 21.1

Blazor UI Components

New Rich Text Editor (CTP)

• The new Blazor Rich Text Editor (Word Processor) allows you to quickly incorporate advanced text editing functionality into your next Blazor app. You can create, open, edit, convert, save, and print rich-formatted text files (DOCX, RTF, TXT). Its 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.
  • Undo / Redo.

New Blazor Grid (CTP)

• v21.1 includes a new Blazor Grid Control (available as a CTP).

New Masked Input

• The new Blazor Masked Input component includes the following integrated features:
  • Text, Numeric, Date-Time, and Regular Expression Mask support
  • Read-only and Disabled States
  • Null Text
  • Clear Button

New Menu

• The new Blazor Menu component ships with the following integrated capabilities/functionality:
  • Horizontal/Vertical Orientation support
  • Three display modes: Auto, Desktop, and Mobile
  • Adaptive Layout
  • Built-in Templates (menu title, menu item, item text, and item submenu)

New Report Viewer

• v21.1 ships with a native Blazor Report Viewer component. The new component targets the Blazor Server platform and features the following built-in features/capabilities:
  • C# Public API.
  • Print / Export.
  • Toolbar UI.
  • Bootstrap Theme support.
  • Parameters Panel.
  • Drill-Down support.
  • Interactive Sorting.
  • Zoom support.

New Project Wizard

• v21.1 ships with a new Blazor Project Wizard. This wizard allows you to choose a theme and specify the Bootstrap version, localization, and other settings for your Blazor application.

Bootstrap 5 Support

• DevExpress Blazor UI components now support Bootstrap 5. Set the global BootstrapVersion option to 'v5' and follow the migration guide to get started.

Migration to Microsoft .NET 5.0

• DevExpress Blazor UI components now support .NET 5.0 (exclusively). All Project Templates in the DevExpress Template Gallery have been updated to reflect this change.

Chart

• Pan and Zoom - Users can now zoom and pan the chart area with the mouse wheel or touch gestures.
• Axis Label Format - The new ChartElementFormat class defines format settings for axis labels.
• Add/Remove Extra Margins to Outermost Series Points - The new EndOnTick option determines whether Chart axes begin and end on ticks. The SideMarginsEnabled option adds extra margin space between outermost series points and chart boundaries.
• Custom Chart Size - Use the Width and Height properties to specify the Chart's size.
• Disable Chart Animation - To disable chart animation, add the DxChartAnimationSettings component into the Chart's markup and disable the Enabled option.
• Data Aggregation - The DevExpress Blazor Chart component now offers data aggregation support. Data aggregation significantly improves rendering performance (when rendering a chart against an extremely large set of data points). Aggregation methods include: Auto, Average, Count, Financial, Max, Min, Range, and Sum.
• Grid Lines - DevExpress Blazor Charts can display horizontal and vertical grid lines. Use the axis's Visible property to show/hide grid lines as needed.
• Tooltip Position - The Chart can now display tooltips inside or outside a series. Use the Position property to specify tooltip position.

Data Editors

• Date Edit and Calendar - First Week of a Year - The new WeekNumberRule property allows you to specify the desired "first week of a year rule".
• Apply HTML Events Handlers and CSS Classes to Inputs - With this update, you can assign standard Blazor event handlers to DevExpress Blazor Inputs. The following help topic lists the data editors and supported event handlers: HTML Attributes and Events. You can also use the new InputCssClass and TextAreaCssClass properties to assign your CSS class to the input/text area of the DevExpress ComboBox, Date Edit, Spin Edit, Text Box, Time Edit, and Memo UI components.
• Move Focus to an Editor in Code - The Blazor Data Editors include a new 'FocusAsync' method. FocusAsync allows you to focus the input field in code.
• Input Masks - DevExpress Blazor data input UI components allow you to apply input masks with ease. Masks define data entry constraints and help ensure data consistency and information integrity. The Blazor data input UI components support the following mask types:
  • Date-Time.
  • Numeric (e.g. currency, percentage, etc.).

Navigation and Layout

• Popup - Header, Body, and Footer Customization - The Blazor Popup API now offers extended customization options for the following UI elements:
  • HeaderText.
  • BodyText.
  • FooterText.
  • HeaderContentTemplate.
  • BodyContentTemplate.
  • FooterContentTemplate.
  • HeaderTemplate.
  • BodyTemplate.
  • FooterTemplate.
  • ShowHeader.
  • ShowFooter.
• Popup Size - The new MinHeight, MaxHeight, MinWidth, and MaxWidth properties allow you to explicitly define a popup's size constraints whenever a popup adapts itself to content. You can also use the Height and Width properties to manually specify Popup size.
• Popup Position - Use the new HorizontalAlignment and VerticalAlignment properties to position a Popup on screen.
• Show Multiple Popups - You can now display multiple Popups simultaneously. Popup Z-indices are updated automatically (based on display order). This release also includes a new ZIndex property. You can use this new property to specify a popup's Z-index manually.
• Popup - Show and Close Actions - In addition to the Close button, you can now press Escape or click outside the Popup's boundaries to close a Popup. This release includes two customization options - CloseOnEscape and CloseOnOutsideClick. These options can be used to disable this functionality. The new ShowAsync and CloseAsync methods allow you to asynchronously display and hide a Popup in code. Also implemented the following new events:
  • Showing - Fires before the Popup is displayed and allows you to cancel this action.
  • Shown - Fires after the Popup is displayed.
  • Closing - Fires before the Popup is closed and allows you to cancel this action.
  • Closed - Fires after the Popup is closed.
• Grid Layout - Named Areas for Responsive Layouts - You can now quickly deliver apps with responsive layouts. You no longer need to recalculate item row and column index for each screen size. Simply create named areas, assign them to layout items, and place these areas within grid rows in the appropriate/required order.
• Tabs - Tab Content Render Modes - Use the new DxTabs.RenderMode property to specify how the DevExpress Blazor Tab component loads tab content. Render modes are as follows:
  • Default. Adds tab content to the DOM each time a tab is activated (replaces the content of the previously active tab).
  • All Tabs. Renders all tab content on initial load and persists it within the DOM. This mode should only be used for apps with a few tabs in its layout (as it can increase page load time).
  • On Demand. Renders tab content when a tab is activated and persists it in the DOM.
• API Enhancements
  • DxToolbar.TitleTemplate - Used to define the template for a toolbar's caption/title.
  • DxTabs.TabClick / DxTabBase.Click - Used to specify the click event handler for all/individual tabs.

Scheduler

• New Month View - The Blazor Scheduler ships with a new Month View option. The Month View includes the MonthCount property.
• New Timeline View - The new Blazor Timeline View arranges events and appointments across an easy-to-read horizontal timeline. Thanks to its flexible design, the Timeline View allows you to display multiple time rulers with different scales.
• Appointment Tooltip Customization - You can now customize appointment/event tooltips as needed. Use the new AppointmentTooltipTemplate property to specify custom layouts and custom appearance settings for your tooltip.
• Restrict User Actions - The following new options allow you to configure/control Scheduler-related actions available to end users:
  • AllowCreateAppointment.
  • AllowEditAppointment.
  • AllowDeleteAppointment.
• API Enhancements
  • StartDate and ActiveViewType properties now support two-way binding to a data field.
  • StartDateChanged / ActiveViewTypeChanged - Allow you to track changes to 'StartDate' and 'ActiveViewType' properties.
  • AppointmentFormMode - Specifies the form used to create and edit appointments/events: compact, popup, or both.
  • ShowAppointmentTooltip - Specifies whether to display a tooltip when a user clicks an appointment/event.
  • SelectedAppointment - Gets the selected appointment.
  • SelectedAppointmentChanged - Allows you to track changes to the 'SelectedAppointment' property.

ASP.NET Controls

Diagram

• Get a Diagram Shape or Connector by ID or Key - Introduced methods that allow you to obtain a diagram shape or connector by its internal identifier (getItemById) or by a data key (getItemByKey). The following new shape properties obtain information about containers:
  • containerChildItemIds - Gets identifiers of shapes within a container.
  • containerExpanded - Gets whether the container is expanded.
  • containerId - Gets the identifier of the container with the shape.
• Iterate through Diagram Shapes and Connectors - Use the new getItems method to get an array of all diagram items (shapes and connectors).
• Select Shapes and Connectors:
  • SetSelectedItems - Selects specified diagram shapes and connectors.
  • GetSelectedItems - Obtains selected diagram shapes and connectors.
• Scroll to Items - Use the new ScrollToItem method to scroll the drawing canvas to the specified diagram item.

Gantt

• Export to PDF - The ASP.NET Web Forms and MVC Gantt control can now export its content to PDF.
• API Enhancements:
  • ScrollToDate - Scrolls the Gantt chart to the specified date on a timeline.
  • ResourceManagerDialogShowing - Allows you to customize the Resource Manager dialog.
  • TaskShowing - Allows you to customize task content.

Miscellaneous Enhancements

• The following enhancements have been applied to major Web Forms and MVC container controls (GridView, TreeList, and CardView) and the DevExpress Data Editors Library:
  • Security enhancements for container controls.
  • Improved touch experience for data editors.
  • Adaptivity and accessibility enhancements.
  • Improved Batch Edit and Data Filtering modes.

ASP.NET Core Controls

Data Grid

• Export to PDF - The Export to PDF API now includes the following options/capabilities:
  • WYSIWYG Export to PDF.
  • Fit-to-Page.
  • Multi-Page Export.
  • Text Wrapping.
  • Progress Indication.
  • Cell Content, Format, and Appearance Customization.

Data Grid and Tree List

• Pager Enhancements - v21.1 includes the following pager-related enhancements:
• A new pager.displayMode property. This property specifies the pager's display layout: full, compact, or adaptive.
• The page size selector can now display 'All' records on a page (pager.allowedPageSizes).
• Editing API Enhancements - You can now use declarative bindings to insert new rows in Angular, React, and Vue applications.
• Add New Rows to a Specified Position (CTP) - You can now insert a new row at any location within a list (first, last, or a custom position).

Diagram

• Get a Diagram Shape or Connector by ID or Key - This release allows you to obtain a diagram shape or connector by its internal identifier (getItemById) or by a data key (getItemByKey). New shape properties obtain information about containers:
  • containerChildItemIds - Gets shape identifiers within a container.
  • containerExpanded - Gets whether the container is expanded.
  • containerId - Gets the container identifier with the shape.
• Iterate through Diagram Shapes and Connectors - Use the new getItems method to obtain an array of all diagram items (shapes and connectors).
• Select Shapes and Connectors:
  • getSelectedItems - Returns selected diagram shapes and connectors.
  • setSelectedItems - Selects the specified diagram shapes and connectors.
• Scroll to Item - Use the new scrollToItem method to scroll the drawing canvas to the specified diagram item.

ES6 (ECMAScript 6) Modules

• DevExtreme's npm distribution now includes ES6 modules. These modules help optimize Tree Shaking and decrease production JS bundle size. Internal tests demonstrate a 15-25% bundle size reduction.
• With this update, you can also use modern JS bundlers that don't support the CommonJS module format and only work with ES6 modules.

File Manager

• Customize a Context Menu for Individual Files/Folders - The new onContextMenuShowing event allows you to customize your app's context menu for individual files and folders. You can add/remove menu items, specify item state, etc.
• Describe Errors on the Client - The File Manager's API includes a new FileSystemError class. This class allows you to specify an error code (errorCode), error description (errorText), and file system element (fileSystemItem) when handling errors within CustomFileSystemProvider.
• Show/Hide Progress Panel - Use the new showPanel and showPopup options to display a progress panel and pop-up notifications within the File Manager.
• Custom HTTP Headers in Remote File System Provider - You can now customize Ajax (beforeAjaxSend) and form submit requests (beforeSubmit) before they are sent to the server.

Gantt

• Export to PDF (CTP) The Gantt component can now export content to PDF.
• API Enhancements - v21.1 includes the following Gantt related API updates:
  • scrollToDate - Scrolls the Gantt chart to a specified date on a timeline.
  • resourceManagerDialogShowing - Allows you to customize the Resource Manager dialog.
  • taskContentTemplate - Allows you to customize the layout and appearance of individual task elements.

HTML/Markdown Editor

• v21.1 marks the official release of the HTML/Markdown Editor. The DevExpress HTML/Markdown Editor includes the following integrated features:
  • Inline, Block, and Embedded Format Support.
  • Format Customization.
  • Custom Modules.
  • HTML and Markdown Support.
  • Insert Image (a link or base64-encoded string) Support.
  • Mail Merge Support.
  • Copy-Paste Rich Content Support.
  • Mentions.
  • Multiline Toolbar.
  • Table Support.
  • Localization.

Rich Text Editor

• Speech Recognition and Virtual Assistant (Nuance) - You can use the Nuance Dragon SpeechKit to enable speech recognition and voice-activated workflows within the Rich Text Editor.

Scheduler

• Agenda View - Redesigned - The redesigned Agenda View now displays resources and a recurrence indicator for recurring appointments. Color markers help users differentiate appointments by resource.
• Horizontal Virtual Scrolling-  Horizontal Virtual Scrolling is now available across all Scheduler Views. When virtual scrolling is enabled, the Scheduler only renders grid cells and appointments that fall into the visible viewport.
• Drag-and-Drop Enhancements - Drag & drop is now more intuitive and event positioning more predictable.

ASP.NET Bootstrap Controls

Bootstrap 5 Support

• DevExpress ASP.NET WebForms Bootstrap components now support Bootstrap 5.