Telerik UI for Blazor
We are happy to share that Telerik UI for Blazor is compatible with Blazor WebAssembly release candidate and we promise to be fully compatible with the official release shortly after it is officially announced by Microsoft later this month.
Dealing with a large number of columns while using the Telerik UI for Blazor data grid just got easier with our new Grid column virtualization feature. It is a great addition for all of you who need to look for ways to optimize both user experience and performance. The Grid Column Virtualization works well with both Virtualized Rows and AutoGenerated Columns. If you would like to see a detailed example of how to enable both features visit our release blog post.
When binding your model to a Grid component, wouldn’t it be better if you could just pass the data and have the Grid figure out your components? If you are working on a big application, you likely have many properties, and if you are working on a small one, then data is likely to change. In both cases, you avoid modifiying your UI with the new AutoGenerated columns feature of Telerik UI for Blazor’s Grid.
You only need to enable the AutoGenerated feature and the Grid itself will create a column for every property on your model. Check how to use enable it in our demo.
Since this might not be enough for some of you, we also allow the autogenerated columns to be customized – with additional attributes you can specify alternative column titles, specific column order, column width or you can even run validation! Check out the sample code demonstrating the behavior of auto-generated columns using custom attributes.
The Telerik UI for Blazor Schedular not only has Day, MultiDay and Week views, it now offers Scheduler Month view. To keep the view of the month well-coordinated, up to two activities appear each day at the slot. For cases where there are more than two appointments a day an ellipsis button provides access to the detailed DayView for the specific day.
You can simultaneously allow multiple views, so your users can easily turn to the Scheduler's preferred way of visualizing events as seen in the example below.
We place a lot of love on the Grid but sometimes the data is better suited for a good ListView component. The ListView is available in 2.10.0 and follows the tested recipe of being fully customizable. Bind your data source to the control, use the custom templates for rendering and editing items, and the header and footer of the list. Combine with the built-in buttons like Add and Save or add your own custom buttons to build it exactly as you want it.
The new Telerik UI for Blazor Pager component is a flexible tool for controlling paginated components like the Grid or the ListView we just discussed. You only need to specify the page size and the total number of items and then handle the event we fire every time the user changes the page. Your handler is free to load the data dynamically to avoid loading everything up-front. Or not – it’s up to you.
By introducing a Checkbox control, we are moving a step closer to completing all frequently used input components.Users may pick between 3 states – Checked, Unchecked and Indeterminate (e.g. useful for a “Select All” checkbox). Of course, you are free to redefine the visuals and you get full programmatic control via data-binding and several events to notify you for any user actions.
It won’t be a Telerik UI for Blazor release without an update to the Grid. We are now adding the ability to freeze columns which does exactly as the name suggests – frozen columns stay in-place when the user scrolls horizontally.
The Grid already has a feature which allows you to select multiple rows to execute the same operation on all of them simultaneously. You also have the option to select all rows in the Grid – but this one was a bit unclear – does it select all currently visible rows or all rows in the Grid? We’ve left it to you to decide how should this behave so we’ve added a SelectAllMode attribute which controls exactly that.
Uploading files is now a one-liner:
<TelerikUpload SaveUrl="@SaveUrl" RemoveUrl="@RemoveUrl"/>
Thanks to the Upload component for Telerik UI for Blazor you can make it trivial for users to upload their files to your application. And as always, its fully customizable – pick the file extensions you care about, set limits on min and max file size, upload when a file is selected or wait for the user to press a button – it’s up to you.
The gist of web development is rich visualization of data and one key element of that is the ability to show a Tooltip component. You decide when (click or hover) and where should the tooltip appear (top, bottom, left or right) and there are no limits on what it can contain – text, images or even other components.
The state of the Grid component includes the current sorting, filtering and grouping selections as well as the indices of the expanded hierarchical rows. With this update, you can now programmatically access and modify the grid’s state which is powerful in many ways:
Save and restore the grid to a user’s preferred state (e.g. Peter sorts his online purchases by price, Karen sorts them chronologically)
Group, sort, filter or otherwise control the state from code (e.g. the data is too large so group it by default but also let the user explore it on their own)
It can be very convenient for users to move columns around and resize them in order to see the most of their data. With this latest update, the Telerik UI for Blazor Grid now supports both operations to put even more power in your users’ hands.
Enhancements in our Blazor UI suite continue with new additions to the Grid grouping feature with column aggregates as well as group header and footer templates. These new add-ons will let you easily display totals of your grid data and highlight values worth attention. They also bring us one step closer to having a full-feature Grid component.
Visualizing images, styling headers or adding various actions via button has never been easier with the new column header template grid feature. Use the <HeaderTemplate> tag to define custom content in the Blazor Grid column headers instead of just the title text.
Mark events in the Telerik UI for Blazor Scheduler as recurring – pick the interval in days, weeks, months or years and set a limit on the number of recurrences or an end date.
Progressive Web Applications (PWAs) are on the rise in contemporary web world. Why? Well, PWAs are web apps that uses modern web capabilities to deliver an app-like experience to its users. It can be installed on desktop and mobile, they work offline, and have some nice features like push notifications and so much more.
While dedicated a separate in-depth blog post on building Blazor PWA, we wanted to share with you the new financial demo app built as Blazor WebAssembly PWA.
Setting up a new Blazor project for VS Code users is now much more straightforward – just follow the newly released project wizard and it will do the work for you.