Our most recent Blazor UI update (v21.1.5) includes two helpful dialogs for the DevExpress Blazor Rich Text Editor component: 'Insert Table' and 'Hyperlink'. As their name suggests, these new dialogs allow users to create and modify tables or hyperlinks within our Blazor Rich Text Editor.

Insert Table Dialog

The new 'Insert Table' dialog allows users to quickly generate a new table and insert it into an existing document. The dialog includes options to set the table's column and row numbers. Click the 'Table' ribbon item located on the 'Insert' tab to display the dialog.

Hyperlink Dialog

The editor's new 'Hyperlink' dialog allows users to insert a new hyperlink or edit existing hyperlinks within a document. It includes settings for three hyperlink types: a hyperlink to a web page, a link to a position within the document (bookmark), or an e-mail address.

Click the 'Hyperlink' ribbon item to activate this dialog.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. For some quick feedback, please submit your responses to this short survey:

And feel free to post additional comments below. Let us know what you think of our Blazor Rich Text Editor's new dialogs.

As you may know, we recently introduced an entirely new DevExpress Blazor Grid component in June (available as a CTP version). We continue to improve the capabilities of our new grid and expect to reproduce all the functionality supported by our existing Blazor data grid in short order.

This post summarizes the new features/enhancements we’ve made to the DevExpress Blazor Grid in our most recent minor release (v21.1.5).

Filter Row

Our Blazor Grid now ships with filter row support – a quick and easy way to incorporate data filtering within your Blazor app. This row displays in-place text editors for all data columns within a given Grid. When a user moves focus into the filter row’s editor, the Grid creates a filter condition based on editor value and applies this condition to the corresponding column.

To activate the filter row, enable the ShowFilterRow option.

<DxGrid Data="@DataSource"
        ShowFilterRow="true">
  @*...*@</DxGrid>

Documentation | Demo

Customization

We added the following new options to help you customize our Blazor Grid's filter row:

• FilterRowOperatorType - Specifies the operator used to create a filter condition based on 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.

You can also display your custom editor within a filter row cell (instead of our predefined text editor). To display a custom editor, define a column's FilterRowCellTemplate.

<DxGrid Data="@Data"
        ShowFilterRow="true"><Columns><DxGridDataColumn FieldName="OrderId" DisplayFormat="d" SortIndex="0"><FilterRowCellTemplate><DxSpinEdit Value="(int?)context.FilterRowValue"
                    ValueChanged="(int? v) => context.FilterRowValue = v"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" /></FilterRowCellTemplate></DxGridDataColumn><DxGridDataColumn FieldName="OrderDate" DisplayFormat="d"><FilterRowCellTemplate><DxDateEdit Date="(DateTime?)context.FilterRowValue"
                    DateChanged="(DateTime? v) => context.FilterRowValue = v"
                    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto" /></FilterRowCellTemplate></DxGridDataColumn><DxGridDataColumn FieldName="ProductName"
                      FilterRowValue='"Queso"'
                      FilterRowOperatorType="GridFilterRowOperatorType.Contains" />
    @*...*@</Columns></DxGrid>

Documentation | Demo

Filter in Code

You can now set filter options in code. Call the FilterBy method to filter Grid data and the ClearFilter method to reset the applied filter.

<DxGrid Data="@Data"
        ShowFilterRow="true"
        @ref="MyGrid"><Columns>
    @*...*@<DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c2" /></Columns></DxGrid><DxButton Click="@(() => MyGrid.FilterBy("UnitPrice",
GridFilterRowOperatorType.Equal, 12))">Filter By "Unit Price"</DxButton><DxButton Click="@(() => MyGrid.ClearFilter())">Clear Filter</DxButton>

@code {
  object Data { get; set; }
  IGrid MyGrid { get; set; }
  // ...
}

Command Column

Our Blazor Grid now includes a new column type - command. At present, this new command column will only display a Clear button in the filter row. Users can click this button to reset the filter applied to the Grid.

We will extend the command column's functionality to support data management buttons – used to create, edit, and remove data rows.

To display a command column, declare a DxGridCommandColumn object within the Columns template.

<DxGrid Data="@Data"
        ShowFilterRow="true"><Columns>
    @*...*@<DxGridCommandColumn /></Columns></DxGrid>

You can also display custom content within the column's filter row cell. To do custom content, define the FilterRowCellTemplate.

Documentation | Demo

API Changes

Our Blazor Grid now includes two types of columns: data and command columns.

We made the following API changes to avoid confusion with column names:

• To add a data column to the Grid, you should now use the DxGridDataColumn class instead of the DxGridColumn class.
• The DxGridColumn is now labeled as an abstractclass because it contains the base API for both data and command columns.

We've also renamed the following templates:

• ColumnGroupRowTemplate ⇒ DataColumnGroupRowTemplate
• ColumnCellDisplayTemplate ⇒ DataColumnCellDisplayTemplate

Group Footer Summary

With v21.1.5, you can display group summary values in group footers. To display summary values in group footers, set the summary item's FooterColumnName property to the name of a group footer column.

<DxGrid Data="@Data"
        ShowGroupPanel="true"><Columns>
    @*...*@</Columns><GroupSummary><DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                        FieldName="TotalPrice"
                        FooterColumnName="TotalPrice" /></GroupSummary></DxGrid>

Documentation | Demo

Group Footer Templates

Our Blazor Grid now includes the DxGridColumn.GroupFooterTemplate and DxGrid.ColumnGroupFooterTemplate properties. These properties allow you to customize group footers as requirements dictate.

Group Footer Display Mode

By default, our Blazor Grid will display group footers when the corresponding groups are expanded and contain either summary values or custom template content.

You can now modify the manner in which group footers are displayed by defining the new GroupFooterDisplayMode property. Simply use one of the following options: Always , Never , or IfExpanded.

<DxGrid Data="@Data"
        ShowGroupPanel="true"
        GroupFooterDisplayMode="GridGroupFooterDisplayMode.Always">
  @*...*@</DxGrid>

For consistency, we also renamed the ShowFooter option to FooterDisplayMode so it closely matches GroupFooterDisplayMode. The FooterDisplayMode property allows you to manage the visibility of the Grid's footer section.

Column Name

We also introduced a Name property for all Grid columns. Use this property to specify a unique identifier for a given column (once named, use it to reference the column when creating total or group summaries).

This property will be helpful for columns where the FieldName property is not specified (command columns or data columns with custom display templates).

As you may know, our Form Layout component for Blazor includes data editors and allows you to create responsive edit forms with built-in auto-arrangement support. Our Blazor Tab component allows you to incorporate tabbed interfaces within your web app.

This post details new features/enhancements we’ve made to both components in our most recent release (v21.1).

Form Layout

Caption Position

We added a new CaptionPosition property to improve the flexibility of our Form Layout component's auto-generated design. Use this property to display a caption above (Vertical) or to the left of an item (Horizontal).

You can now specify this property individually for each group, tab page, or a single item. When you set the CaptionPosition at the Form Layout level, the property is passed down recursively, unless, one of the descendants has its own CaptionPosition specified. In essence, individual settings have higher priority.

Demo | Documentation

Item Caption Alignment

For a Form Layout with horizontal captions, we added an option that allows you to choose how paddings are calculated between captions and corresponding editors. You can use the ItemCaptionAlignment property to select one of the following options.

• All - Paddings are calculated based on the longest caption in the entire Form Layout component, except for tab pages wherein caption widths are always calculated separately.

• InGroups - Works like the All option, but the longest caption is chosen for each group. Captions outside the group do not affect caption alignment inside the group.

• None - Disables automatic caption width calculations. As such, caption width is equal to the width of its content. The corresponding editor will be placed directly after its caption and therefore, may not align with other editors in the group.

Tabs Enhancements

Render Mode

