Telerik blogs
Telerik UI for Blazor

The latest release of Telerik UI for Blazor is here, with new capabilities for the grid, compatibility with the newest .NET Core Preview and more. Check out what's new.

Telerik UI for Blazor 2.2.0 has been just released and is ready for download, and we can't wait to share with you what’s new in the world of Blazor and our UI for Blazor. With the 2.0.0 release we announced the Grid Hierarchy, and this week we are extending the capabilities of the most used and desired component - the Grid. We are adding Virtual Scrolling and Column Reordering, along with updated demos and practical examples. In addition to the new features, we are happy to announce Telerik UI for Blazor suite compatibility with Preview 1 of .NET Core 3.1.

Telerik UI for Blazor is Compatible with ASP.NET Core 3.1 Preview 1

The Blazor framework is evolving rapidly, and we are happy to announce that Telerik UI for Blazor is compatible with Preview 1 of .NET Core 3.1 just days after Microsoft announced the update. The main goal of .NET Core 3.1 is polishing the features and scenarios delivered in .NET Core 3.0. It will be Microsoft’s long term support (LTS) release, supported for at least three years.

Spice Up Your Data with Blazor Grid

Data browsing and visualization with our Blazor Grid is now more dynamic and flexible, as we have added virtual scrolling and flexible column orders.

Virtual Scrolling

Large volumes of data are not an exception but a typical scenario in modern apps. A common approach is having the user page through, but if you want to deliver a more user-friendly way to explore the data you can now enable row virtualization.

Enabling virtualization can be done easily with two steps:

   1. Set ScrollMode property to "@GridScrollMode.Virtual"

   2. Assign values to the Height, RowHeight and PageSize properties

By adding these properties, the grid will be able calculate the position of the user in order to fetch the correct set of records from the data source.

<TelerikGrid Data=@GridData ScrollMode="@GridScrollMode.Virtual"
             Height="400px" RowHeight="40" PageSize="20" Sortable="true" FilterMode="@GridFilterMode.FilterMenu">

To further fine-tune the rendering performance and control the number of rendered rows, you can set the values in the PageSize property to a more suitable number so that it matches your application needs.

Telerik UI for Blazor Grid Virtual Scroll Telerik UI for Blazor Grid Virtual Scroll

Virtual scrolling has its advantages, however if you wish to combine it with Hierarchy or Grouping, you should be aware of certain limitations, and in these cases you will have to implement regular grid paging.

The complete reference can be found in the Telerik UI for Blazor Grid Virtual Scrolling documentation.

Column Reordering

Users often want their data to be visualized in different ways, depending on their preference and what's convenient for them to consume the data. As a developer you don’t have to deal with conflicting requirements on column order – the Blazor Grid now let’s you configure it as Reorderable and your app users can reorder the grid columns simply by dragging their headers to the desired position.

Telerik UI for Blazor Grid Column Reordering Telerik UI for Blazor Grid Column Reordering

To enable the column reordering, set the Reorderable parameter of the grid to true. To prevent the user from moving a certain column, set its own parameter Reorderable="false". Note that the user can still re-arrange other columns around it.

<TelerikGrid Data="@GridData" Reorderable="true" Pageable="true" PageSize="10" Sortable="true" Height="300px">

Telerik UI for Blazor Team at  DevReach 2019

Our Telerik UI for Blazor Team will be part of DevReach 2019 – Central and Eastern Europe's premier developer conference. Stop by for a Blazor chat at our booth, take part in our activities and enjoy this great event.

For everyone that would like get hands-on experience with Blazor we have a whole day event dedicated to “Build your First Full-stack Blazor App” with our Blazor gurus Bozhidar Ivanchev and Ed Charbeneau.

Download Telerik UI for Blazor 2.2.0

We encourage you to visit the Telerik UI for Blazor overview page and download the latest version of Telerik suite of native Blazor components! If you want to learn more about the Telerik UI for Blazor Grid, visit our documentation, demos and overview Grid page!

Help Us Shape The Future of Telerik UI for Blazor!

Don’t hesitate to share you feedback and let us know which components you would like to see next at the official Telerik UI for Blazor feedback portal. We value your ideas and will consider them when creating the 2020 product roadmap and beyond!

Happy Blazor Coding!

About the Author

Maria Ivanova

Maria Ivanova is a Manager of Product Management at Progress, for Telerik and Kendo UI components and developer tooling. She joined the company in 2019 as a Product Manager for Telerik UI web components and is passionate about developing impactful and innovative software products. Maria believes that to create great products, it's important to challenge the status quo, closely collaborate with customers, and embrace a spirit of experimentation. Follow her on Twitter or LinkedIn.

Related Posts


Comments are disabled in preview mode.