In this post, I'll discuss the most recent enhancements to the DevExpress UI for Blazor (v19.2.3). This update incorporates features and changes introduced in our most recent beta.

New "Blazing Berry" Theme

Our new "Blazing Berry" theme is now available. It was built with Bootstrap v4:

We love the new theme so much we made it our default for our online Blazor demos.

Download, or clone, the themes from our free open source GitHub repository here:

https://github.com/DevExpress/bootstrap-themes

New TagBox

A new TagBox component has been added in this release. As you know, a TagBox is an editor which allows your end users to select or type multiple items and display them in a text area.

Use the AllowCustomTags property to enable custom item input.

Filtering

Our Blazor TagBox ships with 'Contains' and 'StartsWith' filter modes. When filtering is enabled, the drop-down list is automatically filtered once an end user starts typing.

Virtual Scrolling

Our Blazor TagBox also supports Virtual Scrolling (to help you work with large data sources). In this mode, the TagBox loads a small item set and additional items are dynamically loaded from the server when an end user scrolls the drop-down list.

Template

You can customize default tag appearance using the TagBox's Tag Template.

Data Validation

Add our TagBox to the standard Blazor EditForm to leverage built-in Data Validation features:

New Button

We now offer a Blazor Button component with support for nine standard Bootstrap styles and three display modes. The Button component ships with the following states: default, hovered, focused, and disabled.

You can also create custom buttons.

Data Grid

Row Preview Template

You can now customize Blazor Data Grid rows via our preview row template. The layout of the preview section is located below each data row:

<RowPreviewTemplate Context="ItemInfo"> @{ Employee employee = ItemInfo.DataItem;
  <table cellpadding="5" cellspacing="0">
    <tbody>
      <tr>
        <td rowspan="4" style="border: 0px;">
          <img src="images/Employees/@(employee.FileName).png" width="76" /></td>
        <td style="border: 0px; white-space: normal;"> @employee.Notes </td>
      </tr>
    </tbody>
  </table>
  }
</RowPreviewTemplate>

New UI Elements in Pager

Our Blazor Data Grid offers improved UI navigation elements for paging. The new Page Size selector allows your end users to specify page size as needed. You can also add custom values to the Page Size drop-down list.

We added a Go To Page edit box so users can navigate to a specific data page:

We've also updated the Data Grid Pager's public API so you can manage our new UI elements.

New Row Initialization

This release includes a new InitNewRow event. The event allows you to set custom row values when an end user adds a new row to the grid.