We added a new RenderMode property for the DevExpress Tabs component for Blazor so you can configure how content within Tabs is loaded by selecting one of the following options:

• Default– The component initially loads only content of an active tab. When a user selects another tab, its content is replaced by the content of the previously active tab in the DOM. Performance for initial load is fast because the component doesn't maintain the state of its tabs.
• AllTabs– The component loads the content of all tabs initially and stores it within the DOM. This mode speeds up navigation between tabs, but the page may take a longer time to load and can increase memory consumption.
• OnDemand (aka Lazy Load) – The component initially loads content of only the active tab. As the user selects other tabs, these are loaded and stored in the DOM. This mode allows you to maintain the tab's state and improve overall performance at the same time.

Tab Click

In v21.1, we implemented the DxTabs.TabClick and DxTabBase.Click events so you can catch and respond to tab clicks, as needed.

Use the TabClick event to process every tab click with the same code:

<DxTabs TabClick="OnTabClick"><DxTab Text="Tab 1"></DxTab><DxTab Text="Tab 2"></DxTab></DxTabs>

@ClickedTab

@code  {
  public string ClickedTab { get; set; } = "";
  void OnTabClick(TabClickEventArgs e) {
    ClickedTab = $"' Tab {e.TabIndex + 1}' has been clicked";
  }
}

To process a specific tab’s Click event, create an individual event handler for each tab:

@inject IJSRuntime JSRuntime<DxTabs><DxTab Text="Home" Click="OnHomeTabClick" />
  ...</DxTabs>

@code  {
  async Task OnHomeTabClick(TabClickEventArgs e) {
    if(e.MouseEventArgs.Detail == 2)
      await JSRuntime.InvokeVoidAsync("open", "/", "_blank");
  }
}

A masked input field can help you improve readability and better control data input within a form field. As you may already know, our last release (v21.1) added masked input support to our Blazor Date Edit, Time Edit, and Spin Edit components. This post summarizes the new enhancements made to these three Blazor data editors and examines how their implementation differs from those found in our Masked Input component].

Date Edit and Time Edit

As you may know, the DevExpress Date Edit for Blazor displays a drop-down calendar that allows users to select dates while the DevExpress Time Edit for Blazor displays a drop-down time picker. Both components now support a new Mask property.

To enable masks in both, set your desired mask pattern for the appropriate Mask property: DxDateEdit.Mask or DxTimeEdit.Mask. This mask type supports predefined mask patterns or the standard date and time .NET formats.

You can also specify additional mask-related settings (current culture, caret mode, etc) by configuring the DxDateTimeMaskProperties component (common for both mentioned components).

For instance, use DxDateTimeMaskProperties.CaretMode (advancing caret) to automatically move the caret to the next date or time section once an end-user has edited the previous value:

<DxDateEdit @bind-Date="@Date" Mask="D"><DxDateTimeMaskProperties Culture="@CultureInfo.GetCultureInfo("en-US")"
                            CaretMode="MaskCaretMode.Advancing" /></DxDateEdit>

Demo | Documentation

Spin Edit

The DevExpress Spin Edit for Blazor allows you to display and edit numeric values. With v21.1, you can specify a mask pattern (a value format) by using the new DxSpinEdit.Mask property and configure additional mask settings with the DxNumericMaskProperties component.

For more information on Numeric masks, refer to the following help topic: Numeric Masks.

Demo | Documentation

An Alternative - Masked Input

Let’s quickly review the capabilities of the new DevExpress Masked Input component.

While our Masked Input component for Blazor supports DateTime, Numeric, Text, and Regular Expressionmask types, it has one fundamental difference from the aforementioned data editors (Date Edit, Time Edit, and Spin Edit).

Most of our data editors work with standard data types (DateTime, numeric objects, etc), but you cannot use these editors (Date Time, Spin Edit, Time Edit) if you store data source objects (dates or numbers) as strings. The Masked Input component can work with string-based data fields. It converts strings from the data source to the appropriate data type (DateTime, int, and so forth) and then treats the resulting value as a date or number. This auto conversion process allows you to apply the desired mask type (Date-Time, Numeric) for your string objects.

To summarize, if you store your data source objects as strings, you should definitely consider the use of our Masked Input component. If you store your data using corresponding data types (DateTime, int, etc), feel free to use our new Mask property (for our Blazor Date Edit, Time Edit, and Spin Edit) instead.

Set Focus from Code

Before I wrap up, quick reminder that you can set editor focus in code. Use the FocusAsync method for all data editors that contain 'input' or 'text-area' elements (ComboBox, TagBox, Text Box, Masked Input, Memo, Spin Edit, Date Edit, and CheckBox) to set focus. For example, call the DxTextBox.FocusAsync to focus a Text Box from within Razor code:

<DxTextBox @ref="component" Text="This is a text box."></DxTextBox>

@code {
    DxTextBox component;

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        component.FocusAsync();
    }
}

After some internal debate, we decided to end Partial/Medium Trust support across our entire ASP.NET product line (this includes DevExpress Reports and DevExpress Office File API) in our v21.2 release cycle (expected in Nov 2021). If you rely on medium trust, feel free to contact us via the DevExpress Support Center for assistance and migration strategies. While we don’t expect to reverse our decision (Microsoft has not update its implementation in quite a long time and maintenance continues to be an issue), we are more than happy to offer feedback and suggestions (for instance, we can certainly offer advice related to Docker containers.)

Our next major product release is a couple of months away. This post details some the Blazor-related features included in our first Early Access Preview (EAP) and a summary of additional features we expect to ship in November. As always, we welcome your thoughts and feedback.

If you own an active DevExpress Universal or DXperience Subscription, and would like to learn more about our Blazor product line or are ready to explore the features described herein, point your browser to the DevExpress Download Manager and download our EAP build at your convenience. You’ll find demo source code in the DevExpress product installation folder (default path is C:\Users\Public\Documents\DevExpress Demos 21.2\Components\Blazor\). You can execute our sample solutions directly from this folder, or if you prefer, use the DevExpress Blazor Demo Center to view our demos. For more information on how to run Blazor demos locally, refer to the following help topic: Demos.

New DropDown Component

Our first Blazor EAP includes ships with an entirely new Blazor DropDown component. This new UI element allows you to display a non-modal drop-down window within a Blazor application. The DevExpress Blazor DropDown component ships with the following built-in features:

Header, Body, and Footer Customization

Use the component’s HeaderText, BodyText, and FooterText properties to customize text for the corresponding UI element. To customize window content and appearance, simply use the templates below: 

• HeaderTextTemplate , BodyTextTemplate, FooterTextTemplate: Allows you to customize the DropDown’s content region. Predefined content alignment and paddings apply. 
• HeaderTemplate , BodyTemplate, FooterTemplate: Allows you to customize the entire DropDown (all elements). Predefined appearance settings do not apply.

Position

Use one of the following properties to specify the DropDown’s position within your Blazor app:

• PositionTarget property - specifies the selector of the element relative to which the DropDown component is displayed. 
• PositionRectangle property - specifies the area relative to which the DropDown component is displayed. 

The PositionMode property defines DropDown orientation (absolute, relative, bottom, center, etc) when the component is activated.

Position Restrictions

Custom Size and Resizing Capabilities

Use the component’s Width and Height properties to specify desired dropdown size. Activate the AllowResize property to allow end-users to modify dropdown size. When enabled,end-users can drag the component's border to modify both width and height.

Show and Close Actions

Grid

Row Selection

Our Blazor Grid now supports both single and multiple row selection. The new SelectionMode property specifies current mode.

Selection via Mouse Clicks

Users can easily select and deselect rows via mouse clicks. To enable this capability, set the AllowSelectRowByClick option to true. To specify and access selected data items, implement two-way binding for the SelectedDataItems property.

