The new Telerik UI for Blazor 2.18.0 comes with five new native components and many enhanced features to the Grid, TreeList, Scheduler and more. Check out everything that's new.
Hey Developer Folks! Exciting news today as we just released Telerik UI for Blazor 2.18.0, with an abundance of new native components including Masked Textbox, Text Area, Progress Bar, ChunkProgress Bar, and Radio Group, plus many new cool component features and enhancements! The Grid and TreeList components now allow easy column formatting, cell and row conditional styling and new events. The Scheduler component got enhanced with an option to render custom content and apply custom styling to its appointments, and on top of it all of Telerik UI for Blazor is now compatible with .NET 5.0 RC2!
Let’s explore the 2.18.0 release content and see in detail the new goodies you can incorporate in your Blazor Server and WebAssembly apps.
The Telerik Masked TextBox component for Blazor allows you to get user input while ensuring the valid entry of standard formats, such as phone number, post code, social security number, credit card number, and also provides an option for custom formats such as company specific product code. The masked input provides multiple out-of-the box features related to configuring and customizing its visualization and behavior.
Telerik UI for Blazor Masked Textbox Component
The Mask part of the Telerik component defines what user input is allowed and at which positions. It includes special built-in Rules that it recognizes as special characters when encountered in the Mask and determines how the user writes their input. In addition to the mask rules, you can also specify static symbols in the mask pattern known as literals. You can use them to show a more user-friendly format of the input, or to predefine some of the input for your user.
The Masked Textbox allows full customization by further providing options to specify literal, prompt character (defaults to underscore _ and provide hints to the user before they start typing), CSS class, placeholder, tab index and more.
Telerik UI for Blazor Masked Textbox Customizations
You have options to specify whether the masked textbox Label should be rendered above the masked input or as a floating label using the MaskOnFocus parameter. If MaskOnFocus is set to false (default), the Label will always be above the input. When MaskOnFocus is set to true in combination with setting Label or Placeholder param values, you can easily achieve floating labels or placeholder interactivity.
Telerik UI for Blazor Masked Textbox Floating Label
The Telerik MaskedTextbox Blazor component exposes two events to let you handle and take actions based user input Blazor apps:
The Telerik Blazor Text Area component is a nice addition to every application that requires wider text input. It allows the user to provide multiline text and is suitable for information such as address, short description, notes, comments etc. The TextArea component provides built-in features for auto resizing, floating label and events to respond to user actions.
Telerik UI for Blazor Text Area Component
Using the AutoSize parameter, the Telerik TextArea UI component can be easily configured to automatically resize its height during keyboard input.
The ТextArea component provides an out-of-the box floating label—a placeholder with a floating animation upwards when the input gets focus. For cases when you prefer to use a standard label attached to the control, you can use the text area Id parameter and attach your own <label> tag.
Telerik UI for Blazor Text Area Floating Label
In addition to the features mentioned above, there are many more text area configuration options you can take advantage of when using the component in your Blazor apps. These include defining placeholder, tab index, CSS class, title, width, enabling auto-complete and more.
The Telerik TextArea component exposes two events to let you handle and take actions based user input Blazor apps:
The Telerik ProgressBar component allows you to visually indicate the progress of operations in Blazor applications. The progress bar covers both scenarios: when you need to display what portion of the operation is completed or when its end is unknown to make the indicator indeterminate. It comes with multiple built-in features such as horizontal and vertical orientation, animations and options for label customization.
Telerik UI for Blazor Progress Bar Component
Indicating the visual progress of a task is complemented by adding a label alongside the visualization. As the design requirements may vary greatly from case to case, we ensured you have many handy options to let you easily set the label position, control its visibility or place custom content in it. The progress bar label includes Visible and Position parameters, as well as Templates to let you easily achieve the desired progress look in your Blazor app.
Telerik UI for Blazor Progress Bar Labels Position
The progress bar component provides options for horizontal and vertical orientation for its progress status via its Orientation config option.
Telerik UI for Blazor Progress Bar Vertical Orientation
For operations when the estimated time of completion is unknown, or the progress can’t be represented as a specific value you can use the Indeterminate state of the ProgressBar. When setting the Indeterminate parameter to true, the ProgressBar is filled with a flowing motion animation to showcase that the task is running.
Telerik UI for Blazor ProgressBar Indeterminate State
To further expand the options for visual indication of the completion level of tasks, we included a separate Chunk Progress bar component that is a perfect fit for operations with a predefined number of steps (chunks). The component includes vertical and horizontal modes, as well as indeterminate state.
Telerik UI for Blazor Chunk Progress Bar Component
Just like the previously mentioned progress bar, here we have included two modes – horizontal and vertical chunk progress modes.
Telerik UI for Blazor Chunk Progress Bar Vertical Orientation
For operations when the estimated time of completion is unknown, or the progress can’t be represented as a specific value you can use the Indeterminate state of the ChunkProgressBar.
The Blazor Radio Button Group component allows the user to select a single option from a predefined list of choices represented by radio buttons. The RadioGroup component can be bound to primitive types or data models and customized by specifying layout order and label position. It comes with built-in keyboard navigation, allowing users to navigate between radio buttons and selecting options using just the keyboard.
Telerik UI for Blazor Radio Group Component
Depending on the application scenario, you can render the list of options in the RadioGroup component in a vertical or in a horizontal layout (defaults to vertical), and further define the labels position before or after the radio buttons (defaults to after the buttons). Both radio button group customizations can be easily done using the parameters Layout and LabelPosition.
Telerik UI for Blazor Radio Group Label Position
Again, with a simple parameter (Enabled) you can enable or disable the entire component.
Telerik UI for Blazor Radio Group—Disabled State
The Telerik RadioGroup UI component exposes two events to let you handle clicks and selection in Blazor apps: The standard ValueChanged and an OnChange event that lets you use two-way binding.
The Blazor Grid and TreeList components a new column DisplayFormat parameter to let you easily set a C# format string, so that it renders the values with the corresponding styling according to the current culture of the thread.
In the screenshot below, you can see the result of Telerik Grid Column DisplayFormat parameter for the Price column set to C and applied currency according to the current culture.
Check out more examples on how to apply column formatting in Blazor TreeList using the DisplayFormat parameter in the product documentation.
With the 2.18.0 release of Telerik UI for Blazor, applying conditional row and cell formatting for the Grid and TreeList has been significantly simplified through the OnRowRender and OnCellRender events.
The OnCellRender fires upon the rendering of the Grid data cells. It receives an argument of type GridCellRenderEventArgs and exposes the Item, Value and Class fields (the same is valid for TreeList OnCellRender event ):
The OnRowRender Grid event fires upon the rendering of the Grid rows. It receives an argument of type GridRowRenderEventArgs and exposes the Item and Class objects (the OnRowRender TreeList event is similar):
Telerik UI for Blazor Grid Formatting Attribute and Cell Formatting
Telerik UI for Blazor TreeList Formatting Attribute and Cell Formatting
The new Telerik Blazor TreeList State Management feature will enable you to save, load and change all TreeList user-configurable elements: paging, sorting, filtering, column order, data grouping and more. Further flexibility of your application logic is provided by the tree list events OnStateInit and OnStateChanged, and the methods SetState and GetState.
Telerik UI for Blazor TreeList State Management
You can programmatically set different aspects of the tree list from code, enable users to customize and save the way data is structured and visualized, or simply let them continue where they left off.
Check out the TreeList component persist state documentation article for further reference and more examples including how to start editing or inserting items, or how to get the column settings.
The Telerik UI for Blazor Scheduler just got fancier with its templating option, which lets you render custom contents for its appointments. Using the Scheduler templates you can display any type of content within each appointment, such as icons, buttons, start and end time, and custom fields. Scheduler appointment templates work perfectly alongside other built-in appointment features—such as drag and resize handles, delete icon, arrows indicating if the appointment spans more than a day.
You have two scheduler templating options to choose from:
To further customize the appointments appearance, you can use the OnItemRender event. It fires once for every appointment, when it is going to be rendered in the scheduler, including all-day appointments that span several days/slots, and lets you set the class that is rendered on the appointment element.
Telerik UI for Blazor Scheduler Appointment Templates
The new AutoClose parameter lets you choose the selection mode of the MultiSelect component. When set to true (the default) the dropdown list containing the items will automatically close after each user selection, otherwise the dropdown list will stay open until the user clicks elsewhere and focus is changed.
Telerik UI for Blazor Multiple Selection and AutoClose
We are happy to announce that Telerik UI for Blazor 2.18 release is compatible with .NET 5.0 Release Candidate 2, and our goal is to provide full compatibility with the official release of .NET 5 later in November.
Head over to the Telerik UI for Blazor page, download a free trial of Telerik UI for Blazor 2.18.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.18.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!
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!