Blazor Components - New Blazor Scheduler Control, Data Grid Enhancements and more (available in Beta #1)

ASP.NET Team Blog
29 July 2019

As you may know, DevExpress released the first preview of its Blazor UI components in April. Thanks to your outstanding feedback, we are inching closer to our official release and, as the next major step to that goal, we're publishing our first beta.

This first beta includes a new Scheduler component along with a myriad of enhancements designed to improve the overall capabilities of our Blazor product line.

Blazor Preview 7 Support

Microsoft recently announced availability of Blazor Preview 7. The components in our first beta fully support Preview 7.

New Blazor Scheduler Component

A picture is worth a thousand words…Here is a screenshot of our new Blazor Scheduler component (available in Beta #1).

DevExpress Blazor - Scheduler Component

Mobile Friendly

The component is ready for both desktop and tablets alike. We plan to add a mobile-optimized Agenda view in a future release.

Scheduler Views

The Scheduler control supports 3 calendar views: 'Day View', 'Work Week View', and 'Week View'. As its name implies, the 'Day View' displays appointments for a single or for multiple days. Use the DayCount setting to control the number of days to display. The 'Work Week View' displays 5-day working week intervals. The 'Week View' displays appointments/events across a 7 day period. FirstDayOfWeek allows you to specify the first day of the week (which is Sunday by default).

Data Binding

To bind the control to appointment data, use the DxSchedulerDataStorage object, and populate the AppointmentsSource and AppointmentMappings collections. The DxSchedulerDataStorage object also supports additional fields for custom data:

  • Use AppointmentLabelsSource and AppointmentLabelMappings to display custom labels within the Scheduler
  • Use AppointmentStatusSource and AppointmentStatusMappings to display any custom event statuses

Once the DxSchedulerDataStorage object is created, you can assign it to the DxScheduler.DataStorage property for use with a Scheduler control. Alternately, you can use it as a stand-alone data source to retrieve appointment data without needing to add the component to a web page. See our online demo for more information.

Recurring Appointments

Our Blazor Scheduler control supports recurring appointments. To create a recurring appointment, add a RecurrenceInfo field in the following format:

<RecurrenceInfo Start="07/23/2019 9:30:00" End="07/23/2019 11:00:00" WeekDays="36" Id="04dcc127-df56-49d7-baff-ce4b6264addd" OccurrenceCount="10" Range="1" Type="1" />

An recurring appointment supports the following recurrence types:

public enum RecurrenceType {
  Daily = 0,
  Weekly = 1,
  Monthly = 2,
  Yearly = 3
}

and recurrence ranges:

public enum RecurrenceRange {
  NoEndDate = 0,
  OccurrenceCount = 1,
  EndByDate = 2
}

Online Demo

Data Grid

Vertical and Horizontal Scrolling

Our Blazor Data Grid control now supports both vertical and horizontal scrolling. To activate scrolling, assign one of the following values to the VerticalScrollBarMode and HorizontalScrollBarMode properties:

  • Auto – A scrollbar is automatically displayed when content size exceeds the component size, otherwise it is hidden.
  • Visible - The scrollbar is always visible.
  • Hidden - The scrollbar is always hidden.

Use the VerticalScrollableHeight property to set the height of the visible scroll region.

Horizontal scrolling is fully compatible with the Virtual Scrolling mode. You can enable Virtual mode for both vertical scrolling and horizontal scrolling at the same time.

See the online demo for additional info.

Column Visibility

The Data Grid now provides support for hidden columns. Use the Visible property to manage column visibility. Once you hide a column, its editor is no longer available. Should you want to display the editor, assign one of the following values to the DxDataGridColumn.EditorVisible property:

  • Default – Column editor visibility is linked to column visibility. If the column is hidden, the editor is hidden as well. If the column is visible, the editor is also visible.
  • True – The Column editor is visible regardless of the column’s Visible property value.
  • False – The Column’s editor is always hidden.

TreeView

Data Binding

Our Blazor TreeView allows you to bind hierarchical data via any object that implements the IEnumerable interface (one that has a child item collection for use as a data source for the TreeView). Assign your data source to the TreeView.Data property and ChildrenExpression to obtain the child item collection used to bind the TreeView to data.

Additionally, our TreeView provides the following properties for custom data display:

  • TextExpression - A lambda expression that returns the node text from a corresponding data item
  • NameExpression - A lambda expression that returns a node’s unique identifier (that is, a name)
  • NavigateUrlExpression - A lambda expression that returns a node’s target URL
  • IconCssClassExpression - A lambda expression that returns the name of a CSS class applied to a node’s icon

To learn more, please review our TreeView - Binding to Hierarchical Data demo.

Note: This data binding implementation allows the TreeView to display Master-Detail relationships (nodes at different levels can be bound to different type item collections). See the TreeView - Master-Detail Data Binding demo to see how to configure the TreeView to be used in this manner.

Form Layout

Items Visibility

We’ve added a Visible property to the following FormLayout items:

  • DxFormLayoutItem
  • DxFormLayoutGroup
  • DxFormLayoutTabPages
  • DxFormLayoutTabPage

You can now display or hide specific items, item groups, or tabs by setting the Visible property to true or false.

Your Feedback

Your feedback matters. Please share your thoughts about this update below and tell us what you’d like to see us develop next for the Blazor platform.


11 comment(s)
MatthewHughes_
MatthewHughes_
Very interesting. Is Blazor going to be the migration path from WebForms?
29 July, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)

@MatthewHughes_

Not sure about migration because you will have to rewrite your code from WebForms to Blazor. From a controls perspective, we'll do our best to bring our best WebForms controls to Blazor (when it makes sense to). Give us your feedback on your web development needs and scenario.

In the meantime, this article may help. Quote from article.. "This isn't WebForms - It's Razor Components." -Hanselman

Btw, you're not alone, here's recent suggestion and looks like someone may create an ebook about it.

30 July, 2019
Chris Royle (LOB)
Chris Royle (LOB)
Looking good - loads of components which appear suitable for XAF :)
31 July, 2019
Peter CaoZheng
Peter CaoZheng
Expect XAF's web to migrate to Blazor
31 July, 2019
Daniel Programer
Daniel Programer
Hi,