<DxGrid Data="GridDataSource" AllowSelectRowByClick="true" 
    @bind-SelectedDataItems="@SelectedDataItems"><Columns>
            @*...*@</Columns></DxGrid>

@code {
    IEnumerable<object> GridDataSource { get; set; }
    IReadOnlyList<object> SelectedDataItems { get; set; }
    // …
} 

Selection Column

Our Blazor Grid ships with a new column type - DxGridSelectionColumn. This column can display checkboxes in multiple selection mode and radio buttons in single selection mode

<DxGrid Data="GridDataSource" ...><Columns>/<DxGridSelectionColumn />
        @*...*@</Columns></DxGrid> 

Selection in Code

• SelectRow
• SelectRows
• SelectDataItem
• SelectDataItems
• SelectAllOnPage

Remove rows or data items from selection:

• DeselectRow
• DeselectRows
• DeselectDataItem
• DeselectDataItems
• DeselectAllOnPage

You can also call the ClearSelection method to reset all selection options.

Vertical and Horizontal Scrolling

The horizontal scrollbar appears when the total width of all columns exceeds the width of the component itself.

Column Width Enhancements

v21.2 includes the following column width related enhancements:

• When you specify a column’s Width property in pixels, the Grid renders the column with the defined width. The column’s cell content no longer affects column width. 
• If the total width of all columns exceeds the width of the component itself, the Grid shows the scrollbar (as demonstrated in the previous section).
• If the total width of all columns is less than the component width, the empty space remains to the right.
• If you do not specify column widths, the Grid renders columns with equal widths.
• If you specify widths for specific columns only, the Grid renders these columns with the defined widths and divides the remaining space between other columns equally.

We also limited the minimum column width to 50 pixels and introduced a new MinWidth option that allows you to modify this constraint.

Pager Position

You can now control the display of our Blazor Grid’s built-in data pager. Use the PagerPosition property to display the pager at the bottom, the top, or both the top and the bottom.

<DxGrid Data="GridDataSource" PagerPosition="GridPagerPosition.TopAndBottom"><Columns>
        @*...*@</Columns></DxGrid>

Column Text Alignment

Our Blazor Grid automatically aligns text within column data cells/footer cells based on column/bound data type. With v21.2, you can use the new TextAlignment option to modify text alignment as requirements dictate.

<DxGrid Data="GridDataSource" …><Columns><DxGridDataColumn FieldName="ProductName" 
            TextAlignment="GridTextAlignment.Center"/>
                @*...*@</Columns></DxGrid> 

Access Data Item

You can now access the processed data item within data-related event handlers (CustomSort, CustomGroup, CustomSummary, and so on) and the CellDisplayTemplate.

<DxGrid Data="GridDataSource" …><Columns><DxGridDataColumn FieldName="ProductName"><CellDisplayTemplate>
            @{
                var dataItem = @context.DataItem;
                //...
            }</CellDisplayTemplate></DxGridDataColumn>
        @*...*@</Columns></DxGrid> 

Rich Text Editor

New UI Dialogs

We have extended the capabilities of our Blazor Rich Text Editor and introduced the following new UI dialogs:

• Insert Table
• Hyperlink
• Bookmark
• Font
• Paragraph
• Tabs
• Insert Cells
• Delete Cells
• Split Table Cells
• Find and Replace
• Page Setup
• Alert

New Context menu

The DevExpress Blazor Rich Text Editor now includes built-in context menu support. This menu displays different options based on the clicked element and allows users to initiate actions without using the ribbon.

New API

Our Rich Text Editor ships with a new ReadOnly option. This option allows you to place the editor in read-only mode. We have also added a Modified property. As its name implies, this property indicates whether the current document has unsaved changes. 

With the Rich Text Editor’s DocumentFormat setting, you can specify the format used to store document content (allows you to open and save documents using a format other than OpenXml).  

And finally, GotFocus, LostFocus allow you to handle corresponding events when the control receives and loses focus.

Web Report Designer Enhancements

Updated User Interface

Please review the following article for information related to UI enhancements introduced in this EAP: Reporting — Updated Web Report Designer UI (Coming Soon in v21.2).

To explore this new UI, be sure to check out the following online demo: Web Report Designer - Online Demo.

Cross-Tab

Our Web Report Designer ships with a new Cross-Tab report control. We’ve also included a Cross-Tab report wizard to help you create cross-tab reports with ease. 

Report Design Analyzer

The Report Design Analyzer panel (designed to help you isolate, diagnose, and address common report design/layout-related issues) has been integrated into the DevExpress Web Report Designer (v21.2).

Refer to the Reporting — Early Access Preview (v21.2) post to learn more about upcoming Reporting tool features.

Tabs Scroll

In this release, we introduce a new ScrollMode property that allows you to specify how users navigate between tabs when they do not fit the container’s width. The following modes are available:

• Auto - the scroll mode is adapted to the device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
• NavButtons - the container displays a few tabs that fit the width. Users can navigate to other tabs in the following ways: use the navigation buttons, or hover the mouse pointer over a tab, hold the Shift key, and scroll the mouse wheel.
• Swipe - the container displays a few tabs that fit the width. To navigate to other tabs, users can swipe tabs, or hover the mouse pointer over the container, hold the Shift key, and scroll the mouse wheel.
• NoScroll - users cannot scroll tabs. The tabs that do not fit the container’s width are moved to a new line.

Coming Soon in v21.2

The features below are not included in our first EAP, but we expect to make them available in an upcoming beta (v21.2).

Grid

• Editing within an Edit Form
• Editing within a Popup Edit Form
• Page Size Selector
• Pager Customization Options

Scheduler

• Templates for various cell types (date headers, resource headers, headers that display days of a week, etc).

Rich Text Edit

• Localization

Data Editors

• Custom buttons
  
• Item templates for list editors

Charts

• Side-by-side stacked and full-stacked series
• Diameter, minimum diameter, and inner radius for Pie and Donut charts
• • Axis tick customization support
• Localization
• Axis inversion and custom position
  

Context Menu

• Templates support 

Your Feedback Counts

We deprecated our legacy SharePoint integration demos and related help documents for our v21.2 release. These resources no longer reflect our SharePoint strategy and SharePoint development best practices.

SharePoint Support: Legacy Strategy

The DevExpress ASP.NET Subscription introduced SharePoint support in 2008. Over the intervening years, we maintained and upgraded our controls to work with SharePoint 2013 and 2016. Regardless of SharePoint version, we offered two ways to integrate DevExpress control into a SharePoint portal.

• You could write code and integrate any DevExpress ASP.NET Control within a SharePoint page.
• You could use a codeless method to enhance a SharePoint portal: replace all list and memo editors with DevExpress counterparts.

The second method focuses on list and memo editors for a reason. These UI elements had limited capabilities for older versions of SharePoint. Users often wanted to replace all default widgets with advanced versions. Our integrated installer allowed you to do that. You could integrate DevExpress Grid View and Html Editor into all your SharePoint Portal pages without code.

SharePoint Support: Current Strategy

SharePoint 2019 and SharePoint Online changed our strategy in the following ways:

• SharePoint's integration mechanism changed. We decided that the best way to adjust is to focus on a more modern technology. You can now integrate any DevExtreme JavaScript Widget into SharePoint portal pages. We no longer support ASP.NET Web Forms Control integration.
• We found that the functionality of standard list and memo widgets now satisfies most users. We no longer support the integration feature that replaced standard widgets with DevExpress counterparts across all pages in a SharePoint portal.

Please review the following resources for up-to-date information on our JavaScript widgets and integration strategies for SharePoint portals.

• How to: Create a user control for a SharePoint application page or web part
• SharePoint Online Support Specifics: Use DevExtreme JavaScript Widgets instead of ASP.NET Controls
• How to Configure DevExtreme JavaScript Widgets

