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

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.

Our first beta brings with it a new Blazor 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).

Mobile Friendly

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

Scheduler Views

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

Data Binding

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

• Use AppointmentLabelsSource and AppointmentLabelMappings to display custom Labels within the Scheduler
• Use AppointmentStatusSource and AppointmentStatusMappings to display custom event status

Once the DxSchedulerDataStorage object is created, you can assign it to the DxScheduler.DataStorage property or use it as a stand-alone data source to retrieve appointment data without adding the Scheduler component on 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 assign in the following format to the RecurrenceInfo field:

<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 appointment supports the following Ranges:

public enum RecurrenceType {
  Daily = 0,
  Weekly = 1,
  Monthly = 2,
  Yearly = 3,
  Minutely = 4,
  Hourly = 5,
}

and recurrence Types:

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 VerticalScrollBarMode and HorizontalScrollBarMode properties:

• Auto– A scrollbar is automatically displayed when content size exceeds the component size.
• Visible - The scrollbar is always visible.
• Hidden - The scrollbar is 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 vertical scrolling and a horizontal scrolling at the same time.

See the online demo for additional info.

Column Visibility

Our Blazor Data Grid now offers hidden column support. Use the Visible property to manage column visibility. Once you hide a column, its editor is no longer available. If 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 our TreeView to data.

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

• TextExpression - A lambda expression that returns node text from a corresponding data item
• NameExpression - A lambda expression that returns a node’s unique identifier (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.

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.