Today we shipped a new version of Telerik UI for Blazor and we are happy to introduce four new Blazor components as well as Grid, Chart and Menu enhancements! You can now take advantage of the newly released Editor, TreeList, Stock Chart and Context Menu, as well as new exposed Grid events to give you flexibility to apply custom logic when interacting with data rows in Blazor applications!Let’s explore the 2.16.0 release content and see in detail the new goodies you can incorporate in your Blazor Server and WebAssembly apps!
The new HTML Editor Component enables users to create rich text content and delivers out-of-the box features for text management such as creating, editing, and formatting text, paragraphs, lists, and other HTML elements. In addition to the built-in toolset it also allows you to create custom commands and easily integrate them into its Toolbar.
Telerik UI for Blazor Editor Component
The various Editor command buttons are organized in a Toolbar and include various text formatting options such as font family, font size and style, text alignment, creating lists, tables, inserting hyperlinks and images and more! To ease the configuration of the Toolbar you have two toolset config options to choose from:
The Editor component comes with multiple built-in tools grouped into the following categories:
You can invoke the built-in Editor toolset from outside the component or from custom tools, by referencing the component and calling its ExecuteAsync method.
The Editor comes with two configuration modes that affect the way the component content is styled:
The Editor component exposes the ValueChanged event to let you easily handle Editor content in Blazor apps. The event fires after a user changes the content and the update interval has elapsed (100ms by default), and then provides you with the updated content.
The Tree List component is the perfect match for visualizing hierarchical data in a tabular fashion and is definitely one of the release highlights. It comes with many built-in functionalities like data binding, item selection, several ways for data editing, sorting, filtering, paging, multiple column options, templates toolbar, loading data on demand and more! In fact, the component is so feature-rich that it deserves a separate blog post, however in the sections below we’ll try to highlight its key capabilities.
The Blazor TreeList can be bound to flat and hierarchical data, plus you have the benefit of loading data on demand for cases when you work with large volume of data records and want to optimize performance.
The TreeList supports the following modes of row selection:
Telerik UI for Blazor TreeList Multiple Rows Selection
The TreeList component offers built-in paging capability that can be enabled with a couple of property settings to enable paging and provide the number of records per page.
Similarly, tree list sorting can also easily be turned on by setting a single param to true. This would allow users to click on column headers and sort the data according to the column's data type, with an arrow indicator in the column title displaying the sorting direction or disable sorting for columns that make exception to the general rule.
The TreeList comes with a ton of properties on its data bound columns:
Telerik UI for Blazor TreeList Reorder Columns
The command column of a TreeList allows you to initiate inline or popup editing, or to execute your own commands. Examples on how to further add command columns for Editing, Saving, Cancelling and custom command for TreeList can be found in the documentation article.
In case you need to generate a TreeList column for each public property of your data model, you can benefit greatly from using the TreeList AutoGenerated column option. This would let you directly map your model properties to columns by setting the AutoGenerateColumns parameter to true, saving you time from defining each column manually.
When working with data sets containing large number of columns in your Blazor applications, there are cases when you may want to improve the TreeList performance.
Telerik UI for Blazor TreeList Column Virtualization
Using the TreeList Column virtualization feature you can easily boost the speed and responsiveness of data interaction, since only columns and their corresponding data from the currently visible viewport will be rendered.
The TreeList component offers two built-in options for filtering of its data:
Telerik UI for Blazor TreeList Filter Row
Telerik UI for Blazor TreeList Filter Menu
There are multiple ways to implement editing of data, and depending on your scenario you can pick of the available options:
Telerik UI for Blazor TreeList Inline Editing
Telerik UI for Blazor TreeList InCell Editing
The TreeList can be completely customized using one of the available templates, enabling you to specify the rending of:
The Tree List component comes with a neat toolbar in its header that lets you organize in a nice layout the built-in commands (such as Add Item) and any custom commands which you can add to it as buttons. You can further add your own HTML and components to create a more complex Toolbar layout to match your business needs.
The Tree List control has built-in localization and globalization support. Thus, it is no effort to translate UI texts into any language and automatically apply the formatting of numeric and date input fields based on a specific culture in your Blazor app.
The new Stock Chart component will let you visualize the movement of financial units such as stock/market prices for specific date and—open and close rates, the various changes that have happened to the price during the day, minimum and maximum values reached during the day, and the trends of those prices over time.
You can use a variety of chart types and control all aspects of the chart's appearance—from colors and fonts, to paddings, margins, custom tooltips and templates. In addition to that the Telerik Stock Chart provides a Navigator to widen or shorten the defined period of time and zoom in on particular part of the chart, and a crosshair feature that makes available the precise values in data-dense charts.
The Stock Chart is a data-bound component. All you need to do is provide a List of models, that contain both data point values and x-axis dates to the Data property of chart series, and set a few chart series properties to the corresponding model with values.
The Stock Chart component supports several different chart series to cover any app scenario you may have—Area, Column, Candlestick, Line and OHLC (open-high-low-close). Code examples and usage for all of them can be found Telerik UI for Blazor documentation.
The Stock Chart Navigator allows the user to scroll and zoom through data over a certain period of time. The Navigator can be used will all types of stock charts and allows customizations such as setting a specific range of the Navigation upon initialization, slider direction, label customizations and on mouse wheel rotation. You can also choose what type of series it will use to visualize the overall trend.
The Stock Chart has another useful feature, the so-called Crosshairs, which represents perpendicular lines to the axes and allow app users to view the exact value of a point at the current cursor position. You can customize their color, opacity and width via the chart category axis settings.
The OnSeriesClick click event gives you further flexibility as it exposes full details related to a chart data point and lets you implement custom logic in response to a user click.
The ContextMenu component lets you provide users with an easily accessible shortcut menu of frequently used commands in Blazor applications. It comes with multiple built-in features such as data binding, styling, nesting items, customization with templates, keyboard navigation, and seamless integration with other UI components such as the Grid.
The ContextMenu component can be bound to either:
Еach context menu item property from the list: Id, ParentId, HasChildren, Items, Text, ImageURL/Icon/ImageClass, URL, Separator, Disabled can be set through the corresponding fields in their data binding.
You can put an image, icon class or a font icon for each item in the Context Menu to illustrate its purpose for your end users.
You can easily customize the ContextMenu and its items appearance and behavior using one of the template options:
One of the most common scenarios for integration of the Context menu component would be with a Telerik Blazor Grid. To do so, you will simply need to use the Grid's OnRowContextMenu event to get the current row model and show the context menu, then use the context menu's OnClick event to handle the desired operation. A code example with such an integration can be found in the official documentation.
Furthermore, the component has a simple, yet powerful parameter called Selector that makes the task of attaching the context menu to one or more targets easy. By using the ShowAsync method, you can also adjust the ContextMenu content—i.e. which menu items should be displayed/active based on which element the user clicked. Check out the code sample showing how to change ContextMenu items based on the target data.
Besides being used as a shortcut for commands, the ContextMenu items can also be used for navigation between the different pages in your Blazor application. The component can generate the needed links for you through its UrlField when data binding. All you have to do is provide a collection of models that describe the pages you want the user to navigate to and populate its UrlField with the corresponding data from the model (alternatively you can provide a Url property in the model).
The OnClick event fires when the user clicks or taps on a context menu item and it is suitable for cases when to react to user selection without using navigation to load new content automatically.
With each release of Telerik UI for Blazor, we try to give love and extend the functionalities of the Grid. In the current release we worked on expanding the possibilities from a programming point of view and exposed several new events and features, so you have control over user interaction with the Grid and its custom data operations.
When you use the Grid built-in grouping or other out-of-the box feature, it hides the complexity of the internally performed data operations from you. Still there are cases when you need to perform grouping yourself in code (and/or on the server-side service), and you can now use the OnRead event with grouping. For a detailed explanation on what you need to take into consideration, as well as some data preparation that needs to take place, check out the example on how to set up the grid to use grouping with manual data source operations, and how to use the Telerik DataSource extensions to prepare grouped data.
The OnRowContextMenu event fires as a response to:
The Grid OnRowContextMenu event is used to integrate the Context menu with Grid Rows. Its event handler receives a GridRowClickEventArgs object which provides the model of the clicked row and exposes an EventArgs property. You can use the event arguments to determine the keyboard key or the position of the mouse cursor when the user took an action.
OHLC and Candlestick are price charts that display the high, low, open, and closing prices of a security, derivative or price for a specific period. Both are widely used by financial analysts or traders and helps them easily determine if closing price was higher or lower than the opening price.
Though they the two chart types show the same amount of information, they do it in a slightly different way. While OHLC charts show the open and close via left and right facing horizontal lines, candlesticks show the open and close via a real body.
Telerik UI for Blazor OHLC Chart
Last but not least in this release we added two addition features to the Menu component:
We are excited that the Telerik UI for Blazor demos have brand new fresh look! As the number of components and related demos and code examples continuously grow, we redesigned our demos, so you can easily navigate and search specific features. Plus, we gave them brand new fancy styling.
Updated Telerik UI for Blazor Demos Hub Page
To see in action all that’s mentioned in the release blog post, head over to the Telerik UI for Blazor page, download a free trial of Telerik UI for Blazor 2.16.0, or if you are an active license holder you can grab the latest and greatest from the “Your Account” page or update your NuGet Telerik.UI.for.Blazor package reference to version 2.16.0. directly in your Blazor solutions.
As always, we are thankful to you for being involved and helping us grow and making Telerik UI for Blazor bigger and better. Keep telling us what’s working well, what needs to improve and which component or feature you’d like to see next in the dedicated Blazor feedback portal or in the comment section below!
From the entire Telerik UI for Blazor team at Progress, we thank you for your continuous support
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!