If you have questions on this change or require further assistance, please submit a ticket via the DevExpress Support Center. We will be happy to follow-up.

As you may know, our most recent major update - v21.2 – introduced new data editing and validation features for our new DevExpress Blazor Grid component(CTP). Should you have any questions/comments about these new features, please post a comment below or create a new support ticket.

New Blazor Edit Forms

Our Blazor Grid supports two new edit modes: Standard and Popup Edit Forms.

Use the Edit Mode option to switch between available modes:

• GridEditMode.EditForm (Default) – The Grid displays an inline edit form instead of the edited row.
• GridEditMode.PopupEditForm– The Grid displays the edit form in a pop-up window.

Online Demo

New Blazor Command Column

To enable data editing, add a DxGridCommandColumn to your Grid's Razor markup. This column displays the New, Edit, and Delete buttons:

<DxGrid Data="DataSource" ...><Columns><DxGridCommandColumn />
    @*...*@</Columns></DxGrid>

The NewButtonVisible, EditButtonVisible, and DeleteButtonVisible options allow you to hide the default command buttons. If you want to implement custom buttons, use the CellDisplayTemplate.

Customizing Edit Form

Currently, our Blazor Grid requires that you create a custom edit form. The EditFormTemplate allows you to create edit forms using standard or DevExpress data editors. I recommend that you use our Form Layout component within the Edit Form to generate form layouts with ease:

<DxGrid ...>
  ...<Columns><DxGridCommandColumn />
    @*...*@</Columns><EditFormTemplate Context="editFormContext">
    @{
      var employee = (Employee)editFormContext.EditModel;
    }<DxFormLayout><DxFormLayoutItem Caption="First Name:"><DxTextBox @bind-Text="@employee.FirstName" /></DxFormLayoutItem><DxFormLayoutItem Caption="Last Name:"><DxTextBox @bind-Text="@employee.LastName" /></DxFormLayoutItem></DxFormLayout></EditFormTemplate></DxGrid>

Edit Model and Data Item

Our Blazor Grid will create an internal Edit Model based on your data item's class when a user edits data. The Grid uses .NET value equality comparison to compare data Items by default. If your data source includes a key field or multiple keys, assign them to the KeyFieldName or KeyFieldNames property to disable .NET value comparison and instead allow the grid to compare data objects using keys.

You can access the Edit Model in the CustomizeEditModel event handler to update its values. The following code initializes values when a new row is being edited:

async Task Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
  if (e.IsNew) {
    var editModel = (Employee)e.EditModel;
    editModel.HireDate = DateTime.Today;
  }
}

This event also allows you to create a custom Edit Model instead of an automatically created object.

Validate Data

If you assign data annotation attributes to the Edit Model properties, our Blazor Grid automatically validates associated values. Add Blazor's ValidationMessage component to display validation errors for data editors separately or ValidationSummary to summarize validation error messages.

<DxGrid ...>
  ...<Columns><DxGridCommandColumn />
    @*...*@</Columns><EditFormTemplate Context="editFormContext">
    @{
      var employee = (Employee)editFormContext.EditModel;
    }<DxFormLayout><DxFormLayoutItem Caption="First Name:"><DxTextBox @bind-Text="@employee.FirstName" /></DxFormLayoutItem><DxFormLayoutItem Caption="Last Name:"><DxTextBox @bind-Text="@employee.LastName" /></DxFormLayoutItem><DxFormLayoutItem ColSpanMd="12"><ValidationSummary /></DxFormLayoutItem></DxFormLayout></EditFormTemplate></DxGrid>

Save Changes

Before saving changes, you can handle the following events to validate user input, access permissions-related info, and post changes to the underlying data source:

1. The Grid raises its EditModelSaving event after a user has submitted the edit form and data validation has passed.
2. The DataItemDeleting event is triggered after the user has confirmed the delete operation.
3. The DataItem property returns your data object.
4. The EditModel properties contain updated values.

Perform any additional checks, if necessary, and update your data source in these event handlers. Finally, be sure to re-bind the Grid with the updated data source to refresh displayed data:

async Task OnEditModelSaving(GridEditModelSavingEventArgs e) {
  var editModel = (Employee)e.EditModel;
  var dataItem = e.IsNew ? new Employee() : NorthwindContext.Employees.Find(editModel.EmployeeId);

  if (dataItem != null) {
    dataItem.FirstName = editModel.FirstName;
    dataItem.LastName = editModel.LastName;
    if (e.IsNew)
        await NorthwindContext.AddAsync(dataItem);
    await NorthwindContext.SaveChangesAsync();

    // Reload the entire Grid.
    GridDataSource = await NorthwindContext.Employees.ToListAsync();
  }
}

async Task OnDataItemDeleting(GridDataItemDeletingEventArgs e) {
  var dataItem = NorthwindContext.Employees.Find((e.DataItem as Employee).EmployeeId);

  if (dataItem != null) {
    NorthwindContext.Remove(dataItem);
    await NorthwindContext.SaveChangesAsync();

    // Reload the entire Grid.
    GridDataSource = await NorthwindContext.Employees.ToListAsync();
  }
}

As you may know, we released a preview version of our Rich Edit Blazor component last July. We are happy to announce the official release of the DevExpress Rich Text Editor for Blazor in our v21.2 release cycle.

For those unfamiliar with this product, the DevExpress Blazor Rich Text Edit component allows you to quickly incorporate Microsoft Word-inspired text editing functionality for web apps targeting the Blazor platform.

Our Blazor Rich Text Editor/Word Processing component includes all features announced with the EAP version and the following new capabilities:

Localization

As you may know, DevExpress Blazor components ship with localizable resources for UI elements (such as button captions, menu items, error messages, and dialog boxes). You can now also localize our Blazor Rich Text Editor for specific languages and locales.

To localize your Blazor application, please follow the instructions outlined in the following help topic: Blazor Localization

Context Menu

Our Rich Text Editor for Blazor ships with a built-in context/popup menu (able to display both single and multi-level menu items). As you would expect, this context/popup menu allows users to quickly access word-processing-related functions/operations.

The menu itself displays contextually relevant options when a user right-clicks on a given document element.

New Blazor Word Processing API

v21.2 includes the following new Rich Text Editor API members:

• ReadOnly - specifies whether users can edit a document.
• Modified - indicates if the current document includes unsaved changes.
• DocumentFormat - allows you to set a base format for storing document content. Specify this option so that you can open and save document formats other than OpenXml.
• DocumentLoaded - this event fires after the control has successfully created or opened a document.
• DocumentContentChanging - use this event to edit the document before saving it.
• SaveDocumentAsync - this asynchronous method saves the document and raises the DocumentContentChanged event once saved.
• GotFocus - fires after the Rich Text Editor receives focus.
• LostFocus - triggers after the Rich Text Editor loses focus.

New Dialogs

v21.1.5 introduced the Table and Hyperlink dialogs. In v21.2, we added the following UI dialogs to help users edit documents within our Blazor Rich Text Editor:

• Font - includes all available font settings: name, style, size, color, and more.

• Paragraph - displays paragraph settings, including options for "Indents and Spacing" and "Line and Page Breaks".
• Bookmark - allows a user to configure, insert and delete document bookmarks.
• Tabs - users can add, remove, and customize settings for document tab stops.
• Insert Cells - allows a user to insert a group of cells into a table.
• Delete Cells - can be used to delete a selected group of table cells.
• Split Table Cells - allows a user to split table cells.
• Find and Replace - can be used to find and optionally replace small text blocks within the document.

• Page Setup - contains page settings such as paper size, page margins, and layout options.

• Alert - a special dialog used to display notifications and errors to end-users.

Try these new UI dialogs now: Online Demo.

Your Feedback Matters

As always, we welcome your feedback. Please let us know what you think of our Blazor Rich Text Edit control by leaving a comment below or creating a support ticket. We'll be happy to follow up.

