Blazor

DevExpress UI for Blazor

OTHER License

Stars
380
Committers
20
View Code on GitHub Visit Website
Ecosystems: Blazor, Bootstrap, C#

Bot releases are hidden (Show)

Blazor - 22.2.4 Latest Release

Published by khamlyuk over 1 year ago

Resolved Issues

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

Blazor - 22.1.4

Published by pavelovcharov about 2 years ago

Resolved Issues

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

Blazor - 22.1.3

Published by pavelovcharov over 2 years ago

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.

Blazor - 21.2.7

Published by pavelovcharov over 2 years ago

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.

Blazor - 21.2.6

Published by pavelovcharov over 2 years ago

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.

Blazor - 21.2.5

Published by pavelovcharov over 2 years ago

Breaking Changes

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

Resolved Issues

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

Blazor - 21.2.4

Published by pavelovcharov almost 3 years ago

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.

Blazor - 21.2.3

Published by pavelovcharov almost 3 years ago

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.

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.

Blazor - 21.1.6

Published by pavelovcharov about 3 years ago

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.

Blazor - 21.1.5

Published by pavelovcharov about 3 years ago

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.

Blazor - 21.1.4

Published by pavelovcharov over 3 years ago

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
Blazor - 21.1.3

Published by pavelovcharov over 3 years ago

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
Blazor - 20.2.6

Published by pavelovcharov over 3 years ago

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.

Blazor - 20.2.5

Published by pavelovcharov over 3 years ago

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

Blazor - 20.2.4

Published by pavelovcharov almost 4 years ago

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.

Blazor - 20.2.3

Published by pavelovcharov almost 4 years ago

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

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

Blazor - 20.1.7

Published by pavelovcharov about 4 years ago

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

Blazor - 20.1.6

Published by pavelovcharov about 4 years ago

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 several components.

Resolved Issues

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

Breaking Changes

Blazor - 20.1.5

Published by pavelovcharov over 4 years ago

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

Blazor - 20.1.4

Published by akorenchikov over 4 years ago

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

Related Projects
radzen-blazor

Radzen Blazor is a set of 70+ free native Blazor UI components packed with DataGrid, Scheduler, C...

07 Feb 2019 3,173
BlazorStrap

Bootstrap 4 Components for Blazor Framework

20 Apr 2018 916
WebPx.AdminLTE.AspNetCore

AdminLTE Template Razor Class Libraries for ASP.net Core

25 Feb 2020 39
Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Boot...

01 Dec 2018 3,137
devextreme-reactive

Business React components for Bootstrap and Material-UI

17 Mar 2017 2,078