Blazor Components - Data Grid Layout Management and New Scroll Picker Mode (Available in v19.1.9)

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.