As you may already know, our most recent release (v21.2) includes several enhancements for the DevExpress Blazor Scheduler component. In this post, I'll summarize these new features and briefly describe their use.

As you may already know, our most recent release (v21.2) includes several enhancements for the DevExpress Blazor Scheduler component. In this post, I'll summarize these new features and briefly describe their use.

Templates

With v21.2, we added three new templates that allow you customize the appearance of our Blazor Scheduler:

1. Resource Header Template
2. Date Header Template
3. Time Cell Template

These flexible templates allow you to add simple HTML elements (such as images) or other Blazor components.

1. Resource Header Template

You can use the new ResourceHeaderCellTemplate to customize our Blazor Scheduler's resource header area. Here's an example that uses ResourceHeaderCellTemplate to display an employee's profile image and name into the resource header region:

Demo | Documentation

2. Date Header Template

A new DateHeaderCellTemplate will be of help when you need to display additional content in the date header cell region or if simply you want to change the header's default date format:

Demo | Documentation

3. Time Cell Template

Use the new TimeCellTemplate to customize our Blazor Scheduler's time cells. For example, you can use this template to display the total number of appointments by day within the component's footer area:

Demo | Documentation

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 depending on screen size.

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

Cell Customization API

Our new HtmlCellDecoration event allows you to customize the appearance of Scheduler cells.

Use this new API for scenarios such as highlighting cells within a specific interval for a specific resource, assigning different colors to different date header cells, highlighting the all-day area, etc.

The HtmlCellDecoration event also provides several data arguments to assign CSS classes and inline styles for cell customization:

Other API Enhancements

The DevExpress Scheduler for Blazor (v21.1) also includes these following API enhancements:

• All Blazor Scheduler Views now include a SnapToCellsMode property. With this property, you can enable/disable the snapping of appointments to time cells or enable automatic snapping (based on appointment time intervals). By default, appointments stretch to the nearest cell borders. You can change this behavior so that an appointment's width is proportional to its duration (SnapToCellsMode= SchedulerSnapToCellsMode.Never):

• The AppointmentFormShowing event's arguments now include a Title property. Use it to change the Appointment Form title.

Your Feedback Matters

As always, we welcome your thoughts/feedback/suggestion. Please comment below or create a new DevExpress Support Center ticket to share feedback with us.

Happy Holidays and a Happy New Year!

Our ASP.NET Web Forms and MVC components still support Internet Explorer 9+. Last versions of Internet Explorer have security risks and a lack of modern CSS approaches and JavaScript features. Development both for advanced and feature-poor browsers requires additional resources to find effective solutions for complex fixes and implement new functionality.

The public browser traffic analysis shows that Internet Explorer continues to lose popularity when compared to modern browsers. For instance, the graphic below illustrates that Edge has displaced Internet Explorer over recent years. 

Of course, we understand (and appreciate) that many of our customers are still working on projects started in the first decade of this century - when Internet Explorer was a major player in the browser space. Our main goal is to help you address your business needs in the most efficient manner possible and to that end, we need your feedback on a few key questions. Please take a minute to share Internet Explorer related feedback with us.

We hope you had a happy and healthy holiday season.

We’ve nearly completed our 2022 Blazor Roadmap. Here’s a brief overview for our upcoming development plans (a blog post will be published shortly):

• Release our new Blazor Grid (with essential features)
• Deliver upgraded Blazor Editors
• Develop new Blazor Layout components
• Add more features to existing Blazor controls

In short, we’re focusing on highly requested features. However, there are two recent issues that may consume our resources and delay our product deliverables. To help us finalize and publish our Blazor roadmap, we need your feedback on the following:

1. AoT Compilation & Trimming

As you may already know, Microsoft released Visual Studio 2022 and .NET 6 on November 8th, 2021.

DevExpress Blazor components support these products with our latest minor release (v21.2.4).

Limitations

Currently, our Blazor components do not support the following .NET 6 enhancements for Blazor Web Assembly applications:

• Ahead-of-time (AOT) compilation
• Link trim mode

We recently discovered that AOT-compiled applications raise runtime exceptions. However, if AOT is disabled, the Web Assembly apps work without issues. If you encounter this issue, I recommend disabling AOT by removing the RunAOTCompilation option or setting it to false in your .csproj file:

<PropertyGroup>
  ...<RunAOTCompilation>false</RunAOTCompilation></PropertyGroup>

We are actively working on this complex issue both internally and with the Microsoft Blazor team. The main challenge is that the new AOT compiler lacks an effective way to debug the compiled assembly or map it to its source code.

We will continue to look for a solution, however, this unexpected task may delay our Blazor plans. Please fill out the survey below and tell us how important these recent features are for your Blazor projects.

2. Bootstrap Native Render

Our Blazor components render their HTML using Bootstrap which offers several advantages:

• Out-of-the box integration with Bootstrap themes supplied by Bootsrap contributors and third-party developers
• Application-level adaptivity
• Consistent look-and-feel across browsers and devices

The inherent advantage of using Bootstrap for constructing web user interfaces is that it allows for developing responsive layouts and provides your web application production-quality visual design from the start.

Limitations

However, we've found several component-specific issues: Bootstrap UI/UX is missing several key UI elements and features (e.g. hover state, bottom or side tabs, popup footers), the focus on data editor only highlights the text field instead of the entire component, read-only state is not supported, and Bootstrap themes have large/wide paddings that is great for mobile/touch screen devices but waste space on desktop layouts.

Rest assured, we've implemented custom (non-Bootstrap) code in our themes to overcome these annoyances and support the common features you've come to expect from our components. Therefore, our components may differ from classic Bootstrap – as our themes must support more component features.

We need your feedback to determine whether native Bootstrap rendering is important within your Blazor application.

Survey

Please help us prioritize our 2022 objectives by completing out this survey:

As you may already know, our most recent release (v21.2) includes a series of enhancements for the following DevExpress Blazor layout components: Blazor Menu, Blazor Context Menu, and Blazor Tab control.

Menu Data Binding

Our Blazor Menu control can be bound to both hierarchical or flat data. To incorporate the DevExpress Blazor Menu control in your next Blazor app, assign your data source to the component's Data property, add a DxMenuDataMapping item to the DataMappings collection, and map item properties (text, icon, and so on) to data source fields.

Additional settings are driven by data type.

Binding to Hierarchical Data

To bind the Menu component to hierarchical data and obtain the child item collection from the corresponding data source field, specify the DxMenuDataMapping.Children property.

You can define item hierarchy levels by using different item collections types. To specify different mappings for different hierarchy levels, add multiple DxMenuDataMapping items and specify the Level property for each instance.

<DxMenu Data="@Data"><DataMappings><DxMenuDataMapping Text="CategoryName" Children="Products"/><DxMenuDataMapping Level="1" Text="ProductName"/></DataMappings></DxMenu>

@code {
  public IEnumerable<ProductCategory> Data => new List<ProductCategory>() {
    new ProductCategory() { CategoryName = "Bikes", Products = {
        new Product { ProductName = "Mountain Bikes" },
        new Product { ProductName = "Road Bikes" }
      }
    },
    new ProductCategory() { CategoryName = "Clothing", Products = {
        new Product { ProductName = "Bib-Shorts" },
        new Product { ProductName = "Caps" },
        new Product { ProductName = "Gloves" }
      }
    } ,
  ...
  };
  public class ProductCategory {
    public string CategoryName { get; set; }
    public List<Product> Products { get; } = new List<Product>();
  }
  public class Product {
    public string ProductName { get; set; }
  }
}

Binding to Flat Data

To bind the Menu component to flat data (wherein parent-child relationships are defined by specific item properties), simply set the following property values:

