The second beta of the DevExpress UI for Blazor is now available and it includes new Chart and Data Visualization components, DataGrid enhancements, and support for Blazor Preview 8.

Blazor Preview 8 Support

As you may know, Microsoft recently announced the release of .NET Core 3.0 Preview 8. This release includes numerous updates to ASP.NET Core and Blazor. Components in this, our second beta fully support Preview 8.

Blazor Charts and Data Visualization Controls

Our second beta ships with an entirely new control set - DevExpress Charts for Blazor.

DevExpress Charts for Blazor allows you to create different chart types for your next Blazor project. Major features include:

Multiple Chart Series

The following Chart series are available:

• Area: Stacked Area, Full Stacked Area, Spline Area, Stacked Spline Area, Full Stacked Spline Area, and Step Area.
• Bar: Stacked Bar and Full Stacked Bar.
• Line: Step Line, Stacked Line, and Full Stacked Line.
• Bubble

We will introduce Financial and Range chart series support in an upcoming release.

Please explore our online demo to learn more about available chart types.

Table Data Binding

You can bind our Blazor Charts component to a data source that contains table-based data. The following chart series settings are available through the DxChartCommonSeries object:

• NameField– Specifies the data field that provides series names.
• AggregationMethod– A data aggregation method. You can use any predefined or custom function with Func<IEnumerable<TValue>, <TValue> signature. In our demo, we use a static Enumerable.Sum method available in .Net and Blazor.
• ArgumentField– Specifies the data field that provides series arguments.
• Value`Field – Specifies the data field that provides series values.

The SeriesTemplate can contain DxChartBarSeries, DxChartLineSeries, and other series objects to customize specific series types.

Please test drive our online demo to learn more.

Use our Blazor Pivot Grid as Data Source

Our Blazor Charts component can load and visualize data directly from our Blazor Pivot Grid component. The chart will also update itself instantly to reflect changes made to the pivot table.

You can synchronize DevExpress Blazor Charts with our Pivot Grid using DxPivotGridDataProvider<T>. The code below demonstrates use of the Create method (creates a data provider and asynchronously provides the IEnumerable<T> collection to this provider):

DxPivotGridDataProvider PivotGridDataProvider = DxPivotGridDataProvider.Create(Sales.Load());

The DxPivotGridDataProvider includes two data sources (PivotGridDataSource and ChartDataSource) for the Blazor Pivot Grid and Charts components. Use the NameField, ArgumentField, and ValueField properties to specify the fields of a data source object used for a chart’s series names, arguments, and values.

To group data by panes and create a separate pane for each group, set the PaneField property. When used, charts automatically display the most detail data level. When a user expands a row in the pivot grid, the chart displays expanded field values

Series Customization

You can display multiple axes and combine different chart types (e.g., bars and lines) in the same chart.

Use the DxChartTooltip object to specify a custom template for the tooltip displayed when users hover over a chart series.

The DxChartSeriesLegendItem component in a chart series markup allows you to customize legend item appearance, change legend position, and its visibility.

Additionally, DxChart provides built-in functionality to display and hide series when an end-user clicks a corresponding legend item:

Mobile Friendly

The DevExpress Blazor Charts component is ready for use on tablets and mobile devices alike:

Data Grid - Your Feedback Matters

Thanks to your great feedback, we’ve added the following new features to our Data Grid:

1. New Sorting API

The DevExpress Blazor Data Grid provides a new API to control data sorting. Use the DxDataGrid.AllowSort property to control sort order availability for the grid control.

Additionally, each data column provides settings to manage sort order.

• The AllowSort property allows sorting for a specific column.
• The SortOrder property specifies sort direction.
• The SortIndex setting sets column sort priority.

2. Multiple Column Sort

End users can also sort our Blazor Data Grid using multiple columns. Hold down the SHIFT key and click an unsorted column header and this field will be added to the list of sorted fields.

3. Cell Text Alignment

Our customers asked us to incorporate a cell text alignment option. The DevExpress DataGrid for Blazor now includes this option. By default, the grid aligns DxDataGridSpinEditColumn text to the right. Other cells can be aligned to the left. If you want to change this behavior, set the DxDataGrid.TextAlignment property to one of the following: Left, Center, Right, or Justify.

4. Command Buttons Enhancements

A command column (DxDataGridCommandColumn) provides three new Boolean properties to manage command buttons: NewButtonVisible, EditButtonVisible, and DeleteButtonVisible.

5. Command Buttons Customization

A new StartRowEdit method allows you to add edit functionality to a custom button located within or outside the data grid.

public void StartRowEdit(object dataItem);

The method accepts a dataItem object to identify the processed row. If the inner key value parameter is null, the grid creates a new row and switches the grid to edit mode.

We've created an example to show you how to use the StartRowEdit method and implement custom command buttons inside a DevExpress Blazor Data Grid component.

Getting Started and Ongoing Feedback

To get started with DevExpress UI for Blazor, simply create a new Blazor project and incorporate our controls as needed.

As always, your feedback matters. Please share your thoughts with us - we want to do everything possible to earn your business now and into the future.

In this post, we'll detail some of the features we expect to ship in our next major release (v19.2) and invite active Universal and DXperience Subscribers to test new functionality before we complete our current dev cycle.

As always, we thank you for choosing our ASP.NET components and for placing your faith in DevExpress.

• 1. Web Diagram (available in 19.2 Early Access Preview)
• 2. Web Gantt
• 3. ASP.NET WebForms and MVC Extensions
  • 3.1 Pivot Grid
  • 3.2 Charts
• 4. DevExtreme-Based ASP.NET Controls
  • 4.1 Form Scaffolding Wizard
  • 4.2 'Add DevExtreme to the Project' Command Compatible with ASP.NET Core 3.0
  • 4.3 Async Support in DevExtreme.AspNet.Data
  • 4.4 ASP.NET Core File Manager
    • 4.4.1 Data Binding
    • 4.4.2 Progress and Status UI
• 5. Reporting
  • 5.1 In-Place Rich Text Editing
  • 5.2 Bind a Report to ObjectDataSource Using the Data Source Wizard
  • 5.3 Properties Panel Update
• 6. Office File API
  • 6.1 Word Processing – Hyphenation
  • 6.2 Excel Binary Workbook (XLSB) Support
  • 6.3 PDF Document API – Custom Properties
• Get Started Today

1. Web Diagram (available in 19.2 Early Access Preview)

Availability

In this Early Access Preview, the DevExpress Web Diagram component will only be available as a DevExtreme widget. We will ship ASP.NET Core, ASP.NET WebForms and ASP.NET MVC versions of our web Diagram component once v19.2 is released officially.

Shape Containers

New shape types - horizontal and vertical containers - allow you to combine other shapes within a "container". Our Web Diagram component supports stacked containers and ships with expand and collapse functionality.

Images in Shapes

You can now associate a predefined (or custom) image with new image shapes via a database or the widget’s UI. The image will maintain the shape's size and its position when the shape is moved or resized.

New Data Binding Capabilities

We implemented advanced data binding for shape settings. You can bind all shape properties including shape and connectors style, shape image URL, position, and size to a database. We expect to support data binding for all new shape settings.

Full Screen Mode

Our Diagram now supports fullscreen mode. You can add a corresponding toolbar command or use the fullscreen property to enable Fullscreen mode within your web app.

Read Only Mode

Read only mode protects the Diagram from edit operations. Use the readOnly property to enable this diagram option.

Simple View

When you activate our new Simple View mode, the Web Diagram removes gray document borders and the diagram’s content fully occupies available screen real-estate.

Zooming Document Content

DevExpress Web Diagram can now apply zoom levels to its content. To change zoom level, use the 'Zoom Level' editor on the Properties panel or CTRL+Mouse Scroll combination. Select the 'Auto Zoom' check box to auto zoom the diagram to fit the page.

UI Customization

Web Diagram provides new APIs to control the visibility and the content of the following UI elements:

• Context menu (the contextMenu option),
• Properties panel (the propertiesPanel option),
• Toolbar (the toolbar option), and
• Toolbox (the toolbox option).

To learn more and explore the features described herein, please see our online Web Diagram demo.

2. Web Gantt

Availability

We expect to ship a Gantt component for ASP.NET Core, ASP.NET WebForms and ASP.NET MVC in an upcoming build. Please stay tuned to this website for more information on our ASP.NET Gantt control.

Node Editing

The following edit actions will be available:

• Resize and modify tasks
• Change dependencies between tasks
• Edit cell values within the Tree List region. The component immediately saves changes on the server and updates the Gantt chart when cell values change.

Change History

Our Gantt stores changes made by an end-user. Changes may be rolled back when necessary.

Task Selection API

DevExpress Gantt ships with a comprehensive API and a customizable UI to control the task selection process.

Region Resizing

End users can resize both Gantt and Tree List regions as needed (via the control’s built-in separator bar).

Real-time Scaling

DevExpress Gantt allows you to browse data across various levels of detail. Hold the CTRL key and rotate your mouse’s scroll wheel to zoom (in or out).

3. ASP.NET WebForms and MVC Extensions

3.1 Pivot Grid

Aggregation at Any Level

This release includes an optimized WinForms Pivot Grid calculation engine. This new engine provides a more versatile summary expression function. The scope of the function is unbound fields. The Aggr function aggregates data with a specific summary function against a specific set of dimensions. Aggr functions can be nested as needed (you can easily create the desired aggregation level within the control).

The Aggr function has the following syntax:

Aggr(summaryExpression, dimension1, dimension2, ...)

The first argument is a summary expression calculated against a data source field. It is followed by a set of dimensions whose values are grouped to calculate summaries for the first argument.

Aggregation at Any Level thread on Support Center

3.2 Charts

3.2.1 TimeSpan Axis Scale Support

v19.2 will ship with full support for TimeSpan scales. You can plot your TimeSpan data as-is or specify a custom aggregation mode. TimeSpan data can be mapped to an X-Axis, Y-Axis or both.

3.2.2 Waterfall Series

Waterfall charts display the manner in which initial values are affected by a series of intermediate positive or negative values. You can plot Waterfall charts based on relative or absolute data values. We have also implemented two summary types: Total bar summarizes all values and is always positioned on the right side of the chart's diagram; Subtotals can be defined between two adjacent points (bars) to display intermediate values.

3.2.3 Box Plot Series

The Box Plot chart is a simple way to analyze statistic-driven data points. To draw a Box Plot point, you must specify Min, Quartile1, Median, Quartile3 and Max parameters. You can optionally display a set of Outliers and a Mean value.

Note: This early access release only includes our WinForms implementation. This features will be added to both our ChartControl for WPF and WebChartControl for ASP.NET prior to official release.

4. DevExtreme-Based ASP.NET Controls

4.1. Form Scaffolding Wizard

We added Form to the list of controls supported by our Visual Studio scaffolding wizard. You can now quickly generate forms based on model classes.

We also added support for two useful data annotations: [Display(Prompt)] and [Display(Description)]. Values are automatically picked up at runtime to populate Placeholder for editors and HelpText for form items.

4.2. 'Add DevExtreme to the Project' Command Compatible with ASP.NET Core 3.0

Recently, we announced ASP.NET Core 3 compatibility of our DevExtreme-based ASP.NET Core controls. We have also checked and updated our Visual Studio 'Add DevExtreme to the Project' command to make certain that it works as expected with Endpoint routing and the new JSON serialization introduced in ASP.NET Core 3. Though, we have yet to provide project templates for ASP.NET Core 3, you can use this tool to integrate DevExtreme-based controls into an existing ASP.NET Core 3 project (using Visual Studio 2019 Preview).

4.3. Async Support in DevExtreme.AspNet.Data

This release includes async support (preview) within the DevExtreme.AspNet.Data library (used for data binding).

Once officially released, we will update our API Controller Scaffolding to generate asynchronous code. In the interim, you can update your NuGet package to 2.5.0-rc1 and try the new DataSourceLoader.LoadAsync method to take advantage of this feature (async capabilities provided by Entity Framework Core, Entity Framework 6, NHibernate, and XPO).

Refer to GitHub release notes for details and code samples.

4.4. ASP.NET Core File Manager

DevExpress File Manager for ASP.NET Core and ASP.NET MVC is not included in this Early Access Preview but will be added to an upcoming build. Key features will include:

4.4.1. Data Binding

ASP.NET Core File Manager will retrieve data from a database and generate a UI automatically.

4.4.2. Progress and Status UI

The DevExtreme-based ASP.NET File Manager provides new UI elements to track file operation progress in real time:

• A notification popup appears when a file operation starts, finishes or fails.
• The progress side panel displays operation status.
• The ‘Refresh’ toolbar item includes text and an icon to reflect the status of your current operation.

5. Reporting

5.1 In-Place Rich Text Editing

Our XRRichText control allows end-users to edit its content. Double click the control to activate the editor:

Tell Us What You Think

Please explore the following online demo to learn more about this feature: Web Report Designer - In-Place Rich Text Editing. The _Data -> Load File _properties panel editor allows you to load your file (HTML, DOCX and RTF) and check how its rendered within the editor (or within the print preview).

We are eagerly waiting for your feedback, so cast your vote to the survey below:

5.2 Bind a Report to ObjectDataSource Using the Data Source Wizard

You can use this data source type in the Data Source Wizard to bind a report to a collection of business objects.

The data source wizard allows you to specify the parameter expression (using the Expression Editor) and pass an existing report parameter to the constructor or a method that returns a collection of business objects:

Tell Us What You Think

Please explore the following online demo to learn more about this feature: Web Report Designer - Object Data Source Wizard.

If you’d like to check how the wizard works with your own data access layer, you should:

• Backup your application and then upgrade it to v19.2;
• Implement the DevExpress.DataAccess.Web.IObjectDataSourceWizardTypeProvider interface:

public class ObjectDataSourceWizardTypeProvider : IObjectDataSourceWizardTypeProvider {
        public IEnumerable<Type> GetAvailableTypes(string context) {
                return new [] { typeof(MyBusinessObjectType) };
        }
    }

• Register your implementation at the application startup:

DefaultReportDesignerContainer.RegisterObjectDataSourceWizardTypeProvider<ObjectDataSourceWizardTypeProvider>();

5.3 Properties Panel Update

In previous versions, two editors were used for a single property: the first was created to specify a static value and the second to provide an expression. We updated the properties panel to make it more compact and eliminate the confusion related to the use of two editors for a single property:

This enhancement helps bring the Web Report Designer closer to its WinForms counterpart. Previously a square icon could be used to reset a property to its default value. With this update, the icon near each property also indicates whether a property value differs from its default value, and allows you to define an expression as needed. Property editor values that were specified via an expression now display a formula icon to the right of the editor.

6. Office File API

6.1 Word Processing – Hyphenation

Our Word Processing Document API now supports soft hyphens and automatic hyphenation. You can load, print and export documents with soft hyphens.

Link a dictionary that specifies hyphenation rules to enable automatic hyphenation. Please refer to thehyphenation-simple-example repository for a sample project.

Once you provide hyphenation dictionaries, you can enable or suppress automatic hyphenation in code.

6.2 Excel Binary Workbook (XLSB) Support

The Spreadsheet Document API now supports the XLSB (BIFF12) format. Give it a try and load and save your documents using this format.

Note: the Early Access Preview build has the following limitations:

• Encryption is not supported for XLSB documents;
• Slicers will be stripped from your binary files.

6.3 PDF Document API – Custom Properties

The PDF Document API allows you to manage a document’s custom property collection. Use PdfDocument.CustomProperties to access the collection. You can add and delete custom properties or change associated names or values.

Please check the pdf-document-api-custom-properties repository for a sample project.

// Add new property
document.CustomProperties.Add("NumberOfCopies", "3");

// Modify the CompanyEmail property value:
if (document.CustomProperties.ContainsKey("CompanyEmail"))
    document.CustomProperties["CompanyEmail"] = "clientservices@devexpress.com";

// Remove the HasImages property:
document.CustomProperties.Remove("HasImages");

Get Started Today

If you own an active Universal or DXperience subscription, you can download our Early Access Preview build via the DevExpress Download Manager.

As always, your feedback will help us deliver the best possible build. Should you have questions about these new features, or should you experience technical issues during the Early Access Preview, please contact us via the DevExpress Support Center or the comment section below.

If you are using a trial version and would like to access these new features today, purchase a Universal or DXperience subscription license and you will automatically receive access to the Early Access Preview version. If you are ready to upgrade to Universal or DXperience from another subscription level, email us at clientservices@devexpress.com for preferential upgrade pricing.

As you may know, Blazor does not currently support navigation via anchors. In addition, Blazor does not support hyperlinks that only include anchor IDs within the href attribute (<a href=”#MyAnchor1”>some text</a>). To help address these limitations, we created a free navigation tool for both client-side and server-side Blazor projects.

Currently, the Blazor framework does not support in-page navigation using anchors or skip links. To solve this limitation, we have created a free tool to help you with in-page navigation in your Blazor websites. The tool, similar to our MetaData tool, is free and works both in Blazor client-side and server-side projects.

Features and Capabilities

The DevExpress Anchor Navigation tool automatically scrolls a page to an anchor in the following instances:

• When an end-user clicks a hyperlink with an anchor;
• When a page is first opened and contains an anchor ID within its URL (for instance, https://demos.devexpress.com/blazor/SchedulerViewTypes#DayView).

Our tool also includes a Blazor AnchorLink component. Use this component to create in-page navigation links as needed:

<AnchorLink class="nav-link py-3 px-4" href="#MySection1">My Section 1</AnchorLink><AnchorLink class="nav-link py-3 px-4" href="#MySection2">My Section 2</AnchorLink>

When an end-user clicks the link, the page scrolls to the corresponding anchor:

<h2 id="MySection1">Section 1</h2><p>Lorem ipsum dolor sit amet...</p><h2 id="MySection2">Section 2</h2><p>Quisque imperdiet risus quis nisl vulputate...</p>

Integrating the Anchor Navigation Tool

Full source code for our Blazor Anchor Navigation tool is available on GitHub. Please follow the instructions below to include it within your next Blazor project.

1. Download the DevExpress.Blazor.AnchorUtils project and add it to your Blazor solution.
2. Add the DevExpress.Blazor.AnchorUtils namespace to _Imports.razor:

@using DevExpress.Blazor.AnchorUtils

3. Add AnchorUtilsComponent to Shared/MainLayout.razor file:

<div>
    ...<div class="content px-4">
          @Body</div></div><AnchorUtilsComponent />

4. Find the JavaScript wwwroot/anchor-utils.js file in the anchor navigation source code. Copy this file to the wwwroot folder or to its subfolders.

• For server-side Blazor: register this file in Pages/_Host.cshtml of your project.
• For client-side Blazor: register this file in wwwroot/index.html of your project.

<script type="text/javascript" src="~/anchor-utils.js"></script>

5. (optional) If your page layout contains a pinned (non-scrollable) header (like the standard Blazor project), edit the anchor-utils.js file and update the following code to obtain vertical scroll offset appropriate for your application:

y -= document.querySelector(".main .top-row").offsetHeight;

How it works

First, we need to obtain an anchor from the current URI (if it exists). We’ll use the IUriHelperOnLocationChanged event event to do so:

@inject IUriHelper UriHelper
...
@code {
    string Anchor { get; set; }
    bool ForceScroll { get; set; } 
    protected override void OnInitialized()
    {
        base.OnInitialized();
        ForceScroll = true;
        UriHelper.OnLocationChanged += OnLocationChanged;
    } 
    void OnLocationChanged(object sender, LocationChangedEventArgs args)
    {
        var anchor = UriHelper.ToAbsoluteUri(args.Location).Fragment;
        ...
    } 
}

The ScrollToAnchor C# method invokes the scrollToAnchor JavaScript function and sends an anchor ID as a parameter:

...
@inject IJSRuntime JSRuntime
@inject IComponentContext ComponentContext
...
    bool ScrollToAnchor(string anchor)
    {
        if (ComponentContext.IsConnected && (!string.IsNullOrEmpty(anchor) || ForceScroll))
        {
            JSRuntime.InvokeAsync<string>("scrollToAnchor", anchor);
            return true;
        }
        return false;
    }

We’ll call the ScrollToAnchor method in the OnLocationChanged event handler to scroll the page when navigation location changes. We’ll also call the method in the OnAfterRenderAsync event handler to initiate scrolling (if necessary) when a page first loads:

protected override Task OnAfterRenderAsync()
    {
        ScrollToAnchor(Anchor);
        if (ForceScroll)
        {
            ForceScroll = false;
        }
        return base.OnAfterRenderAsync();
    } 
    void OnLocationChanged(object sender, LocationChangedEventArgs args)
    {
        var anchor = UriHelper.ToAbsoluteUri(args.Location).Fragment;
        if (!ScrollToAnchor(anchor))
        {
            Anchor = anchor;
        }
    }

The scrollToAnchor JavaScript function scrolls to the required anchor element.

Javascript:

function scrollToAnchor(anchor) {
    var selector = anchor || document.location.hash;
    if (selector && selector.length > 1)
    {
        var element = document.querySelector(selector);
        if (element)
        {
            var y = element.getBoundingClientRect().top + window.pageYOffset;
            /* The following code updates the vertical scroll bar's offset for a standard Blazor Visual Studio template.
               Update the code to get an offset that is suitable for your application.  */
            y -= document.querySelector(".main .top-row").offsetHeight
            window.scroll(0, y);
        }
    }
    else
    {
        window.scroll(0, 0);
    }
}

Feedback

As always, your feedback matters. Do you plan on using anchors in your Blazor applications? Post your comments below and share your Blazor-related development experiences with us.

The third Beta of the DevExpress UI for Blazor is now available. This update includes a series of enhancements for both our Blazor Data Grid and Scheduler component (see below). It also includes support for Blazor Preview 9 and updates to our online documentation.

Blazor Preview 9 Support

Last week, Microsoft announced the release of .NET Core 3.0 Preview 9. Our Blazor components fully support Preview 9 with our Beta 3 release.

Data Grid

We've added four major features to our Blazor Data Grid:

Column Reorder

You can now drag a column header and reposition it to change column order. Two arrows indicate valid drop positions.

Column Groups

Enable the Group Panel within the Blazor Data Grid to allow end-users to group data by individual columns.

<DxDataGrid … ShowGroupPanel="true">

Column order in the group panel matters when you group data by several columns. The grid groups data by each column one by one (starting from the left).

To exclude a column from grouping, set its AllowGroup property to false.

<DxDataGridColumn AllowGroup="false"></DxDataGridColumn>

To group data in code, specify the column's GroupIndex property to define its grouping priority. The lower the value, the higher a column's priority in grouping. In the following example, our Blazor Data Grid first groups data by a column with GroupIndex = 0 and then - by a column with GroupIndex = 1.

<DxDataGridComboBoxColumn GroupIndex="0"></DxDataGridComboBoxColumn><DxDataGridColumn GroupIndex="1"></DxDataGridColumn>

To see this feature in action, please refer to our Data Grid online demo.

Master-Detail Layout

Our Blazor Data Grid allows you to build master-detail layouts ( DetailRowTemplate ) of any complexity and depth. Our template implementation is not limited and allows you to address a broad range of usage scenarios..

To see our master-detail implementation in action, please review our online Master-Detail View demo. The template used within this demo contains a detailed Data Grid inside a plain HTML.

Multiple Row Selection

To select multiple rows in the DevExpress Blazor Data Grid, click a row, a command checkbox (if shown), or use our Data Grid API. The SelectionMode property allows you to specify selection mode:

• Single Selection (default behavior) - Only one data row can be selected at any one time. See our Single Data Row Selection online demo.

• Multiple Selection - Multiple data rows can be selected at any one time. See our Multiple Data Rows Selection online demo.

• Optimized Multiple Selection - In this mode, the component does not store row data objects and information about all selected rows - The grid maintains row key values instead (make sure the KeyFieldName property is initialized). If you select all rows via the Grid’s UI or its API and then unselect multiple rows, the component only stores unselected row keys (and vice versa). This reduces the amount of stored data. We recommend you use this mode if your Blazor Grid contains a significant number of rows. See our online demo for more information.

• None - Row selection is disabled.

Scheduler

Appointment Editing

DevExpress Scheduler for Blazor now includes a popup edit form to edit appointment data. The default edit form only displays primary data input fields (it hides others). Click the "Expand Form" button in the top-right corner to display all available fields.

To create a new appointment quickly, select a time range in the Scheduler. The Scheduler component displays an appointment within the view and automatically invokes the edit form:

Drag-And-Drop and Resize Appointments

Though you can change appointment time range within the Edit Form, our Blazor Scheduler component allows you to reschedule the appointment via drag & Drop (drag the appointment to a new time cell within the current view or resize the appointment to change the current time range):

Tooltip

Click or tap on an appointment to view its full description. In addition, the Scheduler displays a tooltip with detailed appointment information:

Documentation

I am happy to announce that our online Blazor documentation is now available.

Feedback

Your feedback matters and I would love to hear how you plan to use these new features in your next Blazor application.

We've discovered that PDF printing is broken in the recent Chrome 77.0.3865.75 update. This version of the Chrome browser does not display or print PDF documents which are displayed in an IFrame.

Affected components

ASP.NET WebForms:

• ASPxDocumentViewer
• ASPxRichEdit
• ASPxSpreadsheet
• BootstrapRichEdit
• BootstrapSpreadsheet

ASP.NET MVC Extensions:

• DocumentViewer
• RichEdit
• Spreadsheet

ASP.NET Core

• Spreadsheet

We are working on this issue, and we expect to address it soon. Please add the following tickets to your Support Center favorites to be notified of a hotfix when available:

• ASPxDocumentViewer - Print Report button not working after Google Chrome Update 76.0.3809.132
• ASP.NET Office Controls - Printing does not work in Chrome 77.0.3865.75

Solutions

If you cannot wait for a hotfix, please use the following code to resolve this issue (this code will also work for old versions of our products).

Document Viewer Solution

1. Handle the client-side Init event in the ASPxDocumentViewer or DocumentViewer MVC Extension :

[WebForms]

<dx:ASPxDocumentViewer ID="ASPxDocumentViewer1" runat="server" ... ><ClientSideEvents Init="onDocumetnViewerInit" />
       ...</dx:ASPxDocumentViewer>

[MVC]

@Html.DevExpress().DocumentViewer(settings =>(
    settings.Name="MyDocumentViewer";
    settings.ClientSideEvents.Init="onDocumetnViewerInit";
    ...
  )
).GetHtml();

2. Implement the following JavaScript Init function in the <head> or <body> or tags of your web page:

function onDocumetnViewerInit (s) {
    var createFrameElement = s.viewer.printHelper.createFrameElement;
    s.viewer.printHelper.createFrameElement = function (name) {
        var frameElement = createFrameElement.call(this, name);
        if(ASPx.Browser.Chrome) {
            frameElement.addEventListener("load", function (e) {
                if (frameElement.contentDocument.contentType !== "text/html")
                    frameElement.contentWindow.print();
            });
        }
        return frameElement;
    }
}

RichEdit Solution

1. Handle the client-side Init event, ASPxRichEdit , BootstrapRichEdit or RichEdit MVC Extension :

[WebForms]

<dx:ASPxRichEdit ID="ASPxRichEdit1" runat="server" ... ><ClientSideEvents Init="onRichEditInit" />
        ...</dx:ASPxRichEdit>

[Bootstrap]

<dx:BootstrapRichEdit ID="ASPxRichEdit1" runat="server" ... ><ClientSideEvents Init="onRichEditInit" />
        ...</dx:BootstrapRichEdit>

[MVC]

@Html.DevExpress().RichEdit(settings =>(
    settings.Name="MyRichEdit";
    settings.ClientSideEvents.Init="onRichEditInit";
    ...
  )
).GetHtml();

2. Implement the following JavaScript onRichEditInit function in the <head> or <body> or tags of your web page:

function onRichEditInit(s) {
  if (ASPx.Browser.Chrome && ASPx.Browser.Version >= 77) {
    var createHelperFrame = s.createHelperFrame;
    s.createHelperFrame = function () {
      var helperFrame = createHelperFrame.call(this);
      helperFrame.frameElement.addEventListener("load", function () {
        if (helperFrame.frameElement.contentDocument.contentType === "application/pdf")
          helperFrame.frameElement.contentWindow.print();
      });
      return helperFrame;
    }
  }
}

Spreadsheet Solution

1. Handle the client-side Init event in the ASPxSpreadsheet , ASP.NET Core Spreadsheet, BootstrapSpreadsheet and Spreadsheet MVC Extension:

[WebForms]

<dx:ASPxSpreadsheet ID="ASPxSpreadsheet1" runat="server" ... ><ClientSideEvents Init="onSpreadsheetInit" />
        ...</dx:ASPxSpreadsheet>

[ASP.NET Core]

@(Html.DevExpress()
    .Spreadsheet("spreadsheet")
    .ClientSideEvents(events => {
        events.OnInit("onSpreadsheetInit");
     })
    ...
)

[Bootstrap]

<dx:BootstrapSpreadsheet ID="BootstrapSpreadsheet1" runat="server" ... ><ClientSideEvents Init="onSpreadsheetInit" />
        ...</dx:BootstrapSpreadsheet>

[MVC]

@Html.DevExpress().Spreadsheet(settings =>(
    settings.Name="MySpreadsheet";
    settings.ClientSideEvents.Init="onSpreadsheetInit";
    ...
  )
).GetHtml();

2. Implement the following JavaScript onSpreadsheetInit function in the <head> or <body> or tags of your web page:

[v18.1+]

function onSpreadsheetInit(s, e) {
    if(ASPx.Browser.Chrome && ASPx.Browser.Version >= 77) {
        var createSupportFrameElement = s.getRenderHelper().createSupportFrameElement;
        s.getRenderHelper().createSupportFrameElement = function() {
            var printFrame = createSupportFrameElement.call(this);
            var printFrameElement = document.getElementById(printFrame.name);
            printFrameElement.addEventListener("load", function(e) {
                if(printFrameElement.contentDocument.contentType === "application/pdf")
                    printFrameElement.contentWindow.print();
            });
            return printFrame;
        }
    }
}

[v16.2 – v17.2]

function onSpreadsheetInit(s, e) {
    if(ASPx.Browser.Chrome && ASPx.Browser.Version >= 77) {
        var createSupportFrameElement = s.getRenderProvider().createSupportFrameElement;
        s.getRenderProvider().createSupportFrameElement = function() {
            var printFrame = createSupportFrameElement.call(this);
            var printFrameElement = document.getElementById(printFrame.name);
            printFrameElement.addEventListener("load", function(e) {
                if(printFrameElement.contentDocument.contentType === "application/pdf")
                    printFrameElement.contentWindow.print();
            });
            return printFrame;
        }
    }
}

Please contact our support team if you need any assistance with this issue or the solutions above.

I'm happy to announce the official release of DevExpress UI for Blazor. To help celebrate Blazor official launch at #dotnetconf, we're offering our this release to our customers free-of-charge!

Download

Version 19.1.7 is available on the DevExpress NuGet server. Find your personal NuGet feed URL in Download Manager and setup Visual Studio's NuGet Packeage Manager to proceed with installation.

What's Included

Our initial release includes 12 native Blazor UI controls:

Data Grid

Main features:

• Data binding, including bind to a large data source.
• Different column types to display and edit text, numbers, dates, and Boolean values.
• Built-in Edit Form.
• Sorting data by single or several columns.
• Data grouping.
• Filter column values by 'Starts With' condition.
• Paging.
• Templates.
• Single and multiple row selection.
• Virtual Scrolling

See our Blazor Data Grid online demo and documentation for more information.

Pivot Grid

Main features:

• Data binding, including binding to IEnumerable<T>andIQueryable<T>and large data sources.
• Aggregate functions and summaries support
• Sorting data
• Grouping data
• Data paging
• Templates.
• Chart Integration.

See our Blazor Pivot Grid online demo and documentation for more information.

Scheduler

Main Features

• Binding to a data source
• Day, Week and Work Week views.
• Appointment CRUD operations.
• Drag-and-drop appointments support

See our Blazor Scheduler online demo and documentation for more information.

Charts

DevExpress Charts for Blazor includes Ten chart series:

• Line
• Area
• Bar
• Bubble
• Range Bar
• Range Area
• Candlestick
• Stock
• Pie
• Donut

Our Blazor Chart controls also support multiple series, series tooltip customization and a legend. See our Blazor Chart control online demo and documentation for more information.

Data Editors

DevExpress provides 6 native Editors for Blazor:

• Calendar
• ComboBox
• Date Edit
• List Box
• Spin Edit
• Text Box

In addition, DevEpxress Blazor editors support the default Blazor EditForm component that enables model data validation.

See our Blazor Data Editors online demo and documentation for more information.

Navigation and Layout

DevExpress navigation and layout control set provides you with the following capabilities:

• You can create adaptive layout on your page with Blazor FormLayout
• Implement custom data paging using DevExpress Pager for Blazor
• Use the Popup component popup to add popup dialogs to your Blazor application page.
• Build tabbed layout on a web page with the Blazor Tabs component .
• Add TreeView to your Blazor web pages to display hierarchical data or implement numerous navigation scenarios.

See our Blazor Navigation and Layout online demo and documentation for more information.

Source Code

Source code is available only for active DXperience and Universal subscribers.

Licensing

The DevExpress UI for Blazor will be part of the DevExpress ASP.NET Subscription. If you own an active ASP.NET, DXperience or Universal Subscription, all DevExpress Blazor products will be made available to you automatically. If you are a new to DevExpress or if your subscription has lapsed, you can download our first release free-of-charge.

Plans

This release is our first milestone. Here’s what you can expect in the future releases:

• Various Data Grid Enhancements.
• Data Editors enhancements.
• Localization support.
• New native Blazor components (we will announce plans in our 2020 roadmap).

The newest version of DevExpress UI for Blazor (v19.1.8) is now available. This update includes key enhancements for the following DevExpress Blazor components: Data Grid, Charts, TreeView and Tabs.

Data Grid

New Data Paging API

Our Blazor Data Grid component ships with an external data navigation API. Activate the grid’s paging mode (DataNavigationMode = DataGridNavigationMode.Paging) and use the following API to enable paging:

• PageIndex - Specifies the current page index.
• PageIndexChanged - Fires when the current page index is changed.
• PageCount - Returns the current page count.
• PageCountChanged - Fires when the current page count is changed.

To synchronize paging, link the grid’s API with an external navigation component using the @bind- directive:

<DxPager @bind-ActivePageIndex="@GridPageIndex" PageCount="@GridPageCount"></DxPager><DxSpinEdit @bind-Value="@GridPageNumber" MinValue="1" MaxValue="@GridPageCount"></DxSpinEdit><DxDataGrid ...
    @bind-PageIndex="@GridPageIndex"
    @bind-PageCount="@GridPageCount"
    ...>
...</DxDataGrid>
@code {
    int gridPageIndex;
    [Parameter] public int GridPageIndex {
        get => gridPageIndex;
        set { gridPageIndex = value; InvokeAsync(StateHasChanged); }
    }
    [Parameter] public int GridPageNumber {
        get => gridPageIndex + 1;
        set { gridPageIndex = value - 1; InvokeAsync(StateHasChanged); }
    }
    int gridPageCount;
    [Parameter] public int GridPageCount {
        get => gridPageCount;
        set { gridPageCount = value; InvokeAsync(StateHasChanged); }
    }
}

TreeView

Node Template Support

Our Blazor TreeView allows users to create reusable layouts for both nodes and associated content via templated UI elements. Available templates are listed below:

1. NodeTemplate - Specifies a template for all TreeView node content. The template is the same for all nodes.
2. NodeTextTemplate - Specifies a template for all TreeView node text. The template is the same for all nodes.
3. Template - Specifies a template for an individual node's content.
4. TextTemplate - Specifies a template for an individual node's text.

To learn more, please review our TreeView templates demo.

New Node Expand/Collapse Actions

You can now specify which user action expands or collapses a node. To enable this feature, set the NodeExpandCollapseAction property to one of the following actions:

• Auto– Click (or double-click if the AllowNodeSelection property is set to “true”) a node or its expand button to expand/collapse the node.
• NodeClick - Click a node or its expand button to expand or collapse the node.
• NodeDoubleClick - Double click a node or its expand button to expand or collapse the node.
• ButtonClick– Only click a node’s expand button to expand or collapse the node.

<DxTreeView @ref="@treeView"
    AllowSelectNodes="true"
    NodeExpandCollapseAction="TreeViewNodeExpandCollapseAction.NodeClick"
    ...><NodeTemplate><h4 class="d-inline-block m-0 @GetNodeCssClass(context)">@context.Text</h4></NodeTemplate>
    ...</DxTreeView>
@code {
    DxTreeView treeView;
    protected string GetNodeCssClass(ITreeViewNodeInfo nodeInfo) {
        var selectedNode = treeView.GetSelectedNodeInfo();
        var selectedStateClass = selectedNode != null &&
            selectedNode.Name == nodeInfo.Name ? "text-primary" : "text-secondary";
        var expandedStateClass = !nodeInfo.IsLeaf &&
            treeView.GetNodeExpanded(n => n.Name == nodeInfo.Name) ?"font-weight-bold" : "";
        return (selectedStateClass + " " + expandedStateClass).Trim();
    }
}

Event Source Detecting

We’ve extended the functionality of TreeViewNodeEventArgs. You can now use the TreeViewNodeEventArgs.CausedByAPI event argument to detect whether an event was raised through end-user interaction or programmatically.

<DxTreeView @ref="@treeView"
    BeforeExpand="@BeforeExpand" ...>
    ...</DxTreeView>
@code {
    protected void BeforeExpand(TreeViewNodeCancelEventArgs e)
    {
        if (!e.CausedByAPI)
            treeView.CollapseAll();
    }
}

Node API

The new GetNodesInfo method provides information about required nodes. We’ve also extended the ITreeViewNodeInfo interface to include a property option that contains information about a node’s parent.

<DxTreeView @ref="@treeView"
    AllowSelectNodes="true"
    SelectionChanged="@SelectionChanged" ...>
    ...</DxTreeView>
@code {
    protected void SelectionChanged(TreeViewNodeEventArgs e) {
        if (e.NodeInfo.Parent != null) {
            var parentSiblingNodesInfo = treeView.GetNodesInfo(n.Level ==
                e.NodeInfo.Parent.Level &&
                !string.Equals(n.Name, e.NodeInfo.Parent.Name));
            foreach (var nodeInfo in parentSiblingNodesInfo)
                treeView.SetNodeExpanded(
                    n => string.Equals(n.Name, nodeInfo.Name), false);
        }
        else
            treeView.CollapseAll();
    }
}

Charts

Point Customization

We’ve added new Blazor Charts API that allows you to customize point appearance. Handle the OnCustomizeSeriesPoint event and change how a point is drawn via the ChartSeriesPointCustomizationSettings object.

For example, you can customize a point’s visual settings (color, image, label’s text and visibility) as necessary:

<DxChart Data="@WeatherForecasts" OnCustomizeSeriesPoint="@PreparePointColor">
    ...</DxChart>
@code {
    protected void PreparePointColor(ChartSeriesPointCustomizationSettings pointSettings)
    {
        double value = (double)pointSettings.Point.Value;
        if (value > 75)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Red;
        else if (value < 25)
            pointSettings.PointAppearance.Color = System.Drawing.Color.Blue;
    }
}

The following image helps illustrate the power of this new Blazor Chart feature (Point Customization):

Chart point customization demos:

Point Customization

Point Image Customization

Point Label Customization

Tabs

With this update, DevExpress Blazor Tabs allow you to display an icon for any tab. To properly display an icon, set the CSS class of the icon to the TabIconCssClass property.

The code sample below illustrates how you can assign a custom CSS class to display an image on the first tab

<DxTabs><DxTabPage Text="Tab Page 1" TabIconCssClass=" custom-icon-css-class"><div>Tab Page 1 Content</div></DxTabPage><DxTabPage Text="Tab Page 2"><div>Tab Page 2 Content</div></DxTabPage></DxTabs>

Your Feedback Counts

As always, we welcome your feedback. Please share your thoughts below and tell us more about your Blazor-related development plans.

The latest version of DevExpress UI for Blazor (v19.1.9) is now available and it includes enhancements for the DataGrid and DateEdit components.

Data Grid

Save and Restore Layout

Our Blazor Data Grid allows you to save and restore layout information. Saved layout information includes the current page, column sort order/direction, column position, and both group and filter values. Use these two new events to save and restore the grid's layout with ease:

• LayoutChanged - o persist the grid’s layout instantly (when changed by a user).
• LayoutRestoring - to restore a previously saved layout.

Handlers of both events accept an argument of type IDataGridLayout:

public interface IDataGridLayout {
    string SaveLayout();
    void LoadLayout(string json);
}

The string SaveLayout() method returns a string with grid layout data. The void LoadLayout(string json) method accepts the string with grid layout data (saved using the SaveLayout method) to restore the layout. Here is an example of how you can use the grid’s new API:

<DxDataGrid ...
    LayoutRestoring="@OnLayoutRestoring"
    LayoutChanged="@OnLayoutChanged"></DxDataGrid> 
@code {
     void OnLayoutChanged(IDataGridLayout dataGridLayout)
    {
        var layout = dataGridLayout.SaveLayout();
        // persist the layout in your storage
    }
    void OnLayoutRestoring(IDataGridLayout dataGridLayout)
    {
        var layout = … // restore layout from your storage
        dataGridLayout.LoadLayout(layout);
    }
}

We've also implemented similar SaveLayout and LoadLayout methods for the Data Grid. This allows you to save and restore the grid’s layout on demand.

GitHub Example

Take a look at this full Visual Studio example on GitHub which demonstrates how to save and restore Blazor Data Grid layout automatically and on demand.

Date Edit

Scroll Picker Mode

In v19.1.9, we added a new ScrollPicker mode for touch devices. You can specify a picker type using the PickerDisplayMode property:

• Auto (default) - Mobile and tablet devices display the Blazor Date Picker using a scroll UI metaphor. Mobile devices display the Blazor Date Picker within a modal popup dialog, while tablet devices display the Date Picker in a non-modal popup. Desktop devices display the Date Picker as a calendar.
• Calendar - All devices display a datepicker as a calendar.
• ScrollPicker - All devices display a datepicker as a scroll picker.

When Scroll Picker mode is enabled, you can use the ScrollPickerFormat property to define a date format for each scroll picker element (day, month, and year). Supported formats are:

• ddd– Specifies the day and the short name of the day of the week (15 Fri).
• dddd - Specifies the day and the full name of the day of the week (15 Friday).
• dd or d– Specifies only the day (15).
• MMM– The shortened version of month name is used (Oct).
• M,MM,or MMMM– The full version of month name is used (October).
• y, yy, yyy, or yyyy– Four digit year is used (2019).

Specified format order defines corresponding scroll picker element order. For example, the image above demonstrates use of the "dddd MMMM yyyy" format string.

Your Feedback Matters

As always, we welcome your feedback. Please share your thoughts about these enhancements in the comment section below.

The initial release of DevExpress UI for Blazor is now available. If you’re new to Blazor or are considering it for an upcoming project, feel free to download and install our products free-of-charge (Yes, our initial release is available for free).

As the title of this blog post suggest, we are preparing for 2020 and want to engage the DevExpress developer community to help fine-tune our Blazor Roadmap for the first half of 2020. Please take a few moments to review the following and vote for the Blazor-related products/features you’d like us to ship in the first half of 2020.

New Components

Help us prioritize our list of new Blazor components:

Enhancements

Cast your vote and help us prioritize the following Blazor-related features/capabilities. Please limit your selection/vote to those features you consider most important/relevant.

Data Grid

Scheduler

Pivot Grid

Data Editors

Have We Missed Something?

If a Blazor product/feature is not listed in this survey, please comment below and share your usage scenarios with us.

In our most recent release (v19.2), we added a major enhancement to the ASP.NET GridView and CardView controls for both ASP.NET WebForms and MVC platforms.

When you use a predefined or custom Edit Form, you often need to change the layout on the fly. For example, you may need to show/hide specific items or groups of items based on user actions, user permissions, or the values (or state) for the row that needs editing. While there is the existing CellEditorInitialize event, it does not provide access to the layout items for the Edit Form.

To solve this issue in an elegant way, we've implemented runtime customization of Edit Form layout items (such as editors, buttons, layout groups) based on various conditions either on the server or client. For example, here's the GridView's Edit Form controlling the visibility of the 'Dismissal Information' group tab on the client-side. When the user enters a value for the 'Dismissal Date', the tab is shown, otherwise, a blank value hides the tab:

To access layout items and change their settings on the server side, use the new EditFormLayoutCreated event.

protected void grid_EditFormLayoutCreated(object sender, DevExpress.Web.ASPxGridViewEditFormLayoutEventArgs e) {
    ASPxGridView gridView = sender as ASPxGridView;
    LayoutGroup layoutGroupDismissal = (LayoutGroup)e.FindLayoutItemOrGroup("DismissalInformation"); 
    if(layoutGroupDismissal == null) return; 
    if(gridView.IsNewRowEditing) {
        layoutGroupDismissal.Visible = false;
        return;
    } 
    var fireDate = gridView.GetRowValues(e.RowVisibleIndex, "FireDate");
    layoutGroupDismissal.ClientVisible = fireDate != null && (DateTime)fireDate != DateTime.MinValue;
}

The EditFormLayoutCreated event gives you the opportunity to create different layouts for different rows. You can customize the settings for new layout items or existing ones, and also remove, create, re-arrange group items, and manage row and column spans, and so on.

The following client-side methods provide access to layout items on the client side:

• GetEditFormLayout– returns a client-side instance of the built-in Edit Form Layout control.
• GetEditFormLayoutItemByColumn - returns a layout item related to the specified column.
• GetEditFormLayoutItemOrGroup– returns an item or a group from its name.

The example below demonstrates how to toggle an item’s visibility:

function onShowHideInfoClick(s, e) {
    var contactLayoutGroup = clientGrid.GetEditFormLayoutItemOrGroup("groupContactInfo");
    contactLayoutGroup.SetVisible(!contactLayoutGroup.GetVisible());
}

You can use a similar approach to control groups of items, including tabbed groups.

Demo: ASP.NET GridView - Edit Form Layout

CardView

The new functionality is also available in our CardView control. We populated the CardLayoutCreated event’s argument with two methods (FindLayoutItemByColumn and FindLayoutItemOrGroup), which allow you to find a layout item, and the IsEditingCard option that indicates whether the current card is being edited.

On the client, the CardView control provides the same API to manage layout items as the GridView does.

• GetEditFormLayout– returns a client-side instance of the built-in Edit Form Layout control.
• GetEditFormLayoutItemByColumn - returns a layout item related to the specified column.
• GetEditFormLayoutItemOrGroup– returns an item or a group from its name.

Your Feedback

I would love to hear your feedback about our ASP.NET WebForms and MVC GridView and CardView components. Drop me a line below about what functionality is required for your ASP.NET web applications.

In this post, I'll discuss a couple of major enhancements to the DevExtreme ASP.NET Core and MVC Components in the latest v19.2 release.

.NET Core 3 Support

Without a doubt, .NET Core 3 is a major release that offers several cross-platform advantages over previous versions.

With the v19.2 release, I'm happy to announce support for .NET Core 3 within our ASP.NET Core product line, and this includes DevExtreme-based controls, Office-inspired controls, and Reporting.

Documentation

You can test-drive how our components use .NET Core 3 with the following documentation articles:

• Add DevExtreme to an Existing Project
• Add a New Report to an ASP.NET Core Application
• Add the Document Viewer to an ASP.NET Core Application
• Office-Inspired Controls | Configure a Visual Studio Project
• Office-Inspired Controls | Add Controls to a Project

Visual Studio Enhancements

Form Scaffolding

Our Visual Studio Scaffolding wizard can now generate DevExtreme-based Forms from models or DTO classes.

For example, if you have a C# class that looks like this:

public class OrderDTO {
    public int ID { get; set; }

    public DateTime? ShippedDate { get; set; }

    [Required]
    public string ShipCity { get; set; }

    [Required]
    public string ShipAddress { get; set; }
}

Then our scaffolding wizard will create the following Razor markup:

@(Html.DevExtreme().Form<OrderDTO>()
    .Items(items => {
        items.AddSimpleFor(m => m.ID);
        items.AddSimpleFor(m => m.ShippedDate);
        items.AddSimpleFor(m => m.ShipCity);
        items.AddSimpleFor(m => m.ShipAddress);
    })
)

Which, at runtime, will render a fully-functional Form component, with the relevant editors powered by DevExtreme widgets:

The scaffolding wizard will also generate the necessary form validation. For example, in that image of the generated form, notice how the editors that correspond to the fields annotated with the [Required] attribute in the C# class have been marked to require input.

Besides validation, the Form also recognizes the [Display] attribute. You can use it for labels, watermarks, and description lines. Here's how it works: if I decorate the FirstName property as shown below:

[Display(
    Name = "First name",
    Prompt = "Enter your first name...",
    Description = "As it appears on your passport or identification.")]
public string FirstName { get; set; }

Then it will render:

The Settings tab of the scaffolding wizard allows you to choose individual properties and customize form settings, such as column count or label location:

The new scaffolding wizard for the Form component will save you time and help you create forms for your web applications. We also provide scaffolding for the DataGrid and TreeList components.

Async API Controllers

Asynchronous programming, with the addition of the async/await keywords, was a welcome addition to the C# language. With this release, our scaffolder also supports async/await in API Controllers. Controllers generated by our API Controller Scaffolding Wizard are asynchronous by default. This means the controller actions are non-blocking and take advantage of the asynchronous capabilities of Entity Framework Core.

[HttpGet]
public async Task<IActionResult> Get(DataSourceLoadOptions loadOptions) {
    var products = _context.Products.Select(i => new {
        i.ProductId,
        i.ProductName,
        i.UnitPrice
    });
    return Json(await DataSourceLoader.LoadAsync(products, loadOptions));
}

ASP.NET MVC Scaffolding

As you may know, we offer two major libraries that support Microsoft's ASP.NET MVC framework. Our ASP.NET MVC controls based on DevExtreme also get the same scaffolder enhancements mentioned above.

Test It Today

Download the v19.2 update to test these new capabilities with our ASP.NET Core products today.

Then be sure to let us know your feedback. Thanks in advance!

We thank you for your ongoing feedback and for choosing our Blazor UI controls. We hope you’ll find the following support tickets of value as you explore the capabilities of our Blazor components.

Interesting Usage Scenarios

• Bind editors to numeric fields with regular expressions defined for fields (T829560)
• How to make the grid responsive and how to set a Null Text / placeholder for DxTextBox (T829441)
• Data Grid for Blazor - How to use the HTML element in EditTemplate (T834728)
• DataGrid for Blazor - How to change the text used (No data to display) for an empty row (T829160)

Troubleshooting

• Cannot provide a value for property 'ServiceProvider' on type 'DevExpress.Blazor.DxDataGrid' (T832066)
• Combo Box for Blazor - How to implement cascading combo boxes and validation (T831079)

Documentation Updates

We’ve updated our documentation for the following Blazor components:

• Blazor Calendar
• Blazor ListBox
• Blazor Popup

We’ve also added/extended the following help topics:

• Blazor Charting: Labels
• Blazor Charting: Point Customization in Line Series
• Blazor Charting: Visualize Pivot Grid Data

Our Blazor TreeView documentation includes the following updates:

• Blazor TreeView: Templates
• Blazor TreeView: Expand/Collapse Actions
• Blazor TreeView: Node Selection

We also described the read-only state for all Data Editors and password mode for our Blazor Text Box.

As always, we welcome your feedback. If you have specific questions or need assistance with our Blazor controls, feel free to comment below.

As the title of this blog post suggests, we now offer a way for you to use DevExpress Reports within your server-side Blazor apps.

In this post I'll show you how to integrate the HTML5 Document Viewer and End-User Report Designer, part of our excellent reporting tools, into your Blazor applications. I'll focus on integration details and create a sample reporting application as well. Let's get started.

Prerequisites

Here’s what you’ll need to use DevExpress Reporting (our HTML5 Document Viewer and End-User Report Designer) with the Blazor framework:

• Visual Studio 2019 with the ASP.NET and Web Development workload
• .NET Core 3 Framework
• DevExpress Subscription that includes Reporting tools

Source Code

You can find the source code of the sample below on GitHub.

How to Add Reporting to Blazor

To get started, you must first create a new Blazor application using the Blazor WebAssembly App template and check the ASP.NET Core hosted option (or run dotnet new blazorwasm –hosted command). If this template was not installed, please review the following document: Get started with ASP.NET Core Blazor.

This solution uses the ASP.NET Core backend (server-side__Blazor) to process requests from the Document Viewer and Report Designer. The client side defines the UI for these components and the logic to respond to UI updates.

Configure the Server Project

1. Install the DevExpress.AspNetCore.Reporting NuGet package.

2. Create a custom controller and add an action method to generate the Report Designer model based on the report URL and URIs of reporting controllers. This example uses the default DXXRD , DXXRDV and DXQB controllers of our Reporting tools to process requests from the Report Designer, Document Viewer, and Query Builder, respectively:

namespace BlazorReporting.Server.Controllers
{
    [Route("api/[controller]")]
    public class ReportingController : Controller
    {
        public ReportingController() { }
        [Route("[action]", Name = "getReportDesignerModel")]
        public object GetReportDesignerModel(string reportUrl)
        {
            string modelJsonScript = new ReportDesignerClientSideModelGenerator(HttpContext.RequestServices)
                .GetJsonModelScript(reportUrl, null, "/DXXRD", "/DXXRDV", "/DXQB");
            return new JavaScriptSerializer().Deserialize<object>(modelJsonScript);
        }
    }
}

3. Install the Microsoft.AspNetCore.Mvc.NewtonsoftJson NuGet package to help handle sending the model to the client in the JSON format.

4. Add server-side storage to save and load the reports. Create a new class (CustomReportStorageWebExtension), inherit it from the ReportStorageWebExtension class and define the methods. In this example, our reports are stored in memory, but you can add other storage types (database, file system, etc.) See Implement a Report Storage for more information.

5. Open the Startup file and register the reporting services and storage:

using DevExpress.AspNetCore;
using DevExpress.AspNetCore.Reporting;
// ...
public void ConfigureServices(IServiceCollection services)
{
    services.AddDevExpressControls();
    services.AddMvc().AddNewtonsoftJson().AddDefaultReportingControllers();
    // ...
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    DevExpress.XtraReports.Web.Extensions.ReportStorageWebExtension.RegisterExtensionGlobal(new CustomReportStorageWebExtension());
    app.UseStaticFiles();
    app.UseDevExpressControls();
    // ...
}

Configure the Client Project

1. Add the package.json configuration file and list the following npm packages required by our Reporting components:

{"dependencies": {
    // ..."devexpress-reporting": "~19.2.3""@devexpress/analytics-core": "~19.2.3","devextreme": "~19.2.3",
  },
  // ...
}

2. Run the npm install command to install these packages.

3. Create the Viewer.razor file and use the dxReportViewer binding to render the Document Viewer:

@page "/viewer"
@inject IJSRuntime JSRuntime
@implements IDisposable<div id="viewer" style="width:1000px; height: 800px" data-bind="dxReportViewer: $data"></div>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        JSRuntime.InvokeAsync<object>("JsFunctions.InitWebDocumentViewer");
    }

    public void Dispose()
    {
        JSRuntime.InvokeAsync<string>("JsFunctions.Dispose", "viewer");
    }
}

4. Create the Designer.razor file and use the dxReportDesigner binding to render the Report Designer:

@page "/designer"
@inject IJSRuntime JSRuntime
@implements IDisposable<div style="width:1000px; height:800px" id="designer" data-bind="dxReportDesigner: $data"></div>

@code {
    protected override void OnAfterRender(bool firstRender)
    {
        JSRuntime.InvokeAsync<object>("JsFunctions.InitReportDesigner");
    }

    public void Dispose()
    {
        JSRuntime.InvokeAsync<string>("JsFunctions.Dispose", "designer");
    }
}

You should use the OnAfterRender lifecycle method for both components for initialization and the Dispose method to release resources used by these components:

5. Add the index.js file and implement the logic to initialize and dispose the components:

var ko = require('knockout');

require('devexpress-reporting/dx-reportdesigner');

window.JsFunctions = {
    _viewerOptions: {
        reportUrl: ko.observable("MyReport"),
        requestOptions: {
            invokeAction: "/DXXRDV"
        }
    },
    _designerOptions: {
        reportUrl: ko.observable("MyReport"),
        requestOptions: {
            getDesignerModelAction: "api/Reporting/getReportDesignerModel"
        }
    },
    InitWebDocumentViewer: function () {
        ko.applyBindings(this._viewerOptions, document.getElementById("viewer"));
    },
    InitReportDesigner: function () {
        ko.applyBindings(this._designerOptions, document.getElementById("designer"));
    },
    Dispose: function (elementId) {
        var element = document.getElementById(elementId);
        element && ko.cleanNode(element);
    }
}

6. Create a new style.css file and import CSS styles:

@import url("node_modules/jquery-ui/themes/base/all.css");
@import url("node_modules/devextreme/dist/css/dx.common.css");
@import url("node_modules/devextreme/dist/css/dx.light.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css");
@import url("node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css");
@import url("node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css");
@import url("node_modules/devexpress-reporting/dist/css/dx-reportdesigner.css");

Add a reference to this new style.css file in the index.js file:

require('devexpress-reporting/dx-reportdesigner');
import "./style.css";
// ...

7. (Optional) You can create a bundle with Webpack as demonstrated in the GitHub example. Add a new webpack.config.js file, define the index.js file as the bundle's entry and the bundle.js file as the output file.

module.exports = {
    entry: './src/index.js',
    mode: "development",
    output: {
        path: path.resolve(__dirname, '../wwwroot/site'),
        filename: "bundle.js"
    },
    // ...
};

Run the webpack command within the console to create the bundle. Link resulting files in the index.html file.

Run and View Report

Run the solution and view our sample in your local browser:

DevExpress Reports for Blazor - Report Designer

Please test this example and share your thoughts in the survey at the end of this post.

Your Feedback Counts

As always, we welcome your feedback. Please take a moment to answer the following survey question so we can better understand your Blazor reporting requirements.

ASP.NET Gantt Control

• Localization support
• Touch device support
• Integrated toolbar
• Current Time Maker that indicates the current date and time within the Gantt region
• Custom colors for Task nodes within the Gantt area
• Customizable Context Menu
• Customizable Task Details dialog (used to edit tasks)
• Data validation support

ASP.NET Diagram Control

• Localization support
• API to manage changes to the Diagram’s data model
• Template-enabled custom shapes
• Improved Diagram UI with an additional workspace inside the control
• Improved user experience including mobile device support
• Image shapes
• Support for dash, dot, and other types of lines for shapes and connectors
• Custom toolbar items
• Auto-creation and shape connection once a connector is generated
• Drawing- related performance enhancements
• Context menu
• Support for touch-first devices

ASP.NET RichEdit

And Much More…

As you know, we currently ship over 200 ASP.NET WebForms controls and MVC extensions. Throughout 2020, we expect to introduce new capabilities to our most important WebForms and MVC products (such as our Data Grid, Pivot Grid, etc). Help us prioritize our efforts – tell us what’s most important to you by answering the following two questions:

Blazor

In this post, I'll discuss enhancements to the DevExpress UI for Blazor in the v19.1.10 release.

.NET Core 3.1 Support

Microsoft recently announced the release of .NET Core 3.1:

It’s really just a small set of fixes and refinements over .NET Core 3.0, which we released just over two months ago. The most important feature is that .NET Core 3.1 is an long-term supported (LTS) release and will be supported for three years.- Richard Lander, PM .NET Team

With the v19.1.10 release, our Blazor components now support .NET Core 3.1.

Data Grid Enhancements

HTML Decoration

Our Blazor Data Grid now allows you to decorate row and cell styles. For example, you can highlight important rows or cells using this new feature.

Our Data Grid ships with two new events: HtmlRowDecoration and HtmlDataCellDecoration. They can be used to customize row and cell appearance as needed. DataGridHtmlRowDecorationEventArgs and DataGridHtmlDataCellDecorationEventArgs event arguments provide information about the current row and cell.

Demo

Row Click

A popular customer request is the ability to respond when the end-user clicks on a row. This release includes a new RowClick event that fires when a grid data row is clicked. The DataGridRowClickEventArgs event argument object provides information about the current row and cell.

The code sample below illustrates how to use the RowClick event to start data editing:

<DxDataGrid @ref="@grid"
            Data="@forecasts"
            RowClick="@OnRowClick" ...>
    ...</DxDataGrid>

@code {
    DxDataGrid<WeatherForecast> grid;
    WeatherForecast[] forecasts;    ...
    void OnRowClick(DataGridRowClickEventArgs<WeatherForecast> args)
    {
        grid.StartRowEdit(args.DataItem);
        args.Handled = true;
    }
}

TreeView - Load Nodes on Demand

With this release, you can bind our Blazor TreeView component with complex or dynamically generated hierarchical structures in a more effective manner. When the LoadChildNodesOnDemand setting is enabled, the component does not load child nodes until a parent node is expanded for the first time. This optimizes performance because the TreeView will only request the required data from your data source.

You can also load child nodes on demand in either bound or unbound modes. If you bind the Blazor TreeView component to a data source, make sure to assign a lambda expression that specifies whether the data item has children (using the HasChildrenExpression property).

Demo

New Blazor CheckBox Component

We now offer a Blazor СheckBox component with extended state support: checked, unchecked and indeterminate:

Bind to a Model

You can bind the CheckBox to a specific model property using the Checked property:

<DxCheckBox @bind-Checked="@Value">...</DxCheckBox>

@code {
    bool Value;
}

The CheckBox component can also be bound to the following standard data types:

• Boolean
• Nullable Boolean
• String
• Byte
• Int32
• UInt32
• Int64
• Decimal
• Single
• Double

Bind to a Custom Type

If you want to bind our CheckBox to a custom type, set the ValueChecked, ValueUnchecked and ValueIndeterminate properties as necessary.

The following example demonstrates how to bind our Blazor CheckBox to a custom enumeration using the three properties:

<DxCheckBox @bind-Checked="@Value"
    ValueChecked="@Opinion.Yes"
    ValueUnchecked="@Opinion.No"
    ValueIndeterminate="@Opinion.Abstain">@Value.ToString()</DxCheckBox>

@code{
    enum Opinion { Yes, No, Abstain }
    Opinion Value = Opinion.Abstain;
}

Toggle View for Mobile

Our Blazor CheckBox also provides a toggle to change its appearance on mobile and tablet devices. Use the CheckType property to use either the standard Checkbox component or the Switch component for mobile:

<DxCheckBox CheckType="@CheckType.Checkbox"/><DxCheckBox CheckType="@CheckType.Switch""/>

Custom Appearance

You can customize the appearance of our Blazor CheckBox using images and other HTML content:

Demo

Blazor Data Editors - Null Values and Clear buttons

You can bind the Spin Edit and Date Edit components to nullable data types. Currently, the following Blazor components can be bound to nullable properties:

• Check Box
• Combo Box
• Date Edit
• Spin Edit
• Text Box

The following code demonstrates how to bind to a nullable member:

<DxDateEdit @bind-Date="@DateTimeValue"
    ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"></DxDateEdit>

@code {
    DateTime? DateTimeValue { get; set; }
}

In the sample above, the ClearButtonDisplayMode setting is optional. This setting allows the editor to display a Clear button when the editor has a non-null value:

Demo

Form Layout - CaptionFor

With this release, our Blazor Form Layout component will automatically bind a layout item's caption to a DevExpress editor located inside it. If you wish to assign a custom identifier to the caption's for attribute, use the CaptionFor property.

If you place a custom editor inside the item template, assign a unique identifier to the layout item's CaptionFor setting and to your custom editor's ID property:

<DxFormLayoutItem Caption="Contact Name:" CaptionFor="name_text_box"><Template><input value="@Name" id="name_text_box"></Template></DxFormLayoutItem>

XAF Blazor

For our XAF customers, we have begun rigorous testing of the DevExpress Blazor control suite within XAF, our business application framework for .NET developers. For more information, please follow the XAF Team blog.

Feedback

As always, your feedback matters. Please share your thoughts with us - we want to do everything possible to earn your business now and into the future.

Support for .NET Core Evolution

Gantt

We will officially ship our ASP.NET Core Gantt component in 2020. We hope to extend its capabilities with the following features:

• Localization support
• Touch device support
• Integrated toolbar
• Current Time Maker that indicates the current date and time within the Gantt region
• Custom colors for Task nodes within the Gantt area
• Customizable Context Menu
• Customizable Task Details dialog (used to edit tasks)
• Data validation support

Diagram

Like our Gantt component, we expect to officially release our ASP.NET Core Diagram components in 2020. New features will include:

• Localization support
• API to manage changes to the Diagram’s data model
• Template-enabled custom shapes
• Improved Diagram UI with an additional workspace inside the control
• Support for dash, dot, and other types of lines for shapes and connectors
• Auto-creation and shape connection once a connector is generated
• Drawing- related performance enhancements
• Support for touch-first devices

RichEdit

Implement a WYSIWYG client-side PDF export.

File Manager

• Upload and download files via our ArrayFileProvider
• Declarative column customization using component options
• New API to manage file and directory selection and control end-user actions on UI elements
• Intuitive server-side and client-side file management error handling support
• Notification and Progress panel UX enhancements
• Asynchronous API for server-side file modification
• Support for file and directory access based on user roles

HTML/Markdown Editor

Table Support

As you may already know, we selected the most popular open-source implementation (Quill) as the core for ASP.NET Core HTML/Markdown Editors. We constructed the control’s user interface with DevExtreme components (theme support, keyboard navigation, customization, etc).

Quill 2.0 was expected in 2019 and was purported to offer a new API with table support. Unfortunately, Quill 2.0 has yet to be released. We now need your help to make the best possible decision about table support within our editor.

Upload Images via a Form, Drag-and-Drop, and Copy/Paste

DataGrid/TreeList

New Export to Excel API

• Introduce transparent (WYSIWYG) export of our DataGrid’s column format.
• Export the DataGrid’s filter configuration as Excel worksheet column filters.
• Fully document our new export to Excel API.
• Demonstrate popular usage scenarios via technical demos.

Remote Validation Support

New Splitter Component

TreeView Drag-and-Drop Enhancements

Node Reordering

Cross-Component Nodes Drag-and-Drop

Editors & Form Layout

Label Animations

Scheduler

Data Visualization

Annotations in Maps, Pie and Polar Charts

Custom Position of Chart Axes

Our most recent v19.2 release includes a new ASP.NET Diagram control, both for ASP.NET WebForms and for ASP.NET MVC as well.

This new Diagram control gives you the opportunity to incorporate information-rich diagrams, flow charts, and organization charts into your apps simply and easily. It provides a visual interface with powerful formatting and data binding functionality that allows end-users to design new diagrams and modify existing ones.

Features

The ASP.NET Diagram control for WebForms and MVC ships with the following basic but important features:

• 35+ Predefined Shapes
• Custom Shapes:

• Bind to Any External Data
• Shape Sizing and Drag-and-Drop
• Collapsible Containers
• Auto Layout
• ReadOnly Mode
• Configurable Page Settings
• Export to SVG, PNG, and JPEG images
• Zoom and Auto Zoom
• Full Screen and Simple View Modes:

With these features, you can design diagram types such as:

• Flow charts
• Organizational structures
• Network diagrams

End-users can design, edit, display, and export diagrams.

Design Improvements

We have created a brand new design concept that makes this new component's toolbars and other UI elements look more appropriate and convenient for diagram editing. You can test drive the new Diagram control by using the demo links in the 'Test it now' section below.

Limitations and future plans

Here are the features we're working on before the official release of the ASP.NET Diagram control:

• An API to handle certain user actions (for example, node click and selection) and the control's data modifications
• Image Shapes
• AutoConnect shapes
• Touch Support

We plan to launch the ASP.NET Diagram controls for both the WebForms and MVC environments in the first major release of next year (v20.1).

Test it now

Test drive the new ASP.NET Diagram control demos here:

• ASP.NET Diagram demos
• ASP.NET MVC Diagram demos.

Or download the latest release and test the new control in your local development environment.

Your Feedback

As always, we welcome your feedback. Please share your thoughts about the new ASP.NET Diagram control in the comment section below.

In our most recent release (v19.2), we added a few major features to our ASP.NET Gantt control. We also released a Gantt control for the ASP.NET MVC platform.

Editing

Our ASP.NET Gantt control allows users to modify tasks and manage resources via an integrated dialog. Invoke the edit dialog by double-clicking a task in the Gantt area:

You can also resize and move tasks directly on the timeline or edit values in the task list:

Once modifications are complete, the Gantt control sends a request to the server and saves the changes to the data source.

Use the GanttSettingsEditing options to manage available edit operations for your end-users. Use the GanttSettingsEditing.Enabled property to disable editing.

• WebForms demo
• MVC demo

Real-time scaling

By default, our ASP.NET Gantt component displays tasks for an entire day using the Day View. Use the GanttViewSettings.ViewType property to set a different initial view type for the chart's timeline.

An end-user can scale the timeline by holding down the Control key and scrolling the mouse wheel. The current position of the cursor is used as the geometric center of the scaled area:

• WebForms demo
• MVC demo

Undo/Redo Functionality

With this release, our WebForms and MVC Gantt control tracks changes made by end-users and allows them to rollback these changes as needed:

Use the Ctrl+Z and Ctrl+Y shortcuts to initiate Undo and Redo commands. Once officially released, we'll add a toolbar and corresponding buttons for this functionality.

CTP

Our Gantt control is available as a CTP (community technology preview) in our v19.2 release cycle. We're not quite finished with all its features but rest assured, we're working to officially release this product by May 2020.

Test it today

Test-drive the new ASP.NET Gantt WebForms control on your local machine. If you own an active DXperience or Universal subscription, simply download our v19.2 release from the DevExpress Client Center.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below or open Support Center tickets for detailed discussions.

For some quick feedback, please submit your responses to this short survey:

This post describes the enhancements we’ve made to the DevExpress UI for Blazor in our v19.2.0 release cycle:

.NET Core 3.1.1 Support

Version 19.2 supports the recent .NET Core 3.1.1 update that contains security and reliability fixes.

Localization

You can now localize our Blazor UI components. Localization is available for both server and client side Blazor hosting models.

For server-side Blazor projects, you can use the Satellite Resource Assemblies of the .NET Framework. We include NuGet packages with predefined satellite assemblies for German, Japanese, Russian and Spanish locales. At present, no official or recommended guidelines exist for client-side Blazor. Lacking official guidance, we opted to implement the IDxLocalizationService interface for client-side Blazor apps.

For other cultures, you can use our online Localization Service to generate custom resource files as needed. Please make sure all translations meet with your approval before including them into your software project.

Please take a look at this online example to learn more about our implementation.

Data Grid Enhancements

Asynchronous Data-Aware Operations

v19.2 includes a new asynchronous data-aware API for our Blazor Data Grid.

The new API allows you to execute database operations and await completion without blocking app code execution. This allows you to deliver more responsive solutions - even when connected to remote databases over slow networks.

Use the new DataAsync property to data bind asynchronously. This property supports IEnumerable<T> or IQueryable<T> data source types.

<DxDataGrid DataAsync="@ForecastService.GetForecastAsync">
    ...</DxDataGrid>

We also introduced the following asynchronous events:

• RowInsertingAsync
• RowUpdatingAsync
• RowRemovingAsync
• RowInsertStartAsync
• RowEditStartAsync
• RowEditCancelAsync

Online demo: Data Grid - Asynchronous Data-Aware Operations

Binding to Custom Data Source

With this release, you can bind our Blazor Data Grid to a custom data source. Assign the data source type to the Data Grid's T parameter and use the CustomData property to implement data loading logic. The CustomData delegate accepts a DataSourceLoadOptionsBase object as a parameter. It specifies various data loading options (such as sort and group information).

Two new extension methods for the DataSourceLoadOptionsBase class (ConvertToGetRequestUri and ConvertToHttpContent) have been added to help you generate proper requests for Web API services.

The following example demonstrates how to bind our Blazor Data Grid to a Web API service:

<DxDataGrid T="@WebApiOrder" CustomData="@LoadCustomData">
    ...</DxDataGrid>

@code {
    [Inject] protected HttpClient Client { get; set; }

    public class WebApiOrder
    {
        public string CustomerID { get; set; }
        public DateTime OrderDate { get; set; }
        public decimal Freight { get; set; }
        public string ShipCountry { get; set; }
    }

    protected async Task<LoadResult> LoadCustomData(DataSourceLoadOptionsBase options, CancellationToken cancellationToken) {
        using var response = await Client.GetAsync(options.ConvertToGetRequestUri

            ("https://js.devexpress.com/Demos/NetCore/api/DataGridWebApi/Orders"), cancellationToken);
        response.EnsureSuccessStatusCode();
        using var responseStream = await response.Content.ReadAsStreamAsync();
        return await JsonSerializer.DeserializeAsync<LoadResult>(responseStream, cancellationToken: cancellationToken);
    }
}

Online demo: Data Grid - Custom Data Source

CheckBox Column

Our Blazor Data Grid includes a new CheckBox column with extended state support: checked, unchecked, and indeterminate.

Use the Field property to bind the column to data:

<DxDataGridCheckBoxColumn Field="@nameof(Order.IsShipped)" />

You can bind the checkbox column to standard types. To bind the column to a custom type , set its ValueChecked, ValueUnchecked, and ValueIndeterminate properties:

<DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)
    ValueChecked="@OrderStatus.Delivered"
    ValueUnchecked="@OrderStatus.Processing"
    ValueIndeterminate="@OrderStatus.InTransit"
    Caption="Order Status" />

To help you filter CheckBox column data, our Blazor Data Gird creates a ComboBox editor in the filter row. Use the FilterTextChecked, FilterTextUnchecked, and FilterTextIndeterminate properties to assign custom text to the editor's dropdown items:

<DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)"
    FilterTextChecked="Delivered"
    FilterTextUnchecked="Processing"
    FilterTextIndeterminate="In transit"/>

In Switch mode, the checkbox column displays toggles instead of checkboxes. To enable Switch mode, set the CheckType property to Switch.

Scheduler

Operation events for appointments

v19.2 ships with new events for our Blazor Scheduler control. These events allow you to manage changes to individual appointments:

• AppointmentRemoving
• AppointmentRemoved
• AppointmentUpdating
• AppointmentUpdated
• AppointmentInserting
• AppointmentInserted

Handle these events to modify (or discard) Drag & Drop, Data Editing, Delete, and other appointment operations before data is saved to storage.

Online example - How to implement CRUD operations with the Web API Service

Editors - Null Text

NullText is a helpful feature which displays placeholder text in our ComboBox when empty.

We've added the NullText property to the following editors:

• TextBox (demo)

• SpinEdit (demo)

• DateEdit (demo)

<DxTextBox NullText="Type text..."></DxTextBox>

Breaking Changes - RCL Support

In December, Microsoft introduced the Razor Class Library (RCL):

Razor views, pages, controllers, page models, Razor components, View components, and data models can be built into a Razor class library (RCL). The RCL can be packaged and reused. Applications can include the RCL and override the views and pages it contains. When a view, partial view, or Razor Page is found in both the web app and the RCL, the Razor markup (.cshtml file) in the web app takes precedence. -Rick Anderson

We’ve migrated our components to support RCL and to give you a native approach for sharing resources. As such, v19.2 components now require .NET Core 3.1. The RCL also uses the Blazor native location for resources (particularly, for the dx-blazor.css file).

See the full list of breaking changes for version 19.2.

Interesting Support Tickets

Common (ASP.NET MVC and Web Forms)