Skip to content

Latest commit

 

History

History
2402 lines (1492 loc) · 146 KB

changelog.md

File metadata and controls

2402 lines (1492 loc) · 146 KB
Raw

NuGet Package Change Log

Version history of the "DevExpress.Blazor" NuGet package is listed below.

22.2.4

Data Editors

Command Buttons

DevExpress Blazor Editors can now display custom command buttons to the left or right of the text input region. You can also hide/customize default command buttons as requirements dictate (such as the button that activates a dropdown).

Demos | Documentation

22.2.3

.NET 7 Support

Our Blazor components fully support .NET 7. The DevExpress Template Gallery now includes Blazor project templates for .NET 7.

Ahead-of-Time (AOT) Compilation Support

DevExpress-powered Blazor WebAssembly apps now support ahead-of-time (AOT) compilation. You can compile your .NET code directly to WebAssembly.

Note: AOT compilation improves runtime performance, but it does increase application size.

In the Blazor WebAssembly app's project file, add the RunAOTCompilation property. Set this property to 'true' to enable WebAssembly AOT compilation.

Blazor Hybrid Support (CTP)

You can now use DevExpress Blazor UI components in Blazor Hybrid apps. With Blazor Hybrid, Razor components run natively on both mobile and desktop devices. This improves performance and provides access to native device capabilities through the .NET platform.

DevExpress Blazor components support the following platforms with Blazor Hybrid:

  • .NET MAUI (Windows, MacOS, Android, iOS)
  • WinForms
  • WPF

Documentation

Bootstrap v5.2 Support

DevExpress Blazor components now fully support the latest release of Bootstrap v5.2. Set the BootstrapVersion option to v5 to ensure that your app works correctly.

New Render and Size Modes

The DevExpress Blazor Data Grid (DxGrid), Editors, Layout, and Navigation components now use our optimized rendering engine instead of Bootstrap. This change will allow us to extend our Blazor component suite with the following new capabilities/features:

  • Improved rendering performance with fewer JavaScript interop calls.
  • Consistent appearance across DevExpress Blazor components.

Our new rendering engine significantly improves the capabilities of existing Blazor Size Modes:

  • Blazor components (regardless of size mode used) are downsized to address the requirements of "dense" interfaces and display more relevant information on screen. The new Large Size Mode mirrors what used to be “Medium.” The new Medium mode is closer to what used to be “Small.” And our new Small mode allows you to deliver interfaces similar to desktop apps such as Microsoft Outlook.
  • New size modes apply to our Blazor Data Grid (DxGrid), Tabs, Flyout, and other UI components that previously did not support the size mode option.
  • Size modes now offer a more consistent user experience and affect all spacings/sizes across supported Blazor components. For example, our Blazor Form Layout component adjusts paddings between items/groups based on the selected size mode. Refer to the following article for instructions on how to update your app: Bootstrap rendering was replaced with a new rendering engine.

New Window

Our new Window component is a non-modal window. Its features include:

  • Move & Resize
  • Header Customization
  • Show/Hide Close Button
  • Window Positioning (at a specified position or UI element)
  • Keyboard Support
  • Comprehensive API

Documentation

Grid

Export Data to Excel

Our Blazor Data Grid can now export data to Excel. With this new API, you can save your data to XLS, XLSX, and CSV files (or stream). Data export operations support grouping, sorting, filtering, totals, and group summaries.

New API includes:

All methods accept the 'options' parameter. This parameter allows you to customize the exported document.

Demo

Search Box

Our Blazor Data Grid component includes a progressive case-insensitive search option (allows you to locate matched text as you type). When you type within the search box, the Data Grid filters data rows, displays those that match the search string, and highlights search results.

Additional features include:

  • Support for special characters.
  • Configurable input delay.
  • Search box placeholder (null text) support.
  • Ability to exclude specific columns from search operations.
  • Built-in search text parse modes.
  • Ability to specify search text in code (Search API).

And yes, you can customize search box appearance settings, render the search box from a template, or use an external editor.

Documentation

Integrated Editor Appearance

DevExpress Data Editors embedded into cells share the same border with the cell itself.

To enable the new mode, set the EditorRenderMode property to 'Integrated'.

Demo

Focused Row

Our Blazor Grid now supports row focus. Users can focus a row with the mouse. Set the FocusedRowEnabled property to 'true' to enable this feature.

The SetFocusedDataItemAsync and SetFocusedRowIndex methods allow you to focus a row in code. The Data Grid fires the FocusedRowChanged event after the focused row has changed.

Demo

Select All

The new SelectAllCheckboxMode property specifies the behavior of the Select All check box. Available options include:

  • Page - selects/deselects all rows on the current page.
  • AllPages - selects/deselects all rows across all pages.
  • Mixed - selects/deselects all rows on the current page. A drop-down button opens a context menu and allows users to select and deselect all rows across all grid pages.

New API includes:

Demo

Filter by Display Text

The new DxGridDataColumn.FilterMode property specifies how to filter column data. Available options include:

  • DisplayText - filters data against text displayed within cells.
  • Value - filter data against cell values.

Filter Expression API

This new API allows you to filter data in code and implement an external filtering UI tailored to specific usage scenarios:

Demo

Fixed and Relative Height

You can explicitly set the height of our Blazor Grid or set the height as a percentage of the height of the container/viewport. The footer element will remain at the bottom regardless of the rows displayed within the Grid.

Accordion

Item Selection

Our Blazor Accordion component now supports item selection. Set the SelectionMode property to Single to enable this capability.

Users can click an item header to select the item. The SelectItem method allows you to select an item in code.

Demo

URL-match Mode