• DxMenuDataMapping.Key - specifies the unique item identifier.
• DxMenuDataMapping.ParentKey - specifies the parent item's identifier. Items with the NULL parent key are considered root items.

<DxMenu Data="@Data"><DataMappings><DxMenuDataMapping Key="ID"
      ParentKey="CategoryID"
      Text="Name" /></DataMappings></DxMenu>

@code {
  public IEnumerable<ProductDataItem> Data => new List<ProductDataItem>() {
    new ProductDataItem() { ID = 0, Name = "Bikes" },
    new ProductDataItem() { ID = 1, Name = "Mountain Bikes", CategoryID = 0 },
    new ProductDataItem() { ID = 2, Name = "Road Bikes", CategoryID = 0 },
    new ProductDataItem() { ID = 3, Name = " Clothing" },
    new ProductDataItem() { ID = 4, Name = "Bib-Shorts", CategoryID = 3 },
    new ProductDataItem() { ID = 5, Name = "Caps", CategoryID = 3 },
    new ProductDataItem() { ID = 6, Name = "Gloves", CategoryID = 3 },
    ...
  };

Our Blazor Menu includes a single class ProductDataItem - whose objects encapsulate category and product data. Note that this class includes an additional property (Category ID - used to map products to a corresponding category):

  public class ProductDataItem {
    public object ID { get; set; }
    public object CategoryID { get; set; }
    public string Name { get; set; }
  }
}

Binding to Observable Collection

The DevExpress Blazor Menu component automatically re-renders items if its data source uses a collection that implements the INotifyCollectionChanged interface. For example, when you add/remove an item, or clear the child item collection, a data change notification is sent to the menu component by the INotifyCollectionChanged interface.

Demo | Documentation

Context Menu Templates

Our Blazor Context Menu allows you to modify the layout and appearance of its items and submenus. You can use the following new properties to specify both common and individual item templates:

• DxContextMenu.ItemTemplate / DxContextMenuItem.Template - Specifies the item's entire template.
• DxContextMenu.ItemTextTemplate / DxContextMenuItem.TextTemplate - Specifies an item's text template.
• DxContextMenu.SubMenuTemplate / DxContextMenuItem.SubMenuTemplate - Specifies an item's submenu template.

The following code demonstrates how to create copy/cut/paste UI menu items using the templates:

<DxContextMenu @ref="@ContextMenu" Data=@commands ItemClick="@OnItemClick"><DataMappings><DxContextMenuDataMapping Text="Name" IconCssClass="IconCssClass" BeginGroup="BeginGroup" /></DataMappings><ItemTemplate><div class="d-flex px-2 py-1"><span class="mr-1 @context.IconCssClass"></span>
      @context.Text<span class="ml-auto">@(((MenuCommand)context.DataItem).Shortcut)</span></div></ItemTemplate></DxContextMenu>

The following code demonstrates how menu item data objects are created:

List<MenuCommand> commands = new List<MenuCommand> {
  new MenuCommand() { Name = "Copy", IconCssClass = "menu-icon-copy menu-icon", Shortcut = "Ctrl+C" },
  new MenuCommand() { Name = "Cut", IconCssClass = "menu-icon-cut menu-icon", Shortcut = "Ctrl+X" },
  new MenuCommand() { Name = "Paste", IconCssClass = "menu-icon-paste menu-icon", Shortcut = "Ctrl+V" },
  new MenuCommand() { Name = "Select All", IconCssClass = "menu-icon-selectall menu-icon", Shortcut = "Ctrl+A", BeginGroup = true }
};

Demo | Documentation

Tabs Scroll modes

In previous versions, tabs were moved to a new line when they extend beyond a container's width. With our most recent release (v21.2), our Tabs component for Blazor allows you to specify whether to display overflowing tabs and how the user can navigate to them via the new DxTabs.ScrollMode property:

• Swipe - The container only displays tabs that fit the container's width. To navigate to other tabs, users can scroll the container via our scrolling mechanisms based on device type: hover the container, hold Shift and scroll the mouse wheel on desktop devices or swipe to the left or right within the container on mobile and tablet devices.
• NavButtons - The container only displays tabs that fit the container's width. Users can click the left or right navigation button to scroll the container and navigate to other tabs. Navigation via the scrolling mechanisms mentioned above is also supported.
• Auto - Scroll mode adapts to device type. Mobile and tablet devices use Swipe mode. Desktop devices use NavButtons mode.
• NoScroll - Users cannot scroll tabs. Tabs are moved to a new line when they extend beyond a container's width.

For example, the code below sets scroll mode to Auto :

<DxTabs ScrollMode='TabsScrollMode.Auto'>...</DxTabs>

In this instance, tab navigation buttons appear on desktop devices when space prohibits the display of all tabs:

Swipe scrolling is also enabled for mobile and tablet devices:

Demo | Documentation

Flyout (v22.1)

We're creating a new Blazor File Manager component to manage a remote file systems using standard file management operations.

Grid

Server Mode Data Binding (v21.2)

In Development

Our Blazor Data Grid’s Preview row will allow you to incorporate additional information for quick preview by your end-users.

Row and Cell HTML Decoration (v21.2)

Available in v21.2.4

Our Blazor Grid’s API will allow you to change the appearance of rows and cells.

Column Resizing (v21.2)

In Development

In Development

In Development

In Development

Not Yet Started

I'm happy to announce the official release of DevExpress Grid for Blazor. Our most recent release (v21.2.6) includes several key Grid enhancements that I'll briefly describe in this post.

Migration Guide and Maintenance Mode

We recommend using the new Grid for Blazor instead of the previous component (Data Grid). Our team has created a detailed migration guide document that will help you: Migrate from Data Grid to Grid.

Our previous grid component is now in maintenance support mode. Therefore, we do not plan to add new features or capabilities to this component. However, our support team will address any issues you may encounter with it.

Server Mode Data Source

Our Blazor Grid now supports Server Mode data binding. Use this mode when working with large data collections in Server-based applications. Server mode allows you to quickly execute data operations against millions of records, typically within a few seconds. The following code demonstrates how to bind DevExpress Grid for Blazor to a large data source in Server mode.

<DxGrid Data="InstantFeedbackSource"><Columns><DxGridDataColumn FieldName="ShipName" /><DxGridDataColumn FieldName="ShipCity" />
    @*...*@</Columns></DxGrid>

@code {
  EntityInstantFeedbackSource InstantFeedbackSource { get; set; }
  NorthwindContext Northwind { get; set; }

  protected override void OnInitialized() {
    Northwind = NorthwindContextFactory.CreateDbContext();
    InstantFeedbackSource = new EntityInstantFeedbackSource(e => {
      e.KeyExpression = "OrderId";
      e.QueryableSource = Northwind.Orders;
    });
  }

  public void Dispose() {
    InstantFeedbackSource?.Dispose();
    Northwind?.Dispose();
  }
}

Demo | Documentation

Support for Observable Data Collections

You can bind the Blazor 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.

<DxGrid Data="@WeatherForecastData"><Columns>
  @*...*@</Columns></DxGrid>

@code {
  ObservableCollection<WeatherForecast> WeatherForecastData { get; set; }
  // ...
}

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.

The following code demonstrates how to create two grids with Masted-Detail relationship. Start by creating a Master Grid :

<DxGrid @ref="Grid" Data="MasterGridData" AutoCollapseDetailRow="true"><Columns><DxGridDataColumn FieldName="ContactName" SortIndex="0" /><DxGridDataColumn FieldName="CompanyName" /><DxGridDataColumn FieldName="Country" /><DxGridDataColumn FieldName="City" /></Columns><DetailRowTemplate><Grid_MasterDetail_NestedGrid_DetailContent Customer="(Customer)context.DataItem" /></DetailRowTemplate></DxGrid>
@code {
  IGrid Grid { get; set; }
  object MasterGridData { get; set; }

  protected override async Task OnInitializedAsync() {
    MasterGridData = await NwindDataService.GetCustomersAsync();
  }
  protected override void OnAfterRender(bool firstRender) {
    if(firstRender) {
        Grid.ExpandDetailRow(0);
    }
  }
}