I am planning on using Blazor to design an application that looks like a typical desktop app (possibly PWA) with multiple tabs that get opened as user clicks on a menu item from the main menu at the top of the application (think Visual Studio).

1. When are you planning on extending DxTabs control to enable this functionality? Or maybe create a new component?

2. I think you should strongly consider implementing some sort of layout mechanism that would allow dynamic resizing of child components (e.g. if I set the width and height of the grid component to 100% and the parent container/div is resized, the grid would automatically adjust to fill in the content of the parent). Maybe this could be handled using existing CSS standards such as flex box and css-grid? It's something that has always caused me a headache when writing WebForms apps using your library. My typical UI has a menu at the top, search options on the left and a grid taking up the remaining real-estate. I always have to handle AspxSplitter events to set the height of the grid manually when the browser window is resized. This is too much work and things get a lot more complicated with more comprehensive UI scenarios where there may be a AspxTabPage component, each tab containing a grid that needs to take up the entire size of the container (then I need to manually resize the grid for each and every tab).

Implementing what I outlined is in my opinion very important, Blazor has many different use cases and one of them is a desktop-like SPA/PWA.

Thanks!
1 August, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
Daniel, thanks for your feedback.
1 August, 2019
Armando Costa 1
Armando Costa 1

Blazor is a no-brainer step, already migrating on preview!

Please take your powerful widgets to production level,  and a web report version working on blazor would be nice. 

Never seen such a quantum leap on web development.


I'm using LINQ in a razor view!!!!



2 August, 2019
Daniel Programer
Daniel Programer

In case it wasn't obvious in my previous post, I believe that implementing multi-tabbed UI components that are typical for a desktop applications is critical - Blazor is not just a replacement of WebForms/MVC, it's a replacement of WinForms/WPF as well. You should design your Blazor components with that in mind.

Thanks again for your attention.

2 August, 2019
Mehul Harry (DevExpress)
Mehul Harry (DevExpress)
@Armando, thanks for your feedback.
2 August, 2019
MatthewHughes_
MatthewHughes_

@Mehul

I should have elaborated - I what I was meaning to say is not migrate code wise but ideas wise it feels a little similar to WebForms :)


6 August, 2019
Customer94453
Customer94453
Is there a way to customize   Blazer DxDataGrid caption and background  colors? Thanks
15 August, 2019

Please login or register to post comments.