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

ASP.NET Team Blog
24 October 2019

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.

DevExpress Blazor Date Edit 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.

5 comment(s)
Blago Culjak
Blago Culjak
Just when I thought that you've forgot about Blazor, bam! Great addition.
24 October, 2019
Marcelo G. Fonseca
Marcelo G. Fonseca
I also thought that DevExpress had forgotten about Blazor, but it surprised me positively !!! 
25 October, 2019
Anurag Mahato
Anurag Mahato
Does same layout restore in WPF and blazor
25 October, 2019
Gosha
Gosha
Blazor is strategical business development path for all control vendors... looking forward for XAF based on Blazor. For enterprise customers that would be a big deal... if it will be available on time
29 October, 2019
Dennis (DevExpress)
Dennis (DevExpress)

@Gosha: We hope to show the first basic XAF Blazor (Server Side) demo before the end of this year for simple CRUD scenarios only - just to illustrate how it works and feels in general. Example:



For more information, please follow our team blog: https://community.devexpress.com/blogs/xaf/default.aspx.
You will certainly see more updates from us in 2020.

30 October, 2019

Please login or register to post comments.