Note that the Master Grid includes a DetailRowTemplate which contains a custom Blazor Grid_MasterDetail_NestedGrid_DetailContent component. This component encapsulates a Phone data field and additional Detailed Grid :

<div class="mb-2">
    Contact Phone: @Customer.Phone</div><DxGrid Data="DetailGridData"
        PageSize="5"
        AutoExpandAllGroupRows="true"><Columns><DxGridDataColumn FieldName="OrderId" DisplayFormat="d" GroupIndex="0" /><DxGridDataColumn FieldName="ProductName" Width="40%" /><DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" /><DxGridDataColumn FieldName="Quantity" /><DxGridDataColumn FieldName="Discount" DisplayFormat="p0" /><DxGridDataColumn FieldName="ExtendedPrice" DisplayFormat="c" /></Columns><GroupSummary><DxGridSummaryItem SummaryType="GridSummaryItemType.Sum"
                       FieldName="ExtendedPrice"
                       FooterColumnName="ExtendedPrice" /></GroupSummary></DxGrid>

@code {
  [Parameter]
  public Customer Customer { get; set; }
  object DetailGridData { get; set; }
  protected override async Task OnInitializedAsync() {
    var invoices = await NwindDataService.GetInvoicesAsync();
    DetailGridData = invoices
      .Where(i => i.CustomerId == Customer.CustomerId)
      .ToArray();
  }
}

Demo | Documentation

Row Preview

The Grid now allows you to show preview sections for data rows. These sections can display any content, including tables, values from data source fields, custom text, etc. Add the required content to the DetailRowTemplate and set the DetailRowDisplayMode equal to GridDetailRowDisplayMode.Always. This setting allows the Blazor Grid to expand the detailed rows without an end-user accidentally collapsing them.

<DxGrid Data="GridData"
        DetailRowDisplayMode="GridDetailRowDisplayMode.Always"><Columns>
      @* ... *@</Columns><DetailRowTemplate>
    @{
      var employee = (Employee)context.DataItem;<text>@employee.Notes</text>
    }</DetailRowTemplate></DxGrid>

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.

<DxGrid Data="@Data"
        ColumnResizeMode="GridColumnResizeMode.NextColumn"><Columns>
    @_..._@</Columns></DxGrid>

Demo | Documentation

Column Visibility and Column Chooser

We implemented an API to manage column visibility in code. 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. You can invoke the Column Chooser from any area of the Razor page that contains our Grid.

<DxButton Text="Column Chooser"
          RenderStyle="ButtonRenderStyle.Secondary"
          CssClass="column-chooser-button"
          Click="OnClick" /><DxGrid Data="@Data" @ref="Grid"><Columns><DxGridDataColumn FieldName="Country" /><DxGridDataColumn FieldName="Phone" Visible="false" />
    @*...*@</Columns></DxGrid>

@code {
  // ...
  DxGrid Grid { get; set; }
  void OnClick() {
    Grid.ShowColumnChooser(".column-chooser-button");
  }
}

Demo | Documentation

Grid in DevExpress Project Templates

DevExpress project templates for Blazor now include the Grid component. Use these templates to save time by quickly creating a fully-functional Blazor application that contains our Grid component pre-configured and ready-to-use

Earlier this year, we asked if Internet Explorer was still important for your applications. Thank you for answering our survey.

About 95% of you responded that you do not need Internet Explorer support in your application(s) or you plan to stop supporting it in a year.

After analyzing your feedback, we have come to the decision to end support for Internet Explorer with the next major update (v22.1) of the following products:

• ASP.NET Web Forms
• ASP.NET MVC Extensions
• ASP.NET Web Forms controls for Bootstrap

We understand (and appreciate) that some of our customers may still need to support Internet Explorer, so we recommend that you use v21.2 as long as necessary. However, we strongly recommend you consider Microsoft's advice: Move users to Microsoft Edge from Internet Explorer.

As you may already know, the Microsoft .NET team has announced the end of life support for the .NET 5 framework:

.NET 5.0 will reach end of support on May 10, 2022. After the .NET May updates, Microsoft will no longer provide servicing updates, including security fixes or technical support, for .NET 5.0. You'll need to update the version of .NET you're using to a supported version (.NET 6.0) before this date in order to continue to receive updates. -Rahul Bhandari (MSFT)

Accordingly, DevExpress Blazor UI Components v22.1+ will no longer support .NET 5. If you are targeting Blazor and wish to use our newest Blazor components, we ask that you upgrade your projects to .NET 6 (DevExpress has supported .NET 6 since v21.2). If you cannot upgrade to .NET 6, you can continue to use v21.2 in your .NET 5 Blazor projects.

By moving to .NET 6, we've leveraged important framework features, including:

• custom elements - used throughout our Blazor component lineup (Data Grid, Popup, DropDown, and Flyout)
• custom event arguments - used to create C# event handlers for JavaScript events without JSInterop

Update your application

To upgrade your application to .NET 6, I recommend the steps outlined in these Microsoft resources:

• Upgrading to .NET 6.0 - Microsoft Blog
• Migrate from ASP.NET Core 5.0 to 6.0
• Update a codebase with nullable reference types to improve null diagnostic warnings

.NET 7

As you may know, Microsoft will likely release .NET 7 later this year.

While .NET 7 is currently in preview mode, we are actively testing our components with the upcoming framework and are engaged with the Microsoft Blazor team. Of course, once .NET 7 is officially released, we will publish an official support announcement and a compatible release build.

If you're testing .NET 7 previews for 'AoT Compilation' or 'Link Trim Mode' features, please refer to this blog post for information on limitations.

Survey

Please help us prioritize our 2022 objectives by completing this survey:

Your Feedback Matters

As always, we welcome your feedback. Let us know what you think in the field below or submit a support ticket via the DevExpress Support Center if you need to discuss a specific business need.

In our v22.1 release, we improved theme delivery with the new DevExpress.Blazor.Themes NuGet package. This package contains DevExpress Blazor themes and CSS styles used to apply Bootstrap themes to DevExpress controls.

By using a NuGet package:

• you to avoid manually downloading CSS stylesheets from GitHub
• you get simplified version control
• minimize upgrade issues because the DevExpress themes package automatically updates with other DevExpress Blazor packages

The move to use of a NuGet package requires that we change the location of DevExpress CSS stylesheets.

Impact on Existing Apps

All Blazor applications that use DevExpress v22.1 controls will have to be updated to reference CSS stylesheets from the DevExpress.Blazor.Themes NuGet package. This change does not affect the appearance of DevExpress controls or theme customizations, only the stylesheet reference syntax.

Please note that you cannot use the Project Converter tool to update your Blazor apps for this upcoming change.

How to Update Existing Apps

Follow the steps below to update your application.

1. Remove the link to the dx-blazor.css and dx-blazor.bs5.css stylesheets in the _Layout.cshtml file for Blazor Server apps or the index.html file in Blazor WebAssembly apps.

// For Bootstrap 5
@*<link href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />*@
// For Bootstrap 4
@*<link href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />*@

2. Update the theme link in the same file.

   • If using a DevExpress theme, replace the old link to the stylesheet with the following:

     // For Bootstrap 5
     @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@<link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs5.min.css" rel="stylesheet" />
     // For Bootstrap 4
     @*<link rel="stylesheet" href="css/bootstrap/<theme-name>.min.css" />*@<link href="_content/DevExpress.Blazor.Themes/<theme-name>.bs4.min.css" rel="stylesheet" />

     Note that words within a theme name are separated by a hyphen: office-white, blazing-berry, blazing-dark.

   • If using a Boostrap-based theme, add a link to the bootstrap-external stylesheet below your theme:

     <link rel="stylesheet" href="css/pulse/bootstrap.min.css" />
     // For Bootstrap 5<link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" rel="stylesheet" />
     // For Bootstrap 4<link href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs4.min.css" rel="stylesheet" />

