The second release for April of Telerik UI for Blazor is here and brings multiple new Blazor Grid features, Scheduler enhancements, WebAssembly 3.2.0 Preview 4 compatibility and much more.
Let’s dive into the new 2.11.0 release of Telerik UI for Blazor. We'll cover all the latest updates, and review in detail Grid Column Virtualization, Grid Nested Models and Grid Automatically generated columns that you can quickly enable in your Blazor apps!
The preview 4 of Blazor WebAssembly is out and it comes with many anticipated features such as Logging, Brotli precompression, Globalization and Localization and more!
As always Telerik UI for Blazor releases go hand in hand with the preview versions released by Microsoft. We are happy to announce that the latest Telerik UI for Blazor 2.11.0 release is compatible with preview 4 version of Blazor WebAssembly 3.2.0.
Grid column virtualization is a great addition for all of you that need to deal with large number of columns in Blazor data grid and look for ways to optimize both user experience and performance.
Telerik UI for Blazor Grid Column Virtualization
To enable virtualization, set the Grid ColumnVirtualization property to true, enable horizontal scrollbar and apply settings to the Grid Width, Height and RowHeight as shown in the example below:
You can easily combine Gird Virtualized Columns and Virtualized Rows together by setting the ScrollMode="GridScrollMode.Virtual" and ColumnVirtualization="true".
Grid Column virtualization works well together with automatically generated columns in Blazor Grid. As the AutoGenerateColumns is a new Grid feature you can find out more about it in the section below.
For cases when you want to display a list of columns in a Grid that are an exact match to your data model, you can now use the new Grid parameter AutoGenerateColumns. Set it to “true” and use the super simple code snippet to generate a Blazor Grid (as shown in the example below):
This simplifies column definition of the Grid and automatically generates a column for each public property of its model rather than defining each column manually. If you don't need explicitly declared columns (such as a command column or frozen columns) the <GridColumns> tag is not required.
The Grid columns settings can be adapted using the multiple customization attributes available that let you specify alternative column titles, specific column order, a width differing from the one generated in the <GridAutoGeneratedColumns> tag and more.
You can use data annotation attributes to set the column titles, ban or hide grid field editing, validate the data and more. Check out the sample code demonstrating the behavior of auto-generated columns using custom attributes.
The data that you bind to the grid may have complex objects in its model, not only primitive types, and the Grid component can now show complex (nested, navigation) properties out-of-the-box as of 2.11.0.
An example on how to use complex models with navigation properties in the Grid without flattening the model can be found in the dedicated article.
Another favorite component that was enhanced with this release is the Blazor Scheduler. Along with the existing Scheduler views – Day, MultiDay and Week, we added the Scheduler Month view.
Telerik UI for Blazor Scheduler Month View
The Month view of the Scheduler for Blazor shows the entire month to the user. To keep the month view well organized, each day slot shows up to two events. For cases when there are more than two appointments per day, an ellipsis button provides access to the detailed DayView for the specific day.
You can enable multiple views simultaneously, so that your users can easily switch to the preferred way events are visualized in the Scheduler, as shown in the example below.
Head over to the Telerik UI for Blazor page, download the 2.11.0 version of Telerik UI for Blazor and spice up your Blazor Data Grid. Keep telling us what’s working well, what needs to change and what you’d like to see next in the dedicated Blazor feedback portal or in the comment section below!
As always, all of us on your Telerik Blazor Team at Progress are thankful to you for being involved and helping us grow and making Telerik UI for Blazor bigger and better!
Maria Veledinova is Product Manager for Telerik UI .NET Web components - Blazor, ASP.NET Core, MVC and AJAX. She has experience in the field of product development and transformations of organizations towards forward-looking, innovative and impactful software products. Maria believes that behind every great product along with the cutting-edge technology stands challenging the status quo, close collaboration with the customers, and spirit of experimentation. Follow her on Twitter or LinkedIn.
Subscribe to be the first to get our expert-written articles and tutorials for developers!