The Accordion component can automatically select an item if its NavigateUrl property value points to the current URL (which is displayed in the web-browser's address bar). Available modes include Current Path, Prefix, and Exact.

Two new properties allow you to specify how the Accordion component matches URLs:

You can also use the Reason property to identify why selection was changed.

Expand and Collapse Animation

You can now play the slide animation effect when expanding/collapsing Accordion items.

Demo

Data Editors

New Mask Types

  • Date-Time Offset - allows a user to enter only date and time values, and stores the time's offset from Coordinated Universal Time (UTC) in the editor's value. You can apply this mask to the DxDateEdit and DxMaskedInput components. The DxDateTimeOffsetMaskProperties class allows you to customize the mask settings.
  • Time Span - allows users to enter only time intervals in DxMaskedInput. Use the DxTimeSpanMaskProperties class to configure the mask.

Demo

Validation Icons

Data editors can now display meaningful validation icons (Error or Success) and text-based feedback (tooltips).

You can enable validation icons for all editors in your app or specify icon visibility for each editor individually.

Demo | Documentation

Delayed Input

Our data editors with text input fields (e.g., DxMaskedInput, DxMemo, DxTextBox, DxSpinEdit) can now update associated values with a delay. Enable this option if you wish to reduce value updates (reducing updates improves client-side performance).

We also added a new BindValueMode property. Set it to 'OnDelayedInput' to enable delayed input. You can also use the InputDelay property to specify the delay period.

Demo

Focus First Match

Our Blazor ComboBox component automatically highlights the first match after a filter operation. This feature allows users to select values via the keyword.

Demo

Form Layout

Collapsible Groups

Users can now expand/collapse layout groups. You can use the Expanded property to expand or collapse a group in code.

The new ExpandButtonDisplayMode property allows you to position the expand button within a group header. You can display the expand button to the left or right of the group caption, hide the expand button, or customize its appearance.

You can also play the slide animation effect when expanding/collapsing Form Layout groups.

Demo | Documentation

New Templates and Customization API

The Form Layout component now includes new customization options for tab pages and layout groups.

Tab Page API:

Layout Group API:

You can also specify the ColSpanXxl property to define the number of columns a layout item, group, or tab page spans across large screens (1400px or wider).

Demo

Menu

API Enhancements

Reporting

New Report Viewer & Designer for WebAssembly (ASP.NET Core Hosted)

Our new DxWasmDocumentViewer and DxWasmReportDesigner WASM components are aimed at minimizing integration efforts and reducing support inquiries. These components ship as part of they** DevExpress.Blazor.Reporting.JSBasedControls.WebAssembly** Nuget package.

Documentation

Native Report Viewer — Parameters Panel Layout

Our Report Viewer component (DxReportViewer) can now render the Parameters panel with a custom layout.

Demo

New Project Templates

The DevExpress Blazor App Template Gallery for Visual Studio now includes Reporting templates. Use these templates to jump start the BI application development (be it a Server or WebAssembly Hosted app) process.

Reporting templates allow you to create an application that includes the following:

  • Report Designer
  • Report Viewer (JS-based)
  • Report Viewer (Native)
  • Report Storage
  • Sample SQL Connection, JSON/Object Data Source

In the CLI, our new templates are available as:

  • dx.blazor.reporting.blazorserver
  • dx.blazor.reporting.webassembly

Rich Text Editor

WebAssembly Support

Our Blazor Rich Text Editor now supports the Blazor WebAssembly hosting model. This model offers the following advantages (compared to the server hosting model):

  • The application remains functional if the server goes offline.
  • The application makes full use of the client's resources and capabilities.
  • Processing has moved from the server to the client, so your application takes up fewer server resources.
  • Serverless deployment scenarios are possible.

In Web Assembly applications, our Rich Text Editor component provides the same functionality and behavior as that of a Blazor Server application.

Spell Check

Our Blazor Rich Text Editor now supports on-demand spell checking. It can detect spelling errors and suggest corrections.

To enable spell checking, call the AddSpellCheck method to register a spell check service and set the CheckSpelling property to 'true'.

The Rich Text Editor integrates a spell check service using an English dictionary and allows you to add other dictionaries (for various languages) as needed.

Note: You are not limited by what's available out-of-the-box. You can implement and use a custom spell-check service if the default service does not address business requirements.

Demo

API Enhancements

Tabs

Disabled State

A new Enabled property allows you to enable/disable individual tabs.

Tab Header Template

The new TextTemplate property allows you to define a tab header template, which can include custom UI visuals (such as command buttons).

Toolbar

Bind to Data

You can now bind our Blazor Toolbar component to a data source. To introduce this capability in your Blazor app, use its Data and DataMappings properties. In bound mode, the Toolbar generates items automatically.

Demo

API Enhancements

IToolbarItemInfo.Parent - Gets the item's parent. DxToolbar.Target and DxToolbarItem.Target - Specifies the target attribute for all toolbar items or a specific item.

TreeView

URL-match Mode

The Blazor TreeView component can now automatically expand a tree and select a node if its NavigateUrl property value points to the current URL, which is displayed in the web-browser's address bar. Available modes include Current Path, Prefix, and Exact.

Two new properties allow you to specify how the TreeView component matches URLs:

You can also use the Reason property to identify why selection was changed.

Expand and Collapse Animation

You can now play the slide animation effect when expanding/collapsing TreeView nodes.

Demo

Node Click Events

22.1.5

Navigation and Layout

Tabs – Text Template

You can now specify a template for a tab’s text. Use the TextTemplate property to add the template render fragment to the text.

API Enhancements

Resolved Issues

See our Version History for a complete list of issues resolved in v22.1.5.

22.1.4

Resolved Issues

See our Version History for a complete list of issues resolved in v22.1.4.

22.1.3

New Accordion

Our new Blazor Accordion component allows you to address a broad range of navigation related usage scenarios within Blazor-powered web apps. You can create advanced hierarchical navigation menus with endless nesting of navigation elements.

Integrated features include:

  • Data Binding Support
  • Built-in Search Panel & Filtering Support
  • Item Groups
  • Multiple Expand/Collapse Modes
  • Unlimited Number of Nesting Levels
  • Custom Items and Group Content

Demo | Documentation

New Flyout

Use our new Blazor Flyout component (a contextual popup UI element) to display hints, warnings, or business-specific information within your Blazor-powered web app. You can position the Flyout at top, bottom, left or right side of any webpage UI element.

Demo | Documentation

Grid

Inline Row Editing

Our Blazor Grid now supports inline data editing and keyboard navigation support. Use Tab and Ctrl+Tab to navigate between cells within the edit row.

Demo

Save / Restore Layout

You can now save and restore the Blazor Data Grid's layout as requirements dictate. Layout information includes the current page, column sort order/direction, column position, filter values, and grouped columns.

We added two new events - LayoutAutoSaving and LayoutAutoLoading. The first event fires each time the grid's layout changes and allows you to save the layout. The second event fires once the grid component is initialized and allows you to restore the layout.

We also added SaveLayout and LoadLayout methods so you can save and restore the grid’s layout when necessary.

Show / Hide Summary Items

The Grid's new Visible property allows you to display/hide individual summary items.

Appearance Customization Enhancements

We added customization support for over 25 grid UI element types (edit form, filter row, group panel, footer, etc.) within the CustomizeElement event handler.

Row Preview

You can now incorporate Preview sections within our Blazor Data Grid (additional information for quick preview by your users). These preview sections can include tables, values from data source fields and custom text.

Demo | Documentation

API Enhancements - New Events

Charts

Point and Series Selection

Our Blazor Chart (DXChart) component now supports point and series selection. Our Blazor Pie Chart component now supports selection of pie/donut sectors.

Use the following properties to specify selection mode (single/multiple) or disable selection:

  • DxChart.SeriesSelectionMode
  • DxChart.PointSelectionMode
  • DxPieChart.PointSelectionMode

For certain series types, you can also specify how other series points are selected when you select a point. Use the following properties:

  • DxChartBarSeriesBase.SelectionMode
  • DxChartBubbleSeries.SelectionMode
  • DxChartFinancialSeriesBase.SelectionMode
  • DxChartRangeBarSeries.SelectionMode
  • DxChartScatterSeries.SelectionMode

We also added new events (DxChart.SelectionChanged/DxPieChart.SelectionChanged) to help you respond to user selection.

Demo | Documentation: DxChart | Documentation: DxPieChart

Drill-Down on Series Point Click

You can now incorporate drill down charts (users click data points and navigate through hierarchical information) within your Blazor-powered web app.

The SeriesClick event parameter's 'Series' property returns an 'IChartSeries' object and exposes the Data property. Use this property to obtain the source data for the clicked/selected series.

Demo

Financial and Range Series - Data Binding Enhancements

v22.1 includes new properties that allow you to specify data source fields for financial and range series. They include:

Demo

Bar Chart Enhancements

We added the following new options for our Blazor Bar Chart component:

Axis Enhancements

New axis options include:

  • SynchronizeAxes - Allows you to disable synchronization of value axes displayed on a single pane.
  • SynchronizedValue - Specifies values at which axes are synchronized.
  • Indent - Specifies the distance between neighboring value axes (in pixels).

Export Chart as PDF or Image

Our new ExportAsync method allows you to save your chart in the following file formats: PDF, PNG, JPEG, and GIF.

Format Series Labels

We added a new SeriesLabel.FormatPattern property to help format series labels. Format patterns can include placeholders with format specifiers and plain text.

Upload

New API

  • UploadFile, UploadFiles, UploadAllFiles - use these methods to upload a file(s) or resume a previously paused operation;
  • RemoveFile, RemoveFiles, RemoveAllFiles - allow you to remove selected/all files;
  • PauseUploadFile, PauseUploadFiles, PauseUploadAllFiles - use these methods to pause file upload operations;
  • ReloadFile, ReloadFiles, ReloadAllFiles - these methods re-start the upload of selected/all files;
  • CancelUploadFile, CancelUploadFiles, CancelUploadAllFiles - these methods allow you to abort individual operations.

Documentation

Performance Enhancements in WASM Apps

We optimized our Blazor Upload component to work with a large collection of files in WASM applications. For example, it now takes three seconds to upload 100 files that previously required ten seconds.

Navigation and Layout - New API

Our Blazor Context Menu and TreeView components can now map the CssClass property in bound mode.

Rich Text Editor

Mail Merge Support

Our Blazor Rich Text Editor now supports mail merge operations. Use the Data property to bind the Rich Text Editor to an external data source. You can preview generated content directly within your document template and save (export) results as DOCX, RTF, or TXT files.

You can also add fields (dynamic elements) to your document. Fields are placeholders that store and display data from a data source.

Demo

New Command Toolbar

v22.1 allows you to incorporate a Command Toolbar within your app. As its name implies, a Command Toolbar displays all commands across a single tab. Set the 'BarMode' property to 'BarMode.Toolbar' to activate the toolbar. Handle the CustomizeToolbar event to add new commands and hide/customize default commands as necessary.

Demo

Ribbon Customization

We added a new CustomizeRibbon event so you can:

  • Add new/hide default commands (items).
  • Customize the look, feel, and behavior of default commands.
  • Add custom tabs, groups, and commands.

Demo

API Enhancements

TreeView - Node Filtering

Our Blazor TreeView component ships with an integrated filtering option. Enable the Filter Panel (displayed at the top of the treeview) to allow users to filter treeview content.

When a user searches for a specific node(s), the tree automatically expands to the node that matches the search string and highlights strings that match search text.

The new API includes:

  • ShowFilterPanel - Shows/hides the filter panel.
  • FilterString - Specifies the filter string. The 'case-insensitive contains' operator is used by default.
  • FilterMode - Specifies the filter mode.

Use the CustomFilter property to implement custom filter algorithms.

Demo | Documentation

Breaking Changes

  • T1080871: DevExpress Blazor components no longer support .NET 5.0.
  • T1081253: The location of CSS resources for DevExpress Blazor controls has changed.
  • T1064071: DevExpress products and components now require the DevExpress.Drawing assembly for deployment.
  • T1083584: Charts - The DxChartSeriesLabel.Format property has been renamed to ValueFormat.
  • T1062471: Charts - The DxChartBase.PointClick event has been removed.
  • T1080875: Upload - The component’s events change signature.
  • T1080881: Scheduler - The default edit form layout was changed.
  • T1070927: DxContextMenu - The component render has changed.
  • T1063750: TabPanelModel - Tabs are readonly.

Resolved Issues

See our Version History for a complete list of issues resolved in v22.1.3.

21.2.7

Breaking Change

  • 1082988: Tooltips are not shifted on the edges of the chart to fit into the chart

Resolved Issues

See our Version History for a complete list of issues resolved in v21.2.7.

21.2.6

New Blazor Grid

Our Blazor Grid component was first introduced in v21.1 as a Community Technology Preview (CTP). This update marks its official release. v21.2.6 includes many new grid features.

Server Mode Data Source

The Blazor Grid supports the use of our unique Server Mode data source for Blazor Server-based applications. This data source was designed to work with large data collections. Server mode has the following advantages:

  • The Grid loads data in small portions on demand. It does not load the entire dataset. This feature helps reduce memory consumption and improve usability.
  • All data shaping operations (grouping, sorting, and so on) are delegated from the Blazor application itself to underlying services (EF Core, XPO, and so on). These services process operations more efficiently and increase overall performance.

Demo | Documentation

Support for Observable Data Collections

You can bind the Grid to a data collection that implements the INotifyCollectionChanged or IBindingList interface. This collection notifies the Grid about relevant changes (when items are added or removed, when the entire collection is refreshed, etc.). The Grid will update its data automatically to reflect appropriate changes.

Demo | Documentation

Master-Detail View

Our Blazor Grid component allows you to create hierarchical layouts of any complexity and depth. For example, you can use a nested grid to visualize a master-detail relationship between two data tables or to display preview sections under each grid data row across all columns.

Demo | Documentation

Column Resize

The Grid now supports different resize modes for columns. Use the ColumnResizeMode property to specify whether and how users can resize Grid columns.

Demo | Documentation

Column Visibility and Column Chooser

Use the new Visible and VisibleIndex properties to manage column visibility and order.

The Grid also allows users to display, hide, and reorder columns with its integrated Column Chooser.

Demo | Documentation

Grid in DevExpress Project Templates

DevExpress project templates now include the Grid component.

Scheduler – Access Timescale from Header Templates

The SchedulerTimelineHeaderCellInfo object now contains the Scale property, which returns the timescale to which the Scheduler header cell belongs.

Breaking Changes

  • T1071089 - The Data Grid component was moved to maintenance mode
  • T1061297 - Rich Text Editor: A non-empty paragraph before a table cannot be removed

Resolved Issues

See our Version History for a complete list of issues resolved in v21.2.6.

21.2.5

Breaking Changes

  • 1059018: DxTabs, DxFormLayoutTabPages – Active tab choice was introduced
  • 1059760: TagBox - The DropDown render has changed

Resolved Issues

See our Version History a complete list of issues resolved in v21.2.5.

21.2.4

Support for .NET 6

DevExpress Blazor UI components now support .NET 6.0 (in addition to .NET 5.0). We’ve also updated the DevExpress Template Gallery to include new project templates for .NET 6.0.

New Blazing Dark Theme

In v21.2.4 we introduce a new Blazing Dark theme for Blazor applications. This theme was added to our online demos and Project Wizard.

Grid

Conditional Formatting

Handle the new CustomizeElement event to customize the appearance of grid cells and rows according to their values. (Demo)

Handle Row Clicks

Use the Grid’s RowClick and RowDoubleClick events to handle user clicks and double-clicks on grid rows.

Chart

Handle Series and Point Clicks

We added the SeriesClick and PointClick events that allow you to handle user clicks on series and series points, respectively.

Hover Modes

You can now use a new HoverMode property that specifies which series elements to highlight when a user hovers over a chart element. This property was added to all series classes (for instance, DxChartLineSeries.HoverMode), legend, and point objects.

Date Edit - Configure Format for the Time Section

The new TimeSectionScrollPickerFormat property allows you to apply a custom format to values in the time section.

DropDown - Prevent Close on Outside Clicks

Use the new PeventCloseOnPositionTargetClick property to specify whether the drop-down window should be closed when a user clicks the position target element.

Breaking Change

1047433: Scheduler - The SchedulerDayOfWeekHeaderCellInfo.Resources property has been renamed to SchedulerDayOfWeekHeaderCellInfo.Resource

Resolved Issues

See our Version History a complete list of issues resolved in v21.2.4.

21.2.3

New Blazor DropDown

Our 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

Documentation

New Dashboard

Our Blazor Dashboard component was first introduced in May 2021 as a Community Technology Preview (CTP). This update marks its official release. v21.2 adds 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 DevExpress Blazor Rich Text Editor (Word Processor) was first introduced in May 2021 as a Community Technology Preview (CTP). This update marks its official release.

Our 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

Documentation

Grid

Data Editing and Input Validation

Our 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.

Our Blazor Grid automatically validates user input based on data annotation attributes. You can also apply and use custom data validation rules.

Documentation

Row Selection

Our 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.

Our 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.

We also introduced new methods to help manage record selection in code.

To access selected data items in code, use the SelectedDataItems property.

Command Column - CRUD Buttons

Our Command Column can now display CRUD-related commands (New, Edit, Delete) for each row.

Vertical and Horizontal Scrolling

Our 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

We improved the algorithm used to manage column width and also added a MinWidth property. By default, minimum column width is 50 pixels.

Column Text Alignment

Our 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.

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

While most of our development effort is focused on our Next-Gen Blazor Grid control (DxGrid), we have extended the capabilities of our original Blazor Data Grid (DxDataGrid) with the following features:

  • We optimized JS 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.

Chart

New Pie/Donut Chart Component

We split our Blazor Chart into two distinct components:

  • DxChart - represents Cartesian charts.
  • DxPieChart - represents Pie and Donut charts.

We also implemented the following new properties for the Pie/Donut Chart:

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:

Side-by-Side Stacked & Full-Stacked Bar Charts

You can now create side-by-side Blazor Bar Charts. Use our new Stack property to specify the desired chart stack.

Series and Constant Line Appearance

Our new Blazor Charts DashStyle property allows you to specify a dash style for a line series or a constant line. We also added the following settings to control the appearance of constant lines:

Break Series on Empty Points

Our Blazor Chart component includes a new BreakOnEmptyPoints option. Enable this option to display empty points (points with undefined/null values) as breaks.

Axis Major and Minor Ticks

v21.2 includes two new Blazor components: DxChartAxisTick and DxChartAxisMinorTick. Use the following options to customize the appearance of major (AxisTick) and minor ticks (AxisMinorTick):

  • Visible
  • Color
  • Length
  • Shift
  • Width
  • Opacity

Zero Value Always Visible

Our Blazor Chart component's value axis 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.

Data Editors

Date Edit - Date Time Offset Type Support

You can now bind our Blazor Date Edit component to DateTimeOffset and DateTimeOffset? data types.

ComboBox, ListBox, and TagBox - Item Template

Our Blazor ComboBox, ListBox, and TagBox components now support item templates. Use the ItemTemplate property to define your custom template.

SpinEdit - Enable/Disable Mouse Wheel

Our Blazor SpinEdit ships with a new AllowMouseWheel property (prevents users from modifying the editor's value with the mouse wheel).

Navigation and Layout

Tabs - Scroll Modes

Use the new 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 swipe 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:

API Enhancements

Scheduler

Date Header and Resource Header Customization

You can now customize the content and appearance of time cells, date headers, and resource headers.

Day View, Work Week View, Week View
Month View
Timeline View

Snap to Cells

All Blazor Scheduler Views now include the 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

Our 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.

In addition, all Scheduler Views can hide appointment captions (when space limits the component's ability to display the caption in full).

Blazor Report Viewer

Search, Document Map and Export Options Panels

Our Blazor Report Viewer reached feature parity with our HTML5 Document Viewer. In v21.2, we added the following UI elements:

  • Export Options Panel
  • Search Panel
  • Document Map with Bookmarks

Multi-Page View

Our 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 our DevExpress Blazor components on websites with a Content Security Policy (CSP).

Breaking Changes

  • T1034169: Charts – Changed the default approach used to create pie and donut charts.
  • T1028794: Charts – The DxChartValueAxis.Position property is now obsolete.
  • T1022279: Charts – The axis label component does not support the CssClass property.
  • T1022262: Charts – Color properties now support Alpha channel.
  • T1026454: Charts - The Width and Height properties now use the invariant culture.
  • T1032759: Toolbar - The DropDown rendering has changed.
  • T1035320: ComboBox, Date Edit, and Time Edit - The DropDown rendering has changed.
  • T1034641: Scheduler - Day headers have been redesigned.

Resolved Issues

See our Version History for a complete list of issues resolved in v21.2.3.

21.1.6

Scheduler - Cell Customization

We added the new TimeCellTemplate property to Scheduler view classes (for example, DxSchedulerMonthView.TimeCellTemplate). You can use these properties to customize content and appearance of time cells in the Scheduler.

Additionally, we introduced the HtmlCellDecoration event that allows you to customize any Scheduler cell (time cell, date header, resource header, and so on).

Date Edit - Day Cell Template

Use the Date Edit's new DayCellTemplate property to customize the content and appearance of cells in the Date Edit’s calendar.

Time Edit - Scroll Picker Format

Our Time Edit component now includes the ScrollPickerFormat property. Use it to specify the order and composition of the Time Edit’s visible scroll picker columns (hour, minute, second, and period of the day).

List Box - Single Value

We added the new Value property that allows you to bind a List Box’s value to a single object. We recommend that you use this property if you want to limit selection in the List Box to one item at a time. Otherwise, use the pre-existing Values property.

Resolved Issues

See our Version History for a complete list of issues resolved in v21.1.6.

21.1.5

Grid

Filter Row

Our Blazor Grid now includes a filter row that displays in-place text editors for all data columns. The Grid creates a filter condition based on the editor value and applies this condition to the corresponding column. To display the filter row, set the ShowFilterRow property to true.

We also implemented the following filter row customization options:

  • FilterRowOperatorType – Specifies the operator used to create a filter condition based on the filter row value (Equals, Contains, StartsWith, Greater, Less, and so on).
  • FilterRowValue - Specifies the initial value in the filter row editor.
  • FilterRowEditorVisible – Specifies whether to display the filter row editor.
  • FilterRowCellTemplate - Allows you to display a custom editor in a filter row cell.

Documentation | Demo

Filter in Code

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

The new command column type is introduced. This column contains a Clear button that resets the applied filter. To display the command column, declare a DxGridCommandColumn object in the Columns template.

You can also define a FilterRowCellTemplate to display custom content in the column’s filter row cell.

Documentation | Demo

API Changes

The Grid component now includes two types of columns: data and command. To avoid confusion with column names, we made the following changes to the API:

  • You should now use the DxGridDataColumn class instead of the DxGridColumn class to add a data column to the Grid.
  • We made the DxGridColumn class abstract and it now contains the base API for data and command columns.

We also renamed the following templates:

Group Footer Summary

You can now display group summary values in group footers. To do this, set the summary item’s FooterColumnName property to the name of a group footer column.

Documentation | Demo

Group Footer Templates

The new DxGridColumn.GroupFooterTemplate and DxGrid.ColumnGroupFooterTemplate properties allow you to customize individual or all group footers.

Group Footer Display Mode

The Grid shows group footers if they contain summary values or custom template content and the corresponding groups are expanded.

You can use the new GroupFooterDisplayMode property to change the display mode of group footers to Always, Never, or IfExpanded.

We also renamed the ShowFooter option to FooterDisplayMode to make it consistent with GroupFooterDisplayMode. The FooterDisplayMode property specifies the visibility of the total footer.

Column Name

We introduced the Name property to all Grid columns. Use this property to specify the column’s unique identifier.

Chart

Refresh Chart Data and Rerender the Component in Code

In v21.1.5, we introduced two new methods to the Chart component:

  • RefreshData - Reloads chart data and redraws the component.
  • RedrawAsync - Re-renders the Chart and its child components.

ComboBox

Validate Text

Value and display text can differ in a ComboBox component. You can use the new ValidateBy property to specify which component’s property (Value or Text) is used for input validation.

Form Layout

Group Header Customization

You can now specify a template for a group header. To do this, define the HeaderTemplate component within the group’s markup, add the render fragment to the template, and wrap group items in the Items component.

To apply CSS classes to a group header, use the new HeaderCssClass property.

Group Appearance Customization

To apply a CSS class to the entire group, use the new CssClass property.

Popup

Initialization State

The Popup cannot be shown until the component is initialized. To track the initialization state from code, use the IsInitialized property. For example, you can check this property value before you call the ShowAsync method.

Button

Navigate URL

Use the new NavigateUrl property to specify the URL the client web browser navigates to when you click the button.

Resolved Issues

See our Version History for a complete list of issues resolved in v21.1.5.

21.1.4

Navigation and Layout

Menu - Data Binding

You can now bind the Menu component to a data source. In this mode, items from the data source automatically populate menu items. To do this, use the component’s Data and DataMappings properties.

Demo | Documentation

Context Menu, TreeView - Binding to Flat Data

You can now bind the Context Menu and TreeView components to flat data (a collection of items that are available at one level). Use the following properties to enable this feature:

Popup - Close Reason

The DxPopup.Closing event’s arguments now include a new property - CloseReason. This property identifies an action that closes the Popup. The available actions are:

  • Programmatically
  • EscapePress
  • CloseButtonClick
  • OutsideClick

Form Layout

Disabled and Read-Only Modes at Various Component Levels

You can now activate disabled/read-only mode for all auto-generated editors at the following Form Layout levels:

  • An entire component
  • A layout group, tab, or tab page
  • A layout item

The Form Layout and its elements apply values of the corresponding properties (Enabled and ReadOnly) to nested elements. If you specify the corresponding property for a nested element, this value overrides the common value.

Omit the Template Tag for Form Layout Items

When you specify a template for a Form Layout item, you can now omit the <Template>...</Template> tag and specify the template’s content in the item’s markup. This improves the readability of the page layout code.

Data Editors

CheckBox

Allow/Restrict Indeterminate State

Use the new AllowIndeterminateState property to specify whether the CheckBox component supports the indeterminate state.

Wrap Mode for Long Labels

If the CheckBox label is too long to fit the parent component, use the new LabelWrapMode property to specify whether the label’s text should be wrapped or cropped.

Charts

The Maximum Number of Automatic Scale Breaks

The new MaxAutoBreakCount property allows you to limit the number of auto-created scale breaks.

Resolved Issues

See our Version History for a complete list of issues resolved in v21.1.4.

Breaking Changes

  • T1001744: TreeView, ContextMenu - Some API members related to data binding are now obsolete. A new data binding approach was introduced
  • T1007681: Scheduler - CRUD events changed their delegate type from Action to EventCallback
  • T1003629: The DxChartValueBreaks class is now obsolete

21.1.3

New Grid (CTP)

Our new Blazor Grid component includes the following features:

  • Data Binding
  • Custom Data Source Support
  • Large Datasets
  • Unbound Columns
  • Sorting by Value
  • Sorting by Display Text
  • Custom Sorting
  • Grouping
  • Group Intervals
  • Custom Grouping
  • Paging
  • Total and Group Summary
  • Custom Summary
  • Cell, Column Header, Group Row, and Footer Templates
  • Custom Display Text

Demo

New Rich Text Editor (CTP)

Our 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

Demo | Documentation | Get Started

New Masked Input

Our 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

Demo | Documentation

New Report Viewer

v21.1 ships with the first-ever 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

Get Started

New Project Wizard

v21.1 ships with a new Blazor Project Wizard. This wizard allows you to choose a theme and specify localization 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 .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.

Charts

Pan and Zoom

Users can now zoom and pan the chart area with the mouse wheel or touch gestures. To enable this feature, add the DxChartZoomAndPanSettings component to the Chart's markup and specify its ArgumentAxisZoomAndPanMode and ValueAxisZoomAndPanMode properties.

Demo | Documentation

Axis Label Format

The new ChartElementFormat class defines format settings for axis labels. You can specify various numeric and date-time formats along with format specific settings like precision. You can also use the FromLdmlString method to create the desired custom format.

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.

Demo | Documentation

Data Editors

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.

Our Blazor data input UI components support the following mask types:

  • Date-Time
  • Numeric (e.g. currency, percentage, etc.)

Demo - Date-Time Masks | Demo - Numeric Masks | Documentation

Move Focus to an Editor in Code

Our Blazor Data Editors include a new FocusAsync method that allows you to focus the input field in code.

Navigation and Layout

Popup - Header, Body, and Footer Customization

Our Blazor Popup API now offers extended customization options for the following UI elements:

Demo

Popup Size

Our 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.

Demo

Popup Position

Use our new HorizontalAlignment and VerticalAlignment properties to position a Popup on screen. (Demo)

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. (Demo)

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.

Our new ShowAsync and CloseAsync methods allow you to asynchronously display and hide a Popup in code.

We've 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.

Demo

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

Scheduler

New Month View

Our Blazor Scheduler ships with a new Month View option. The Month View includes a MonthCount property.

Demo | Documentation

New Timeline View

Our new Blazor Timeline View arranges events and appointments across an easy-to-read horizontal timeline. Thanks to its flexible design, our Timeline View allows you to display multiple time rulers with different scales.

Demo | Documentation

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. (Demo)

Restrict User Actions

The following new options allow you to configure/control Scheduler-related actions available to end users:

Demo

API Enhancements

Resolved Issues

See our Version History for a complete list of issues resolved in v20.1.3.

Breaking Changes

  • T982678: DevExpress Blazor components no longer support .NET Core 3.1
  • T999135: Data Grid - Localization strings have changed their prefix from Grid_ to DataGrid_
  • T999158: Data Editors - Changed alignment of data editors in CSS containers
  • T986360: Charts - The DxChartCommonSeries.AggregationMethod and DxChartSeries.AggregationMethod properties have become obsolete
  • Scheduler
    • T990675: Behavior of appointment edit forms has changed
    • T990618: Horizontal appointments now display their status
    • T990650: The rendering of horizontal appointments was changed
  • Popup
    • T986662: The Popup has changed its rendering
    • T986363: The CloseButtonClick event has become obsolete
    • T972514: The Content property has become obsolete
    • T972521: The FooterTemplate property has changed its behavior and signature
    • T972518: The HeaderTemplate property has changed its signature
    • T985590: The Visible property has changed its default value
    • T986380: The Popup has changed its default position on the screen
  • T975366: Context Menu - Renamed API members
  • T975628: The MenuItemsPosition enum has been replaced with the ItemPosition enum
  • T980276: TreeView - The DxTreeViewNode.NavigateUrl property set to a non-empty URL no longer has an effect.
  • T999452: DxTabs - The markup of the tab content area has been changed
  • T995722: Form Layout - Changed the default approach used to calculate caption paddings

20.2.6

Data Grid

Drop-down width modes for Combobox columns:

  • Content or editor width
  • Content width
  • Editor width

Documentation

Data Editors

HTML events

Data editors based on the standard HTML input element now apply popular event handlers to the input element directly. For a complete list of data editors and supported event handlers, refer to the following help topic: HTML Attributes and Events.

Spin Edit

You can now use the mouse wheel to change an editor’s value.

Chart Enhancements

The new DxChartToooltip.Position property specifies whether the component displays tooltips inside or outside the series.

Scheduler Enhancements

Use the new DxSchedulerDataStorage.RecurrenceSettings property to define common settings for all recurrent appointments displayed in the Scheduler.

CodeRush

CodeRush now includes templates that allow you to quickly create popular DevExpress components for Blazor in Visual Studio. For more information, refer to the following help topic: Templates for DevExpress Components.

Resolved Issues

See our Version History for a complete list of issues resolved in v20.2.6.

Breaking Change

T971305 - Charts - The DxChartTooltip.Enabled property should be set to true to display tooltips with templates.

20.2.5

New Menu Component

Our new Menu component for Blazor includes the following features:

  • Horizontal/vertical orientation
  • Display modes (Auto, Desktop, and Mobile)
  • Adaptive layout
  • Templates for menu items, item text, and item submenu

Demo | Documentation

Chart Enhancements

Grid lines visibility. To add vertical grid lines or hide both vertical and horizontal grid lines to/from the Chart component, use the axis’s Visible property.

Scheduler Enhancements

Handle the new StartDateChanged event to synchronize the range of visible dates in the Scheduler with external components or labels.

Resolved Issues

See our Version History for a complete list of issues resolved in v20.2.5.

Breaking Change

T958401 - Popup - The CloseButtonClick event changed the delegate type from Action to EventCallback

20.2.4

Grid Layout

Named Areas for Responsive Layouts

You can now create named areas, assign them to layout items, and place these areas in grid rows to create responsive layouts. (Documentation | Demo)

Data Editors

Input CSS Classes

The new InputCssClass property allows you to apply predefined or custom CSS classes to the input element of the ComboBox, Date Edit, Spin Edit, Text Box, and Time Edit.

Memo – Text Area CSS Class

The new TextAreaCssClass property allows you to apply a predefined or custom CSS class to the Memo’s text area.

Date Edit and Calendar – First Week of the Year

Use the WeekNumberRule property to specify the first week of the year in the calendar.

Upload

Authentication and Cancel Upload

Handle the new FileUploadStart event to add authentication information to upload requests, cancel an upload based on a condition or change the upload URL.

Blazor Project Templates

.NET 5.0 Support

The DevExpress Template Gallery now allows you to create a Blazor application that targets .NET 5.0.

Resolved Issues

See our Version History for a complete list of issues resolved in v20.2.4.

20.2.3

Support for .NET 5.0

In this version, we added support for .NET 5.0 Release Candidate 2.

Blazor Components in the DevExpress Installer

You can now use the DevExpress .NET Product Installer to install DevExpress Blazor components.(Documentation)

Visual Studio Integration

Blazor Project Templates

The DevExpress Template Gallery now includes Blazor project templates. (Documentation)

New Grid Layout

The new Grid Layout for Blazor allows you to arrange UI elements on a page. The component is based on a CSS Grid Layout: layout items are organized into rows and columns.

Demo | Documentation

New Stack Layout

The new Stack Layout for Blazor allows you to stack UI elements vertically or horizontally.

Demo | Documentation

New Layout Breakpoint

The new Layout Breakpoint component for Blazor allows you to adapt a page layout to different screen sizes. For example, you can use breakpoints to create responsive DxGridLayout, DxStackLayout, or any other components.

Demo | Documentation

New Time Editor

The new Time Edit component for Blazor has the following features:

  • DateTime / TimeSpan binding
  • Integrated drop-down Time Picker
  • 12 / 24 Hour Format support
  • Min / Max Time support
  • Read-Only and Disabled States
  • Null Text
  • Clear Button

Demo | Documentation

Data Grid Enhancements

Total and Group Summaries

The Data Grid can now compute summaries across all data rows or individual groups. Predefined aggregate functions include:

  • Sum
  • Min
  • Max
  • Avg
  • Count

Demo | Documentation

Column Resize

Users can now resize grid columns. To enable this feature, use the ColumnResizeMode property.

Demo | Documentation

Fixed Columns

You can now use the new FixedStyle property to anchor columns to the left or rightmost edge of the grid. These fixed columns are never scrolled horizontally.

Demo | Documentation

Scheduler

Custom Appointment Form

Our new AppointmentFormLayout and AppointmentCompactFormLayout properties allow you to create a custom appointment form.

Demo | Documentation

Resources

With this release, you can associate Scheduler appointments with resources (such as employees, locations, and so on). Then, you can use the new GroupType property to group appointments by resources or dates. The Scheduler also ships with a Resource Navigator that allows you to filter resource groups.

Demo | Documentation

Data Editors

Date Edit - Display Time

The new TimeSectionVisible property allows you to display time values in the Date Edit component.

Long Mouse Click / Long Key Press Support

Users can now long click or long key press to modify the Spin Edit value. In the ComboBox and TagBox components, users can use a long key press to navigate through items.

Resolved Issues

See our Version History for a complete list of issues resolved in v20.2.

Breaking Changes

20.1.11

Resolved Issues

See our Version History for a complete list of issues resolved in v20.1.11.

20.1.10

Resolved Issues

See our Version History for a complete list of issues resolved in v20.1.10.

20.1.9

Resolved Issue

In this version, we resolved the following issue:

  • T951686 - .NET 5.0: The "Microsoft.WebTools.Shared.Exceptions.WebToolsException: Build failed." error occurs while publishing a project with v20.1.8

20.1.8

Support for .NET 5.0

In this version, we added support for .NET 5.0.

Resolved Issues

See our Version History for a complete list of issues resolved in v20.1.8.

20.1.7

Support for .NET Core 3.1.8

In this version, we added support for .NET Core 3.1.8.

DevExpress Project Templates

You can now create Blazor Server and WebAssembly apps based on DevExpress project templates that include:

  • References to the DevExpress Blazor NuGet package and DevExpress resources
  • The DevExpress Blazing Berry theme
  • Sidebar navigation based on the TreeView component
  • The Data Grid component

Documentation

Data Grid Enhancements

You can customize text displayed in the pop-up Edit Form's header. (Documentation)

Data Editors Enhancements

  • Date Edit
    • The new CustomDisabledDate event allows you to disable selection of specific dates in the component’s calendar. (Documentation | Demo)
    • You can now specify a custom null value for the Date Edit. This value is applied to the editor each time a user clears the Date Edit's content. (Documentation)
  • Calendar - The new VisibleDateChanged event allows you to handle changes to the month and year in the component.
  • ComboBox, TagBox, ListBox - You can now specify custom column captions for multi-column editors. (Documentation | Demo)
  • Disabled state. The new Enabled property allows you to disable a data editor. The disabled editor does not respond to user interactions and users cannot change the editor's value/state.

Form Layout Enhancements

  • Disabled state for DevExpress editors in Form Layout items. (Documentation)
  • Read-only mode for DevExpress editors in Form Layout items. (Documentation)

Toolbar Enhancements

You can now control whether the Toolbar automatically closes the sub-menu after a user clicks this menu’s item. (Documentation)

Resolved Issues

See our Version History for a complete list of issues resolved in v20.1.7

Breaking Change

Date Edit - The DateEdit_AdaptiveDatePickerNotification localization string has been replaced with the DateEdit_DisabledDateNotification and DateEdit_OutOfRangeNotification strings

20.1.6

Support for .NET Core 3.1.7 and Blazor WebAssembly 3.2.1

In this version, we added support for .NET Core 3.1.7 and Blazor WebAssembly 3.2.1.

New Memo Component

The new Memo component for Blazor has the following features:

  • Data binding
  • Custom size
  • Resize modes
  • Clear button
  • Read-only state

Demo | Documentation

Data Grid Enhancements

New Popup Edit Form

You can now edit row values in a pop-up Edit Form. (Demo | Documentation)

Scheduler Enhancements

  • Appointment Templates - Use templates to customize appointment appearance (Demo | Documentation)

  • Custom Fields - Add custom data to Scheduler’s appointments, labels, and statuses (Documentation)

  • New API properties that allow you to assign CSS classes to appointment labels and statuses (Documentation)

Data Editors Enhancements

  • ComboBox, TagBox, ListBox - Support for multiple columns (Demo | Documentation)

  • ComboBox, TagBox, ListBox - Binding to a data object field (Demo)

  • Calendar enhancements

    • Validation support
    • Nullable DateTime support
    • Binding to a single date (Documentation)

  • CheckBox, ComboBox, DateEdit, SpinEdit, TagBox - New InputId property

Form Layout Enhancements

You can now assign CSS classes to layout items and to captions of items, tab pages, and groups.

Processing Events

Changed the delegate type from Action to EventCallback in multiple components.

Resolved Issues

Refer to Version History for a complete list of issues resolved in 20.1.6.

Breaking Changes

20.1.5

Support for .NET Core 3.1.5

In this version, we added support for .NET Core 3.1.5.

Data Grid Enhancements

Data Editors Enhancements

Other Enhancements

Resolved Issues

Refer to Version History for a complete list of issues resolved in 20.1.5.

Breaking Changes

20.1.4

Support for .NET Core 3.1.4 and Blazor WebAssembly 3.2.0

In this version, we added support for the .NET Core 3.1.4 and the Blazor WebAssembly 3.2.0 Release.

New Reporting Components *

With our 20.1.4 release, we added Blazor Reporting components with the following features:

  • Document Viewer

    • Preview and print documents
    • Export to different formats (PDF, XLS, XLSX, RTF, DOCX, MHT, HTML, TXT, CSV, Image)
    • Navigation via buttons and bookmarks
    • Search support
    • Multi-page mode
    • Full screen mode

  • Report Designer

    • Support for different report types (Table Report, Master-Detail Report, * * * Invoice Report, Vertical Report, and so on)
    • Bind to data (SQL, JSON and Object data sources)
    • 20+ report controls, including Charts and Pivot Tables
    • Report Wizard
    • Data Source Wizard and Query Builder
    • Built-in Document Viewer
    • Data shaping and analytics
    • Parameters support
    • Data navigation
    • Appearance customization

Demo - Document Viewer | Demo - Report Designer | Documentation

* Important Note: Though DevExpress Reports supports Blazor, it is not included in our Blazor UI component distribution. To use DevExpress Reports in your Blazor project or to replicate the functionality described below, you must purchase a DevExpress Subscription (Reporting Subscription, ASP.NET Subscription, DXperience, or Universal). For more information on what is included in our product subscriptions, refer to the product matrix.

New Toolbar Component

The new Toolbar component for Blazor has the following features:

  • Various button types
    • Drop-down items
    • Checked/unchecked items
    • Radio groups
    • Link items
  • Button render and style customization
  • Adaptive mode

Demos | Documentation

New Context Menu Component

The new Context Menu component for Blazor with the following features:

  • Data binding
  • Unbound mode
  • Item groups
  • Item appearance customization

Demos | Documentation

Size Modes

The majority of DevExpress Blazor components now support three size modes defined in your Bootstrap theme: small, medium, and large. You can apply a size mode to an individual component (for example, a data editor or pager), all compatible components in a container (for example, Data Grid or Form Layout), or for the entire application. (Documentation)

Data Grid Enhancements

Charts Enhancements

Data Editors Enhancements

Resolved Issues

Refer to Version History for a complete list of issues resolved in 20.1.4.

Breaking Changes

19.2.4 Release

.NET Core 3.1.2 Support

In this version, we added support for the .NET Core 3.1.2 update.

New Upload Component

Our new Upload component for Blazor includes the following features:

  • Chunk upload for large files
  • Upload multiple files at once
  • Drag-and-drop area for uploaded files
  • File extension and size validation
  • Instant upload
  • Upload on a button click

Demos | Documentation

Added

Fixed

Breaking Changes

19.2.4-Preview

New Upload Component

Our new Upload component for Blazor includes the following features:

  • Chunk upload for large files
  • Upload multiple files at once
  • Drag-and-drop area for uploaded files
  • File extension and size validation
  • Instant upload
  • Upload on a button click

19.2.3 Release

Please also explore new features and breaking changes introduced in 19.2.1 Beta and 19.2.2 Beta versions.

New Bootstrap Theme

We created a new “Blazing Berry” theme for applications that are built using Bootstrap v4. This theme is now the default theme for our online demos.

New Components

In this version, we added two new components to our DevExpress UI for Blazor:

  • Button
  • TagBox

Added

  • Data Grid
    • Page size selector
    • The ability to limit the number of visible numeric buttons in a pager
    • Row preview section
    • New row initialization
    • Reload data in code
  • Chart - The ability to specify an axis type
  • Spin Edit - Hide spin buttons
  • Pager - The ability to limit the number of visible numeric buttons
  • Popup
    • Footer template
    • Change the header's visibility in code
    • Change the component’s visibility in code
    • A scrollbar in the pop-up window’s content.

Fixed

Breaking Changes

Known Issues

19.2.2 Beta

.NET Core 3.1.1 Support

In this version, we support .NET Core 3.1.1 that contains security and reliability fixes.

Increased Stability

We polished features delivered in 19.2.1 Beta.

Breaking Changes

19.2.1 Beta

Added

  • Localization
  • Data Grid
    • Asynchronous data binding
    • Binding to custom data sources
    • A CheckBox column
    • The Go to Page input box to jump to the corresponding page
  • Scheduler - New events to handle CRUD operations (add, update, and remove appointments)
  • Date Edit, Spin Edit, and Text Box - NullText support
  • Pager - The Go to Page input box to jump to the corresponding page

Fixed

Breaking Changes

19.1.10

.NET Core 3.1 Support

In this version, we added support for the release of .Net Core 3.1.

New CheckBox Component

We added the following features to the new Blazor CheckBox component:

  • Bind to any data type
  • Toggle switch mode
  • Support for the indeterminate state
  • Customizable appearance

Added

  • Data Grid
    • Handle a row click
    • Cell and row HTML decoration
    • Ctrl+click to clear a column’s sort order
  • TreeView – Load child nodes on demand
  • Date Edit – Support for null values
  • The Clear button was added to the Text Box, Spin Edit, Date Edit, and ComboBox

Fixed

Breaking changes

19.1.9

Added

  • Data Grid - Save and restore the layout
  • Date Edit - ScrollPicker mode

Fixed

Changed API

19.1.8

Fixed

Added

  • Data Grid

    • API for managing the index of the current page (PageIndex and PageIndexChanged)
    • API for getting the current page count (PageCount and PageCountChanged)

  • TreeView

    • Templates
    • Customizing the way how end-users can expand/collapse nodes
    • Detecting whether the event triggering was caused by an API method call or not.
    • Finding all nodes that satisfy the specified condition (predicate).
    • Getting the node's parent node information.

19.1.7

Added

  • Support for .NET Core 3.0 Release

0.4.1

Fixed

  • Date Edit - Clicking a date does not work properly in Data Grid's Edit Form
  • Date Edit - The component does not prevent an internal calendar from changing a selected day in read-only mode
  • Data Grid - A click on a grid header with Ctrl pressed opens a new tab in Firefox
  • Data Grid - Grouping data by a ComboBox column outputs a column value to a group row instead of text
  • Data Grid - Expanding a DateTime group does not display data rows
  • Data Grid - A format string applied to a Spin Edit column does not affect a corresponding cell in a group row
  • List Box - The component does not allow selecting a range of items with Shift pressed if the ShowCheckboxes property is set to true

RC

New Components

  • Calendar
  • List Box
  • Popup

Added

  • Data Grid
    • Bind to ExpandoObjects instances
    • Bind to complex data objects
    • Filter Row enhancements
  • Charts - New series types: Financial, Range, Pie, and Donut

Changed API

  • ComboBoxDataLoadMode {Default, VirtualScrolling} renamed to ListRenderMode {Entire, Virtual}
  • DxComboBox.DataLoadMode renamed to DxComboBox.ListRenderMode

0.3.3

Added

  • Support for .NET Core 3.0 Release Candidate 1

0.3.2

Added

Form Layout

  • Build group layouts for different screen resolutions. Use the DxFormLayoutGroup class' ColSpanXX properties to specify the width of layout groups for different screens.
  • Build tabbed layouts for different screen resolutions. Use the DxFormLayoutTabPages class' ColSpanXX properties to specify the width of layout tabs for different screens.

Fixed

0.3.1

Added

  • Support for NET Core 3.0 Preview 9

Beta 3

Added

  • Data Grid
    • Multiple selection
    • Specify a column's position in code
    • Drag and drop column headers
    • Grouping
    • Master-Detail view
  • Scheduler - Appointment editing
  • Text Box - Password mode
  • All Data Editors - Read-only mode

Changed API

  • DxDataGrid.AllowDataRowSelection became obsolete, use DxDataGrid.SelectionMode = “DataGridSelectionMode” instead.
  • DxDataGrid.SelectedDataRow renamed to DxDataGrid.SingleSelectedDataRow.
  • DxDataGrid.SelectedDataRowChanged renamed to DxDataGrid.SingleSelectedDataRowChanged.

Beta 2

New Chart Component

We included the following features in the new Blazor Chart component:

  • Area, Bar, Line, and Bubble series types
  • Dynamic series creation
  • Tooltip and legend customization
  • Multiple axes
  • Pivot Grid data visualization

Added

  • Support for .Net Core 3.0 Preview 8
  • Data Grid
    • Enable/disable sorting within the entire grid (API)
    • Control an individual column’s sorting (enable/disable sorting, set up a column sort order and position among sorted columns)
    • Multiple column sorting
    • Cell text alignment
    • Customize command buttons and control their visibility

Beta 1

New Scheduler Component

The new Scheduler component supports the following features:

  • Three built-in views: Day, Work Week and Week
  • Data binding
  • Recurring appointments

Added

  • Support for .Net Core 3.0 Preview 7
  • Data Grid
    • Toggle column visibility
    • Horizontal scrolling
    • Vertical scrolling
  • TreeView - Data binding
  • Form Layout - Toggle item visibility

Changed API

  • ComboBoxDataLoadMode.Defaul renamed to ComboBoxDataLoadMode.Default.
  • Pivot Grid-related enumerations moved from the DevExpress.Blazor.PivotGrid namespace to the DevExpress.Blazor namespace.
  • The SortOrder enumeration renamed to PivotGridSortOrder, and its members (Asc and Desc) renamed to Ascending and Descending, respectively.

[0.0.12]

Added

  • Data Grid - Virtual scroll
  • ComboBox - Virtual scroll

Changed API

  • Data Grid
    • AllowRowSelection renamed to AllowDataRowSelection
    • SelectedDataItem renamed to SelectedDataRow
    • SelectedItemChanged renamed to SelectedDataRowChanged
  • TreeView
    • ExpandedChanging divided into two events: BeforeCollapse and BeforeExpand
    • ExpandedChanged divided into two events: AfterCollapse and AfterExpand

[0.0.11]

Added

  • TreeView
  • ComboBox
    • Filter data
    • Allow user input
    • Keyboard support

[0.0.10]

Added

  • .Net Core 3.0 Preview 6 support

[0.0.9]

Fixed:

  • Data Grid
    • A row cannot be selected on iOS.
    • The NullReferenceException occurs when a user edits a new row with a null row editor value.
  • ComboBox - A drop-down item cannot be selected on iOS.
  • Form Layout - The NullReferenceException occurs when the component is bound to a Model with null property values.

[0.0.8]

Added:

Data Grid

  • Cascading combo boxes in the cell's Edit Template
  • Edit Form with custom templates
  • Edit Form validation

Fixed:

[0.0.7]

Added

  • Support for Blazor Validation in the Form Layout component and date editors
  • Support for NullText in the ComboBox component
  • Theme switcher for demos

[0.0.6]

Fixed

  • Fix Blazor (client-side) support

[0.0.5]

Added

  • .Net Core 3.0 Preview 5 support

[0.0.4]

Added

  • New Form Layout Component.
  • New Tabs Component.
  • Use a new Form Layout component as the Data Grid's edit form.
  • .Net Core 3.0 Preview 4 support.
  • Follow Microsoft's renaming from "Razor Components" to "Blazor".

[0.0.3]

Added

  • Update DevExtreme.AspNet.Data to version 2.2.0 to improve the overall performance.
  • Add the Bootstrap hover and select effects to the ComboBox' drop-down list items.  

Fixed

  • The down arrow image is not properly aligned within the ComboBox' drop-down button.
  • Arrow images within the Date Edit calendar's month/year navigation buttons do not have the same height.

[0.0.2]

Fixed

  • A New command button does not always work properly in the Data Grid.

[0.0.1]

Initial version contains:

  • Data Grid
  • Pivot Grid
  • Data Editors (ComboBox, Date Edit, Spin Edit, Text Box)
  • Pager