3. If you use Bootstrap 5, specify your Bootstrap version explicitly in Program.cs.

builder.Services.AddDevExpressBlazor(configure => configure.BootstrapVersion = DevExpress.Blazor.BootstrapVersion.v5);

If you want to customize a DevExpress theme, refer to the following topic for more information: Themes.

Warning Message

If you don't upgrade your Blazor app theme to our new v22.1 NuGet package, your app will display the following warning message on the page:

Rest assured that once you update your app, this will no longer appear.

Future: No Bootstrap Native Render in v22.2

With our next major release, some of our components (Grid, Data Editors) will render their HTML using our own rendering engine instead of Bootstrap. The new rendering engine will help us deliver:

• Improved performance with fewer JavaScript interop calls.
• Consistent appearance across DevExpress Blazor controls.
• Three different size modes with improved control spacing. New size modes will apply to all controls that use the new rendering engine and allow you to create "dense" interfaces with more relevant information on the screen.

If you develop apps that make use of the four DevExpress themes, you will only see changes in font size and margins/paddings for specific elements. However, if you are working with a Bootstrap-based theme, you should plan an upgrade path in advance. Once the new rendering engine ships, DevExpress controls that support it (Grid, Data Editors) will only take CSS variable values (colors, fonts) from your Bootstrap theme. Other theme settings (paddings & margins, colors defined in widgets, shadows, border thickness, rounded corners, pseudo-classes) will be ignored.

More Info to Come

As we get closer to v22.2, we will post more information and upgrade instructions for your apps. In the meantime, please submit any support questions via the DevExpress Support Center if you need to discuss a specific business need.

Your Feedback Matters

As always, we welcome your feedback.

Our most recent release (v22.1) ships with a new Blazor Flyout control - a popup window with an arrow displayed next to its element. The DevExpress Blazor Flyout controls's base functionality mimics those found in our Blazor Popup and DropDown UI controls. While similar in some respects, the Flyout is more suitable for the following use cases:

• Display additional information, such as hints or educational tips next to an element
• Display a context popup window with actions next to an element
• Display tooltips

Display Hints & Educational Tips with Flyout

You can use the Flyout to display hints in your Blazor-powered web application. For instance, you can highlight new functionality available in your Blazor app.

To add the Flyout to your application, you must add the necessary control markup, specify target position, and write code to manage component visibility.

<DxMenu><Items><DxMenuItem Text="SUPPORT" /><DxMenuItem Text="BLOGS" id="blog-item" /><DxMenuItem Text="ABOUT US" /><DxMenuItem Text="PRODUCTS" /><DxMenuItem Text="DEMOS" /><DxMenuItem Text="BUY" /></Items></DxMenu><DxFlyout
    IsOpen="true"
    PositionTarget="#blog-item"
    BodyText="Now you can subscribe to our blogs to get notifications about new posts and updates."
    Width="300px"></DxFlyout>

Our Blazor Flyout will appear at the most suitable position around the target element and will recalculate its position when the page is scrolled or resized. If needs dictate, you can specify an exact position, a list of allowed positions, or restrict control position with custom boundaries.

Contextual Popups with Complex Content

Another Flyout use case is to display the control as a context popup window with actions next to an element. For instance, you can display detailed information about an individual.

The Flyout window includes a header and a footer and you can populate these elements with text or implement custom templated content. Each element (header, body, and footer) is fully customizable with CSS rules.

<DxFlyout @bind-IsOpen=IsOpen
          PositionTarget=@($"#employee-{CurrentEmployee?.EmployeeId}")
          FooterVisible="true"
          FooterCssClass="custom-flyout-footer"
          Position=@(FlyoutPosition.BottomStart | FlyoutPosition.TopStart)><BodyTemplate><div class="custom-flyout-body"><EmployeeCard EmployeeInfo=@CurrentEmployee CustomDetails=true/></div></BodyTemplate><FooterTextTemplate><div class="w-100"><div class="custom-flyout-footer"><DxTextBox NullText="Send a message" CssClass="flex-grow-1"/><DxButton CssClass="popup-button" Text="Send" Click=@(()=> IsOpen = false)/></div></div></FooterTextTemplate></DxFlyout>

@code {
 bool IsOpen { get; set; } = false;.
}

Note: We use the DevExpress Blazor Flyout control for similar tasks within our Scheduler component (to help deliver consistent and predictable behaviors, position recalculation, etc within the Scheduler).

Display Tooltips with Flyout

To incorporate tooltip functionality in your application, use the control's mouseover and mouseout event handlers.

<div class="d-flex align-items-center" style="padding-bottom: 2px"><span class="opacity-75 pe-1">Password</span><span id="position-target" @onmouseover=@(()=> IsOpen = true) @onmouseout=@(()=> IsOpen = false) class="p-warning" ></span></div><DxTextBox Password=true/><DxFlyout @bind-IsOpen=IsOpen
    Position="FlyoutPosition.Right"
    PositionTarget="#position-target"
    Width="200px"
    BodyText="@Text"/>

@code {
    string Text { get; set; } = "Password must contain at least 10 characters and include uppercase and lowercase letters, numbers, and special characters.";
    bool IsOpen { get; set; } = false;
}

To learn more about our Blazor Flyout control, please explore our online demos or review the following help topic.

Your Feedback Matters

We'd love to know what you think of our new Flyout control.

As you may already know, v22.1 ships with a new Blazor Accordion component. Our Accordion control allows you to organize content within collapsible groups. These collapsible groups can be used to reveal/hide content via a mouse click.

Each Accordion group can include a title, icon, and expand\collapse button. The Accordion can expand one or more groups (at your discretion), position expand\collapse buttons for its groups and subgroups, and use templates to render custom content for both root and nested items.

Manage Navigation within your Blazor App

You can use our Blazor Accordion component to manage navigation paths within your Blazor-powered web app. The Accordion will allow you to introduce a flat or hierarchical navigation structure. To implement this in your app, assign a data source to the Data property, add a DxAccordionDataMapping instance to the DataMappings object (within the component's markup), and map item properties. Activate the ShowFilterPanel option to allow users to filter items:

<DxAccordion Data=@DemoItems
    ShowFilterPanel="true"
    @ref="Accordion"><DataMappings><DxAccordionDataMapping CssClass="CssClass" Text="ItemName" Key="Id"
          ParentKey="ParentId" NavigateUrl="Url"></DxAccordionDataMapping></DataMappings></DxAccordion>

@code {
      public IEnumerable<DemoItem> DemoItems;
      @* ... *@
}

Create Custom Collapsible Content

You can organize custom content as a set of collapsible groups. Create a single group at the root level to hide specific content within the page or incorporate a set of multiple stacked cards (for instance, you can use stacked cards to create FAQ or registration form sections). The component also allows you to apply templates for content customization.

<DxAccordion ExpandMode="AccordionExpandMode.SingleOrNone"><Items><DxAccordionItem Text="What is Blazor?"><ContentTemplate><div class="p-2"><ul><li>Blazor runs C# code directly in the browser.</li><li>Blazor gives you access to .NET on the client side so you can
              re-use libraries and code from the server side.</li><li>Blazor works in all modern browsers and is built on open Web
              standards.</li></ul></div></ContentTemplate></DxAccordionItem>
      @* ... *@</Items></DxAccordion>

Your Feedback Counts

Please take a moment to respond to the following survey question. Your answers will help us understand your needs and refine future Accordion-related development plans.