Task OnInitNewRow (Dictionary<string, object> values) {
{
    values.Add("Field1Name", Field1Value);
    values.Add("Field2Name", Field2Value);
    ...
    return Task.CompletedTask;
}

Charts

Axis Type Selections

Typically, the Chart component automatically creates an axis depending on your data. With this release, we've now added the following axis types which can be set in code: Continuous, Discrete, or Logarithmic.

Hide Spin Edit Buttons

Our Blazor Spin Edit now allows you to hide spin buttons using its new ShowSpinButtons property.

Popup

Header and Footer

With this release, we have improved the appearance of our Blazor Popup component. You can add custom content to the Popup's footer using the new FooterTemplate:

The Popup can now display internal scroll bars when the dialog contains lots of content. Unless hidden, the header and footer will also be displayed with scroll bars.

We've also added a new Visible property which can be easily bound to a Boolean field to control the popup's visibility.

Updated XAF's Blazor UI & Example with Security System APIs

For our XAF customers: We've updated our online XAF Blazor demo based on release versions of DevExpress Blazor components.

Even if you do not plan to use XAF's UI, you may find this new non-XAF Blazor Server demo and tutorial helpful. It demonstrates how to use DevExpress Blazor components with XAF's non-visual APIs for user authentication and group authorization. For more information on our business application framework for .NET developers, please follow the XAF Team blog.

Here's what you can expect from the IDE Tools Team in 2020:

CodeRush in Visual Studio

CodeRush for Visual Studio continues to improve and evolve. In 2020 we expect to focus on quality and performance, and introduce a number of clever functional improvements all around.

• Performance and stability. We want to improve our ability to diagnose and reproduce issues. We want to improve UI performance so dialogs, windows, and menus all appear much faster, and the product feels more instantaneous and responsive across the board.
• Improve feedback collection. We are building diagnostics into CodeRush that can detect performance issues and collect additional data that can help us make CodeRush even faster. As always, you get to decide if you want to send us that Non-personally Identifiable Information (NPII), but if you do, we're going to make sending diagnostics data easier than ever.
• Code analysis improvements
• Port missing refactorings from CodeRush Classic
• Visual and Navigational Improvements to Code Places
• Nav Mode (faster/easier/visual code navigation)

Ventures into VS Code

As you may have seen with our release of RushNav a few months ago, we are spending some time playing in the VS Code space. We're looking to push these efforts further in 2020, with the following functionality (possibly) appearing in one or more future DevExpress extensions for VS Code:

• TypeScript/Javascript refactorings
• Templates and Code Snippets for popular frameworks such as Angular, Blazor, and React.
• C# refactorings
  
• Rich Comments and Image Embedding
• TypeScript/Javascript code analysis

CodeRush Server

CodeRush Server is also expected to get some love in the form of the following:

• Port to .NET Standard
• Continue to improve code analysis with new CodeRush diagnostics

• Usability improvements

If you have any questions about our 2020 Roadmap or if you’d like to discuss your development needs further, please post a comment below. We’ll be happy to follow up.

Should you have any questions about our 2020 Roadmap or if you’d like to discuss your development needs further, please post a comment below. We’ll be happy to follow up.

Important Note: The features listed below should be available for Angular, React, Vue, and jQuery simultaneously. Exceptions are highlighted.

Official Product Release Schedule

DevExtreme Gantt Control for Angular, React, Vue and jQuery (v20.1)

DevExtreme Diagram for Angular, React, Vue and jQuery (v20.1-v20.2)

DevExtreme File Manager for Angular, React, Vue and jQuery (v20.1)

Our first release of 2020 (v20.1), will include a production version of the JavaScript File Manager component for Angular, React, Vue and jQuery. It will include the following new features:

• 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 file management error handling support
• Notification and Progress panel UX enhancements
• Item hover and selection within the thumbnail view
• Touch device support enhancements

DevExtreme Architectural Enhancements

Reduce JS/CSS Bundle Sizes (v20.2)

• Less time to compile application source code.
• Less time to deploy applications to hosting servers.
• Less time to deliver apps to end-user web browsers (better UX).

SCSS Support 

Improved Code Splitting

Efficient Tree Shaking

Improved Responsiveness/Adaptivity (v20.1-v20.2)

DevExtreme DataGrid/TreeList

New Export to Excel API (v20.1)

• 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 (v20.1)

API Enhancements (v20.1-v20.2)

• Expanded group rows
• Expanded master-detail rows
• Expanded adaptive rows
• DataSource properties (items, totalCount, summary)
• Load panel visibility
• Validation state (invalid cells, error text and position)

• Add new editing-related ‘saving’ and ‘cancel’ events
• Allow you to manipulate DataGrid/TreeList data without using a CustomStore

DevExtreme PivotGrid

New Export to Excel API (v20.2)

UI Components

Editors & Form Layout

Label Animations (v20.1)

DevExtreme HTML/Markdown Editor

Table Support (v20.2 or later)

DevExtreme HTML/Markdown Editor (CTP) core is based on the open-source implementation known as Quill. 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. Since we consider table support as a must-have feature, we can’t ship RTM before we find a way to implement tables. If Quill 2.0 is not released or we can’t deliver this capability with Quill 1.x, this feature may not be released in 2020.

Upload Images via a Form, Drag-and-Drop, and Copy/Paste (v20.2 or later)

DevExteme Scheduler

Hour Values within the Recurrence Form (v20.1)

Sticky Group/Resource Names (v20.1)

Virtual Scrolling (v20.2)

Data Visualization

Annotations in Maps, Pie and Polar Charts (v20.1)

Custom Position of Chart Axes (v20.1)

Additional Customization Options (v20.2)

Application Templates

Authentication UI Templates (Angular, React, Vue) (v20.1-v20.2)

Native React Components

Native React Grid

Export to Excel (v20.1)

Row Reordering (v20.1)

Popup Editing (v20.1)

Detail Editing (v20.1)

Keyboard Navigation (v20.2)

Batch Editing (v20.2)

Native React Scheduler

Resources & Grouping (v20.1)

Compact Appointment View (v20.2)

Timeline View (v20.2)

We will introduce a new type of view to display schedule timelines. You can find an example of a timeline here.

Toast Notifications (or simply Toasts) are flat notifications first introduced in Microsoft Windows 8. They pop up in the bottom right corner of your screen and can be accessed through the Windows Action Center. You can incorporate these notifications in your next Windows Forms app by using the DevExpress ToastNotificationManager component. To see toasts in action, launch our "Outlook Inspired App" demo and wait for it to load its notifications.

Our WinForms Toast Notification Manager offers nine notification templates/styles - including a Windows 10 "Generic" template that allows you to incorporate user interaction controls such as buttons or editors.

Application Shortcut

The DevExpress WinForms Toast Notification Manager generates genuine Windows toasts. These toasts are just like system notifications:

• Toasts appear even if the associated application is closed.
• Toasts can be accessed from the Action Center.
• Toasts use the same color scheme as the operating system.

To deliver this capability, we had to use native Windows APIs and follow all Microsoft guidelines and requirements. This included Microsoft’s application shortcut requirement.

Unfortunately, Microsoft’s application shortcut requirement has caused some confusion in the past. We recently made a minor design-time improvement and added a new section to the component's documentation page to help address this issue going forward.

In its Toast Notifications Overview Microsoft explicitly states that if an app does not have a shortcut in the Windows Start screen, it cannot display toasts.

Since Start screen shortcuts are stored in the %AppData%\Microsoft\Windows\Start Menu\Programs folder, we need to follow a simple rule: To display toasts, add an application shortcut to Start Menu folder.

Our component includes a "Create Application Shortcut" link in its smart tag menu. Once you click this link, your app will correctly display notifications.

As some of you have discovered, our "Create Application Shortcut" command adds a shortcut to one’s personal Start screen. Said differently, the PC that created the application shortcut is the only machine able to display toasts… No other machine’s Start screen has a shortcut to your app. If you want to display toasts for all users (and not just yourself), remember to configure your application installer to add a shortcut (with a valid AppUserModelID) in the %AppData%\Microsoft\Windows\Start Menu\Programs folder.

We believe that your best option is to use an installer to add this shortcut to user machines. If this is not an option or if you don’t have an installer, you can use the DevExpress.Data.ShellHelper.TryCreateShortcut method to add the appropriate shortcut.

using DevExpress.XtraBars.ToastNotifications;
using DevExpress.Data;

//if there's no app shortcut in the start screen, add it
if (!ShellHelper.IsApplicationShortcutExist("My Test App")) {
    ShellHelper.TryCreateShortcut(
        applicationId: manager.ApplicationId,
        name: "My Test App");
    //restart the app
    Application.Restart();
}

Please note that the TryCreateShortcut method is less reliable than the alternative. First and most important - your app may not have the necessary permissions to write files into system folders. Second, note the use of the Application.Restart method in the code snippet above. If the application is already running, adding its shortcut to the Start screen will not enable toasts. Application restart is required.

Activator and COM Server

Windows retains toast notifications in its Action Center.

Normally, Action Center clears all toasts after a user closes this screen (if a user opens, closes, and opens the Action Center again, it will be empty). Some toasts, however, can remain in the Action Center until a user manually dismisses them. Such toasts remain in the Action Center even after a user logs out and back into Windows. Additionally, these toasts launch their parent applications when clicked. To display such notifications, create a custom Activator - a descendant of the DevExpress.XtraBars.ToastNotifications.ToastNotificationActivator class.

[Guid("39697E4E-3543-4414-A694-90097B433DC6"), ComVisible(true)]
public class ToastNotificationActivatorCustom : ToastNotificationActivator {

    public override void OnActivate(string arguments, Dictionary<string, string> data){
        //specify what happens when a user interacts with a toast
    }
}

You will need to register this custom Activator. Set the component's ApplicationActivator property at design time or call the RegisterApplicationActivator method in code.

toastNotificationsManager1.RegisterApplicationActivator(
		typeof(ToastNotificationActivatorCustom));

You will also need to register a COM Server. To do so, call the DevExpress.Data.ShellHelper.RegisterComServer method. Note that if you use the ShellHelper class to create an application shortcut, you need to use a TryCreateShortcut method overload that takes the activatorType parameter. Otherwise, if you use the application installer to add the application shortcut, the installer must also add the HKEY_CURRENT_USER\SOFTWARE\Classes\CLSID\{-your-GUID-here-}\LocalServer32 registry key with a path to application executable file as a value.

if (!ShellHelper.IsApplicationShortcutExist("My Toast Application")
{
    ShellHelper.TryCreateShortcut(
         Process.GetCurrentProcess().MainModule.FileName,
         toastNotificationsManager1.ApplicationId,
         "My Toast Application",
         @"D:\Work\Images\_Icons\ico\chain-icon.ico",
         typeof(ToastNotificationActivatorCustom));
    ShellHelper.RegisterComServer(
        Process.GetCurrentProcess().MainModule.FileName,
        typeof(ToastNotificationActivatorCustom));
}

GUIDs

When working with toasts, you will need several unique IDs.

• For the component's ApplicationID property
• For the ID property of every notification
• For the Guid attribute that labels an Activator class

You can mash a keyboard to generate a unique ID, but a more effective approach is to use an online GUID generator (such as this one) or the generator included in Visual Studio ("Tools | Create GUID").

Deliver Critical Notifications

Even if you set up everything correctly, a notification may not delivered to a user. Delivery can be affected by:

• an older OS version
• notifications disabled in Action Center settings
• internal errors, etc.

In such circumstances, you can handle the ToastNotificationsManager.Failed event to deliver critical messages to users via alternative methods (such as a standard message box).

using DevExpress.XtraBars.ToastNotifications;
using DevExpress.XtraEditors;

void manager_Failed(object sender, ToastNotificationFailedEventArgs e)
{
    if ((string)e.NotificationID == "toast_connection_lost_id_das0ud0q94")
    {
        IToastNotificationProperties undeliveredToast =
            toastNotificationsManager1.GetNotificationByID(e.NotificationID);
        XtraMessageBox.Show(undeliveredToast.Body, undeliveredToast.Header);
    }
}

Should you have any questions about Toast Notifications or you encounter issues with implementation, please post comments below. We’ll be happy to follow up.

After the release of DevExpress Blazor UI Components v19.2.3, we updated our XAF Blazor demo, addressed a few issues and implemented some new capabilities. As always, we look forward to your comments and questions. 

• Theme Selector with 20+ Bootstrap themes: At this stage, we’ve tested the default Office White theme (minor issues are expected for other themes).
  
  
  
• Optimistic Concurrency Control: Includes the ability to merge and discard changes.
• 'Edit' button for aggregated objects and a Clear button for nullable editors.
• Partial data loading for root List Views (like Server Mode).
• Page Size selector in List Views.
• List View records now open via a single click instead of the in-place 'Open' button.
• Previous known issues were resolved:
  1. The Filter by Text command is now case-insensitive;
  2. List View rows can be grouped by reference properties;
  3. New objects are immediately added to List Views.

What's Next?

We are presently working on the following new features:

• Simple Form-based authentication with a login and password, role-based authorization and basic user/role management with access rights created in code (no specialized permission editors in the UI).
• A "compact" toggle for all themes in the Theme Selector (many customers wanted more compact themes for the Web). We will also polish remaining themes for XAF layouts by v20.1.

For more information on what we have planned for XAF Blazor, please refer to the eXpressApp Framework - 2020 Roadmap.

After a successful week 1 of the Blazor Roadshow, Carl, John, and Jeff are motoring to Raleigh, NC to start off week 2. Tonight, Carl will be presenting in Raleigh/Durham, Tuesday in Atlanta, then Charlotte, then Louisville, after which they take a week’s break before hitting the West Coast, starting March 2.

To remind you, Carl will be presenting above all practical information about using Blazor in your web applications. Best practices, authentication, consuming generic components, how to call JavaScript, server vs client: the topics he’ll discuss and illustrate in code are almost endless. If you are in any of these four cities, my advice is to register ASAP, you will learn a great deal. To register and for details on where/how to attend, please visit the Roadshow website. Seating is limited and is going fast, so make sure to reserve your seat today.

This week, Mehul, Alex and I will be at the Front End Developer Love Conference in Amsterdam.

This conference is packed with everything you need to know about React, Vue.js and Angular. There is an incredible speaker line up with Evan You - creator of Vue.js, Sarah Drasner and others. I will do a session about Blazor WASM as well.

We'll have daily raffles at the booth and we've brought `I'd rather be coding` T-Shirts for all of you.

Make sure to visit our booth and find out everything you need to know about DevExtreme and our other products.

In this post, I’ll highlight a number of usability enhancements introduced in our most recent release (v19.2).

Updated Project Templates

• Add Sample JSON Data Connection Storage. Select this option to register a default implementation of the IDataSourceWizardJsonConnectionStorage interface. Once implemented, this interface allows you to use new JSON Data Sources within the Web Report Designer.
• Add Sample Data Object. This option registers the default implementation of the IObjectDataSourceWizardTypeProvider interface. This interface provides the list of data object types to display within the Report Wizard/Data Source Wizard and allows you to bind reports to Object Data Sources.
• Enable Rich Text Editor. This option enables our new in-line Rich Text Editor for the Web Report Designer’s Rich Text control. Note that this editor requires the devexpress-richedit NPM package.

Refer to the Create an ASP.NET Core Application with a Report Designer help topic to learn more about the other options.

Report Designer - Search in Lists

You can now locate items using our incremental search panel. The incremental search panel is included in the following UI elements:

• Field List
• Report Explorer
• Expression Editor (search is available for Report Items and Fields)
• Report and Data Source Wizards (search is available for SQL Queries and Object Types)

v19.1 and Earlier	v19.2

Report Designer - Rename Custom Queries

The Data Source Wizard now allows you to input a custom name for a SQL query:

We also reduced the number of steps required to modify a query name. You no longer need to open the Query Builder to change a query name. We updated the Edit Query dialog and gave you the ability to edit query names and search through your stored procedures list:

Document Viewer - Custom Zoom Factor

You now have the ability to specify a custom zoom factor for documents displayed within the Document Viewer (you can enter a custom zoom factor as needed).

Document Viewer – Progress Bar Position

You can also use the SettingsProgressBar.Position property to define progress bar position.

Your Feedback Matters

Since feedback drives our development efforts, we’d love to hear your thoughts regarding the Actions section of our Designer’s Properties Panel:

As you may already know, actions allow users to:

• Add a report band.
• Add/remove a row and/or table column.
• Align a report control to the designer’s grid or center it vertically and/or horizontally within a parent container.
• Send an overlapped control to back or bring it to the front.

This control-specific and selection-driven section mimics ribbon contextual tabs and context menu entries you can find in our desktop Report Designer components:

Our 2020 roadmap survey told us that almost 60% of our users do not want DevExpress to replace the Actions panel with the Compact Ribbon Toolbar. To help us determine the best course of action, please complete this short survey regarding the Actions panel:

This week, the BASTA Conference is taking place in Frankfurt. John, Alex C, Alex T, Oliver and I will be present to show and tell you everything concerning Blazor as well as our other products.

I will have a session about automated Web UI Testing with our open source TestCafe solutions.  Oliver will do a workshop and have several sessions about different topics.

We will do daily raffles with cool prizes and we'll be handing out swag to everybody who comes by.

If you're at BASTA, make sure to come by!

We’ve compiled a short list of new help topics, code examples and interesting support tickets that may be of interest to those of you using our ASP.NET Subscription. As always, feel free to share your favorite support tickets with the DevExpress developer community in the comments section below.

New Examples

We published several new examples onDevExpress GitHub. Please let us know if you have any questions or encounter any issues.

Rich Edit for Angular

• RichEdit Angular Application (Ready-To-Use) (T848108) ( View on GitHub)
• RichEdit for Angular - How to customize the built-in ribbon (T848130) ( View on GitHub)

Diagram for Web Forms

• Node and Edge data sources - How to bind the control to in-memory data sources (T848274) ( View on GitHub)
• Tree from Linear Data Structure - How to bind the control to in-memory data sources (T848292) ( View on GitHub)
• How to bind containers to an in-memory data source (T854632) ( View on GitHub)

File Management for ASP.NET Core

• File Manager - How to use it in ASP.NET Core Razor Pages (T848278) ( View on GitHub)
• File Manager - How to open different files in a popup dialog (T849071) ( View on GitHub)
• File Uploader - How to upload images in Razor Pages (T848532) ( View on GitHub)

Interesting Technical Support Tickets

Common (ASP.NET MVC and Web Forms)

• Performance is slow because client-side initialization takes too much time in IE11 (T836311)

ASP.NET Web Forms 

• GridView - How to export its content to several (multiple) files (T837818)
• Grid View - How to get the ID and status (checked or not) of the selected row server side? (T844604)
• Grid View - How to change Columns captions at runtime and take these captions into account while exporting data (T838057)
  

• ASPxSpinEdit - How to implement large Increment/Decrement buttons for touch devices (T851262)
  

• Scheduler - How to display all resources in Appointment Dialog including after hiding specific items in the FilterResource event handler (T834629)
  

• HtmlEditor - How to convert an end-user's text to Upper case automatically (T837389)
  

• DockManager - How to rearrange Dock Zones (Dock Panels) automatically on small screens (T850346)
• Dock Manager - How to arrange Dock Zones horizontally (similar to Trello columns) (T847841)

ASP.NET Core

• RichEdit for Core - How to capitalize the first letter at the beginning of a new sentence/line (T852581)
• RichEdit for ASP.NET Core - How to load and save a base64 string (T700238)

ASP.NET MVC

• Grid View - How to bind Combobox column to Enum values with corresponding display names (T853026)
• Grid View - How to add a custom label (text) into a built-in toolbar (T847980)

Documentation Topics

The following article describes how you can add our ASP.NET Core RichEdit control to an Angular application.

Add RichEdit to an Angular Application

We also created a set of topics for the Gantt Control’s UI elements and its API members (how to manage appearance and functionality):

ASP.NET WebForms

Tasks,  Dependencies,  Resources

ASP.NET MVC

Tasks,  Dependencies,  Resources

We also added code examples to our documentation to illustrate how to use header and cell bands in MVC GridView.

Feedback

Feel free to share your thoughts on these items or anything else that may be on your mind. As always, we thank you for your continued business.

I hope you’ll agree with me that this topic is extremely important to XAF's primary target audience - development teams creating complex enterprise apps.

To help reduce the time needed to write unit and functional tests with XAF, we have published 10+ NEW articles: 

• How to write lightweight unit tests for XAF Actions, Controllers and other custom UI logic
• How to unit test Action's enabled/disabled state based on user permissions
• How to unit test whether object property changes via Actions were successfully committed
• How to unit test object queries by criteria and Detail View creation
• How to unit test event handlers in Controllers
• How to unit test New Action's custom business logic based on parent and nested Views
• How to unit test Action's enabled/disabled state based on target criteria and selection dependency types in List View
• How to unit test Action's enabled/disabled state based on target criteria and selection dependency types in Detail View
• How to unit test localized strings from CaptionHelper (Approach 1)
• How to unit test localized strings from CaptionHelper (Approach 2)
• How to integrate XAF functional testing with Continuous Integration systems like Azure DevOps
• XAF - Unit and Functional Testing with Blazor UI
  

I also want to point you to community content on this subject from Manuel Grundner (DevExpress MVP):

• T is for Testing: XAF & XPO - Builder Pattern 1 
• T is for Testing: XAF & XPO - Test Data 2

His personal blog contains other posts that address XAF best practices: https://blog.delegate.at/tags/XAF/.

Please Help Us Decide on Future Enhancements

We published these learning materials after comments to the recent roadmap survey and Support Center questions on unit & functional testing - thank you for your help! Additional enhancements are expected and will also be driven by user feedback.  

For unit testing, we are considering to add more learning materials and release all required assemblies with helper/mock classes (like TestDBTest, TestDetailViewFactory, etc.). For functional testing, we are considering to improve our cross-platform EasyTest engine with new commands and features. For instance, you will be able to write Blazor functional tests for Chrome or FireFox web browsers in C# or VB.NET (examples).

Please let us know what you think of these new learning materials and planned enhancements in this regard. 

This post describes our new Upload component and enhancements made to the DevExpress UI for Blazor in our most recent release (v19.2.4). As you may know, we've released multiple updates over the last couple of months. You can read our last Blazor UI-related announcement here.

.NET Core 3.1.2 Support

Our Blazor components now support .NET Core 3.1.2 update.

New Blazor File Upload Component

This release includes a new Blazor Upload control. The Upload control allows your end users to upload files to your server via AJAX requests.

Blazor File Upload Configuration

To configure the Upload control, the following client and server side properties must be set/specified:

Client-Side

• Specify the Name property. This value is required to access uploaded files.
• Set the UploadUrl property. Must be set to the server-side controller action that handles the upload requests.

<DxUpload Name="myFile"
        UploadUrl="https://[doamin name]/api/Upload/UploadFile/">
    </DxUpload>

Server-Side

Use the following code to create a controller and action used to check the accepted file before saving it to the target location:

    [Route("api/[controller]")]
    public class UploadController : ControllerBase {
        [Route("UploadFile")]
        // "myFile" is the value of the Upload's "Name" property.
        public ActionResult UploadFile(IFormFile myFile) {
           // Process the uploaded file here.
        }
    }

Chunk Upload for Large Files

To help you upload large files, our Upload component provides the new chunk mode. In this mode, the Upload component splits large files into small packets and sends them to the server in multiple requests.

To enable, set the ChunkSize property to the desired upload packet size. Therefore, the maximum size of each chunk will be split into before uploading. For example, the following code will upload files in one-megabyte increments:

<DxUpload ... ChunkSize="1000000">

    </DxUpload>

Drag and Drop

Our Blazor Upload control supports drag and drop operations. To activate drag and drop, set the external zones where end users can drop files.

Multiple File Upload

End users can upload multiple files. To activate multi-file upload, set the AllowMultiFileUpload property to true.

Instant Upload and Upload on a Button Click

The Upload component allows you to choose between two modes via the UploadMode property:

• Instant (default) - to upload files immediately after a user selects or drops a file.
• OnButtonClick - to only upload files once a user clicks the upload button.

File Validation

You can also validate files on the client before sending them to the server. Use the MaxFileSize property to limit the minimum and maximum file size and the AllowedFileExtensions property to restrict which file types can be uploaded:

<DxUpload MaxFileSize="4000000"
         AllowedFileExtensions="@(new List<string> { ".jpg", ".jpeg", ".gif", ".png" })" ... >
    </DxUpload>

API Changes

We've made some changes to the API since our last release (v19.2.4-Preview). To learn more, please review our API change log.

Charts Rotation

Our Blazor Chart component now ships with a Rotated property. Set the property to true to swap axes and display the argument (X) axis vertically and the value (Y) axis horizontally.

Calendar Navigation Enhancements

With this release, end users can quickly find any date in our Blazor Calendar. The Calendar now supports navigation between months, years, decades, and centuries.

Updated XAF's Blazor UI & Example with Security System APIs

For our XAF customers: We've updated our online XAF Blazor demo based on release versions of DevExpress Blazor components.

Even if you do not plan to use XAF's UI, you may find this new non-XAF Blazor Server demo and tutorial helpful. It demonstrates how to use DevExpress Blazor components with XAF's non-visual APIs for user authentication and group authorization. For more information on our business application framework for .NET developers, please follow the XAF Team blog.

As always, we want to thank you for choosing our products and for placing your trust in DevExpress. We hope the following tips & tricks will be of value for those using our WinForms & WPF Office-inspired controls and Office File API (XLS, DOC, PDF).

Tips & Tricks

• Word Processing:How to convert a document table to plain text with cell content separated by Tab characters (T864392)
• Word Processing:How to insert a soft-hyphen character in a document in code (T850329)
• Word Processing:How to find text on a specific document page (T853318)
• Spreadsheet Document API:How to calculate an Excel function without creating a document (T850644)
• Spreadsheet Document API:How to create a conditional formatting rule to check whether a cell contains particular text (case-sensitive search) (T854314)
• WinForms & WPF Spreadsheet:How to import data from a TXT or CSV file to a specific worksheet (T851453)
• KB Article:Common issues that appear when Office File API products are used in a .NET Core 2.1+/.NET Standard 2.0+ project (T861704)

Enhancements

• Word Processing:You can now specify whether to include a list level separator into the extracted string (T852566)
• Word Processing:Enable/disable text rotation for TextBox content (T857851)
• WinForms Rich Text Editor:Screen readers can now read text in RichEditControl (T853826)
• Spreadsheet:Create a custom cell style based on format settings of an existing cell range (T854041)
• PDF Document API:Specify annotation flags for a signature (T862319)

Documentation Updates

• WPF Spell Checker - Overview
• WPF Spell Checker - Dictionaries
• WinForms Spell Checker - How to Use the SharedDictionaryStorage Component
• Spreadsheet – Create a New Style Based on Existing Cell Formatting
• Snap - How to Convert a SnapList's Row Template to Paragraphs (Runtime Sample)

If you have a support ticket you’d like to share with the DevExpress developer community, feel free to post a comment with a link below.

We’ve compiled a series of WPF-related support tickets we hope you’ll find useful as you explore and use our WPF product line. Should you have any questions or issues related to any of these tickets, feel free to submit a comment below or respond directly to the ticket within Support Center.

If you’ve come across a valuable WPF-related support ticket, feel free to share a link with members of the DevExpress WPF community in the comments section below.

WPF Data Grid

• How to hide/disable check boxes within the Selector Column for certain rows (T857074)
• How to display the Print Preview window on a RibbonControl item click (T859304)
• How to specify a custom icon for the Best Fit (all columns) context menu item (T863989)
• How to prevent saving/restoring a specific column property (T863306)
• How to disable editing in XAML (T857830)
• How to always hide specific rows without removing them from the ItemsSource collection (T860645)

WPF Diagram Control

• How to prohibit addition of detached connectors to our WPF Diagram Control (T852866)
• How to automatically modify DiagramShape width based on content (T851265)
• How to create a diagram item with labeled input and output points (T852192)

Other WPF Products

• How to use Fuslogvw.exe to address deployment issues (T862816)
• How to always right-align the BarSplitButtonItem's popup (T864265)
• How to obtain file properties such as last modification date when the OpenFileDialogService is used (T856414)
• How to apply a specific theme only at design time (T859700)

2 weeks back, Mehul, Alexander and I put up our booth at the Frond End Developer Love conference in Amsterdam.

This conference was full about JavaScript/TypeScript except for one session - mine about Blazor WASM.

The first day was a mixture of Angular / Vue / React developers where day 2 and 3 where exclusively Vue.js related.

We met a few existing customers but most people we spoke to had never heard of us. This gave us the opportunity to give lots of demos on our DevExtreme components which raised quite some interest.

We held well attended raffles every day with nice prizes to be won. The last day we where able to perform the raffle on stage.

To get an impression about Front End Developer Love, check the images below:

Following a quick week off to recuperate after the first successful fortnight of Carl Franklin’s Blazor Roadshow, Carl, John, and Jeff are traveling up the California and Oregon coastline this week. Tonight it’s San Diego, Tuesday is Los Angeles, and Thursday is Portland. Unfortunately, we couldn’t reserve a spot for San Francisco/Mountain View so the Wednesday stop has had to be canceled.

A quick reminder: Carl will be presenting lots of practical information about using Blazor in your web applications. Best practices, authentication, consuming generic components, how to call JavaScript, server vs client: the topics he’ll discuss and illustrate in code are almost endless. If you are in any of these three cities – or indeed any of the nine cities over the following three weeks – my advice is to register ASAP, you will learn a great deal. To register and for details on where/how to attend, please visit the Roadshow website. Seating is limited and is going fast, so please make sure to reserve your seat today.

We thank you for your ongoing feedback and for choosing DevExpress Blazor UI controls. In this post, I’ll share links to a few interesting support tickets, examples, and documentation articles. Should you have any suggestions, please feel free to leave a comment below. 

Interesting Support Tickets 

• Data Grid for Blazor - How to Bind an Enum to a DxComboBox column
• Data Grid for Blazor - Long text is not wrapped if it does not have spaces between words
• DataGrid for Blazor - How to reuse the same ComboBox column across several grid components
• DataGrid for Blazor - Allow resizing columns when using Horizontal Scrolling
• Blazor Editors - How to perform validation using C# code
• How to display validation errors as inline images with a tooltip, rather then showing a plain text under the editors
• How to use a DevExtreme JavaScript Gantt in a Blazor application
• How to create a collapsible panel (accordion) based on CheckBox components in a switch type which are bound to enum

 Online Examples  

• How to localize DevExpress Blazor components
• How to implement a Theme Switcher in Blazor applications
• Scheduler for Blazor - How to implement CRUD operations with a Web API Service
• TreeView for Blazor - How to implement the Breadcrumb control based on a selected node
• Charts for Blazor - How to filter the chart based on DataGrid selection
• Data Grid for Blazor - How to create DataGrid and its columns at runtime
• DataGrid for Blazor - Server application - How to implement data export functionality using DevExpress Reporting tools
• DataGrid for Blazor - WebAssembly application - How to implement data export functionality using DevExpress Reporting tools

Documentation Updates 

Getting Started

To help you get started with our Blazor components, we updated the following Blazor topics to include recent changes to the framework:

• Prerequisites
• Create a New Blazor Application

New Common Topics

• Supported Browsers 
• Localization
• Themes 
• Troubleshooting

New Components

• CheckBox
• TagBox
• Button

Data Grid

• Bind to Custom Data Sources
• Bind to Data Asynchronously
• CheckBox Column
• Sort Data
• Master-Detail View
• Handle a Row Click
• HTML Decoration
• Paging
• Save and Load Layout
• Row Preview Template
• New Row Initialization

Scheduler Events  for CRUD Operations

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

More Updates 

• TreeView - Load Child Nodes on Demand
• Pager - Navigation Modes
• Chart - Axis Types
• Popup - Visibility, Footer, and Scrolling Long Content
• Clear Button and Null Text for all Data Editors

We’ve collected interesting support tickets you submitted for the last two months. Thank you for all your feedback. Hopefully you’ll find all this information of value as you integrate our reporting platform in your next desktop or web project.

Interesting Tickets

Reporting – Multiple Supported Platforms (WinForms, WPF, ASP.NET, .NET Core)

• Export to DOCX - additional page breaks in the generated document (T865380)

• Export to DOCX - How to suppress TopMargin in SingleFile export mode? (T865380)

• CodeDOM compilation of report scripts generates a “A required privilege is not held by the client” error (T862428)

• XtraReport - Document generation is slow if invalid image URLs are used (T836268)

• How to create a template master report with a header and footer (T859324)

WinForms Reporting

• End-User Report Designer - How to create report parameters of a complex type? (T863848)

• Distinguish whether a report is being previewed, printed or exported in report scripts (T856515)

• How to export multiple WinForms GridControls side by side without overlapping? (T859636)

• How to access PrintingSystem for XRDesignMdiController’s Print Preview? (T859640)

WPF Reporting

• PrintHelper - How to close the print preview form after printing? (T862636)

• DocumentPreviewControl - How to expand all document map nodes (T862096)

• DocumentPreviewControl - How to display a different mouse cursor over clickable XRControls (T859063)

• End-User Report Designer - How to change the default TextFormatString for all DateTime fields? (T858251)

Web Reporting

• Web Report Designer - How to hide stored procedures? (T856911)

• Web Report Designer - How to add more cells to XRTable using the online designer (T865931)

• Expose custom function in Expression Editor of Asp.Net MVC Reporting Web Designer (T859307)

• Running reports in a docker container based on Alpine image (T848411)

Report & Dashboard Server

• E-mail subscribes get an e-mail with the scheduled task’s failure details (T858890)

• Can I view scheduled dashboards on a mobile phone? (T863539)

Documentation Updates

• ASP.NET Core Reporting: Adding a Viewer video 
  Demonstrates how to add the Web Document Viewer to an ASP.NET Core application.
• Create Invoice Manually topic 
  Describes how you can create a report that mirrors our Invoice demo.
• Document Export Overview topic 
  Describes how to export a report to available formats.
• Export to XLS / Export to XLSX topic 
  Details XML-specific export options.
• JavaScript Reporting | Localization topic 
  Describes how to use JSON files from the DevExpress Localization Service to localize the Document Viewer and End-User Report Designer in JavaScript and JavaScript Angular applications.
• LoadChildItemsForCollapsedNodes variable 
  Allows you to specify whether to pre-load the Field List’s child items in the Web Report Designer.
• ASPxQueryBuilder.ParametersMode property 
  Specifies whether query parameters are accessible in the Web Query Builder.
• UriJsonSource.PathParameters property 
  Allows you to customize requests to JSON web service endpoints at runtime.
• Application Deployment topic in WinForms and WPF 
  Describes how you can add the Newtonsoft.Json.dll library to your deployed application and allow end users to generate JSON Data Sources.
• Node, JsonNode and JsonSchemaNode classes 
  Allows you to define JSON data source schema.
• JsonDataSource.FillAsync method 
  Populates a JSON Data Source in an individual task asynchronously.
• XRLabel.AllowMarkupText property 
  Newly supported tags: sub/sup and font.
• XRChart.CustomizeStackedBarTotalLabel and XRChart.CustomizePieTotalLabel events 
  Shows you how to customize text in stacked bar and pie total labels.

Your Feedback Counts

We’re now collecting our customers’ feedback regarding the Web Report Designer Actions Panel to determine whether we need to enhance this user interface element. Please submit your feedback to the short survey in our previous blog post if you are using our Web Report Designer: Web Report Designer - Actions Panel Survey.

It’s been over a month since we published our official 2020 WinForms Roadmap. Despite the short time frame, we've managed to implement quite a few features that we hope you’ll find valuable. In this post, I’ll summarize what we expect to include in our WinForms Early Access Preview (v20.1).

Please remember that pre-release builds are designed to collect feedback. If you find any of the features in this post promising (and if you own an active Universal or DXperience Subscription), please download the build by pointing your browser to the Download Manager.

Your Feedback Matters

We realize beta-testing is a time consuming process and we are eternally grateful to those who invest time with our preview builds. Find the current implementation lacking flexibility? Feel we've overlooked a valuable usage scenario? Does our current implementation fail to address your business requirements? Please post your thoughts in the comment section below or create a Support Center ticket. We will happily follow-up and do what we can to extend the capabilities of our new products/features.

If you currently own a WinForms Subscription and are considering an upgrade to DevExpress Universal or DXperience, email us at clientservices@devexpress.com for preferential upgrade pricing.

WinForms Data Grid

Summary by Selection

Grid Summary Items now include the Mode property. Use it to calculate summaries against currently selected rows.

You can choose between three operational modes:

• All rows - summaries are calculated against all rows;
• Selection - summaries are calculated only against selected rows;
• Mixed - acts as "All rows" when only one row is selected, switches to "Selection" mode when a user selects two or more rows.

At runtime, users can right-click a summary item to specify the desired selection mode.

New summary calculation modes work for both data and group rows. In the figure below, two group rows are selected. Summaries for the "Unit Price" and "Quantity" columns calculate their values only for records within these groups.

Demo   Documentation

WinForms Data Grid Kanban Board Enhancements

This release extends the capabilities of our Data Grid's TileView Kanban mode with the following features:

• Auto-height - Tiles can now span different heights. You can enable auto-height mode for tile template rows that display lengthy text strings or large images. To limit the maximum number of text lines, you can use the new MaxLineCount option.
• Each Kanban group can display a button at the bottom. You can control text and visibility of this button for individual groups. Handle the GroupFooterButtonClick event to execute actions when the button is clicked.
• The Kanban board allows you to manually create groups, and control group visibility/order. This feature allows you to retain empty groups after a user drags all their tiles away.
• Group headers now accept custom buttons. These buttons can be either constantly visible, or appear only when a user hovers over headers.
• You can now highlight Kanban group backgrounds with custom colors.
• Kanban Group headers now support HTML Formatting.

Launch our updated Tile View Kanban Board demo to explore these features in greater detail.

Demo   Documentation (AutoHeight)   Documentation (Groups)

WinForms Gantt Control

Runtime Editing and Task Dependencies

Our WinForms Gantt Control now supports interactive editing. Users can move a task to a new time slot, resize it, or change dependency type (Start-To-Start, Finish-To-Start) with a pointing device in the task chart. All changes are automatically reflected in the task list.

Demo   Documentation

AutoScheduling

When a user edits a task at runtime, the control automatically re-calculates the entire process and modifies start and end dates of other tasks.

Demo   Documentation

WinForms Tree List - New Item Row

Our WinForms TreeList control can now display an empty row. This empty row can be used to quickly add new records to the underlying data set.

The TreeList’s New Item Row replicates all the features we currently ship in our Data Grid.

• Set the OptionsView.NewItemRowPosition property to choose New Item Row position: top, bottom, or none (hidden).
• The TreeList.InitNewRow event allows you to automatically set initial cell values for new rows.
• Localization services allow you to modify the default "Click here to add a new row" text. text string. If you do not need to localize your app, modify the TreeList.NewItemRowText property instead.

When the New Item Row is enabled, the Tree List displays "Add Node" and "Add Child Node" options when a user right-clicks a node.

Enable the OptionsMenu.ShowAddNodeItems setting to show these menu items regardless of the New Item Row visibility.

Demo   Documentation

WinForms Pivot Grid - Pinned (Fixed) Columns

You can now pin Pivot Grid field values so that they remain visible when a user scrolls through control data.

To pin a value in code, add a new FixedFieldValue object to the FixedColumnFieldValues collection. The Conditions specifies the field values to be pinned. For instance, the code below pins "fieldQuantity" field values that belong to the "February 2015" interval.

var info = new FixedFieldValue(fieldQuantity);
info.Conditions.Add(
	new FixedFieldValueCondition(fieldYear, new DateTime(2015, 2, 1)));
pivotGridControl1.FixedColumnFieldValues.Add(info);

If you specify no conditions, the "Grand Total" column is pinned.

pivotGridControl1.FixedColumnFieldValues.Add(new FixedFieldValue(fieldQuantity));

Demo   Documentation

WinForms Diagram Control

Text Tool

Our new Text Tool allows you and your users to add text labels to your diagram.

DirectX Support

The diagram rendering engine now supports DirectX hardware acceleration. This improves the performance for diagrams with a large amount of items and diagrams that contain complex SVG shapes.

Documentation

DataTable Support

We have updated our Data Binding and Org Chart controllers to support DataTable and DataSet sources.

Property Panel Localization API

We have extended the DevExpress.Diagram.Core.Localization.DiagramControlStringId class so you can localize property names in the Property Panel.

WinForms Stack and Table Panel Enhancements

This release incorporates enhancements to StackPanel and TablePanel containters.

StackPanel Demo   TablePanel Demo

Auto-Size Functionality

Both panels can now automatically shrink and expand to fit all nested controls (use the control's AutoSize and AutoSizeMode). Note that individual rows and columns also support AutoSize mode.

Documentation (StackPanel)   Documentation (TablePanel)

Right-to-left Support

The panels now reverse the layout of nested controls when RTL mode is detected.

Documentation

Automatic Tab Order

The new AutoTabOrder property allows you to automate tab order for controls hosted within panels.

Documentation

Row and Column Visibility Settings

Columns and Rows inside a Table Panel support the Visible property.

New Label Alignment Mode

The new LabelVertAlignment property allows you to vertically align labels relative to controls displayed in adjacent cells.

Documentation

HiDPI Support

Both panels now support Per-Monitor v2 DPI Awareness mode.

WinForms SvgImageBox - DirectX Rendering

Our recently released SvgImageBox control can now use DirectX hardware accelleration to render vector images. This improves control performance when you need to draw a complex image with a large amount of vector elements.

New WinForms Splash Screens

This release introduces two new splash screens:

• Fluent Splash Screen - a Windows 10-inspired splash screen that features an Acrylic material effect (a partially transparent texture)
• Skin Splash Screen - a Splash Screen that auto-adjusts its appearance based on the current skin

To display these splash screens, call the static SplashScreenManager.ShowFluentSplashScreen and SplashScreenManager.ShowSkinSplashScreen methods.

Additionally, we have revamped the appearance of standard Splash Screen.

Demo