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.
The addition of the Telerik UI for Blazor Editor component is here to let your users create rich text and visual documents without ever leaving the confines of your app. Generate HTML files which you can present elsewhere in the app or export them as more standard document types to be printed or used in other software packages.
The Telerik UI for Blazor TreeList component complements your favorite Grid control – it too is a list container but one which displays the hierarchical relationships of the underlying data. For example, an expense report for a business trip might contain things like plane tickets, taxi and parking, which all should be nested inside a general Travel category. The TreeList is the perfect tool for that job.
Users instinctively know that when they need to access advanced options, they can right click on an UI element. Making context menus to live up to that expectation is now easy thanks to the new Telerik UI for Blazor Context menu control.
A crucial element of many financial applications is the need to display in detail the deviation of a financial instrument over some period of time. By adding the Telerik UI for Blazor Stock Chart component, we aim to ease the work of all of our FinTech developers.
Right-clicking with a mouse or long-holding on mobile will result in the OnRowContextMenu event being fired. Handling this event is best combined with the ContextMenu component to show any relevant commands.
When a user expands or collapses a row, the Grid will broadcast the OnRowExpand and OnRowCollapse events respectively. These can be used to display or remove any additional commands / details about the data (e.g. an expanded row might be used as a datapoint on a Chart).
It is now possible to use manual data management with OnRead with grouped data! When data is grouped, it can no longer be represented with a flat list of items as each group acts as a container for several items. For that reason, previously it was impossible to read from the grid using OnRead but that’s no longer the case. Check the demo for an example on how to achieve it.
Two new chart types were introduced in this release – the Candlestick and the OHLC (open-high-low-close). Both are invaluable financial helpers as they display the price of a financial instrument at its highest, lowest, when the market was opened and when it closed.
We have enhanced menu items with the ability to mark some of them as separators. Separators only render as a single line and will discard any text icons, children or navigable link. Use them to separate logically grouped sequences of menu items.
Menu items which cannot be used in the current state of the application can now be disabled. Disabled items will still render but the user will not be able to interact with them.
The newly added Telerik UI for Blazor ToggleButton is the perfect tools when you want to provide users with capabilities of flipping a switch in your app – whether it’s muting/unmuting the volume in a media player or toggling between dark and light mode, the ToggleButton looks sleek and is highly customizable to fit any page. See it in action on the demo page.
The Telerik UI for Blazor ButtonGroup component takes the other new component – the ToggleButton and expands it. Manage multiple toggle buttons to implement groups exclusive options like radio buttons. Or make them non-exclusive, for example to implement Bold, Italic and Underline in a text editor.
Whenever a row in the Grid is clicked or double-clicked, the corresponding event is fired and you can handle it to do interesting things like showing a detailed view of that row in a separate control or fetching/sending more data about this particular item to the server. Read the full guide in the docs.
The Telerik UI for Blazor Grid can also use data from a weakly-typed ExpandoObject. This is often the case when connecting to a backend based on older technologies and usually makes integration much harder the Grid takes care of it.
The Telerik UI for Blazor Grid can also use data from a DataTable object. This makes it easier to connect with legacy code which is still using DataTables – like in this example.
Custom filter rows and Custom filter menus provide you with the ability to replace the built-in filters on top of each column in the Grid with a more user-friendly filter for your specific case. Discover how can you use both in the filter row demo and in the filter menu demo.
The Telerik UI for Blazor Chart component now exposes a Click event, triggered when the user clicks on the chart. Handling this event opens the door for new interactions like showing detailed info about clicked chart element like in our sample app.
Users can now hover over the Telerik UI for Blazor Chart to get more detailed information about a particular data point on it and developers can customize the tooltip to show whatever relevant information is necessary.
The OnItemClick and SelectedItemsChanged events will now fire to let you react to more user actions and provide appropriate results.
Nodes in the TreeView can be Selected so they can be processed in some way – e.g. selecting an item in TreeView displaying file and folder structure can open the file contents in a separate component like in this example.
There are several new minor parameters have been added to Telerik UI for Blazor TextBox component like control over AutoComplete, InputMode, PlaceHolder and TabIndex.
The Telerik UI for Blazor Drawer component is a navigation component which provides a dismissive panel. It is the perfect choice for when you need to hide unnecessary details in your menus but still give users the option to bring them back when they need them. Customize it to your heart’s content and enable any of the various operation modes to achieve what you need.
The new DateRangePicker component for Telerik UI for Blazor allows users to pick date ranges. The range can be selected from a calendar popup or edited via start/end date inputs. Both options work in sync so users can use either. The control provides related events and the ability to exclude certain dates from selection.
A new selection mode was added to the Telerik UI for Blazor Calendar component. Users can now select range of dates in Blazor applications to specify time intervals for whatever needs your application might have.
We now support exporting Grid data directly to Excel with a single click. We strived to preserve everything so the generated file will have the same filtering, sorting, paging, grouping, column order and size as the original Grid component.
We also released a Visual Studio Extension. The wizard streamlines interactions with the Telerik UI for Blazor suite and makes setting up projects easy – convert your existing Blazor project to a Telerik UI for Blazor-enabled project in seconds.
Mac users, rejoice! You can now install the Telerik UI for Blazor suite via the new Mac installer.
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.
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.
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.
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)
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.
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 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.
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 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.
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 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.
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.
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.
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.