Ignite UI for Blazor - What’s New in 21.2

Brian Lagunas / Thursday, December 16, 2021

I’m sorry but you need to tell your kids Santa Claus isn’t coming this year. Why you ask? Well, it’s because Santa, and all his elves, are going to be too busy building mind blowing web applications using today’s release of Infragistics Ignite UI for Blazor 21.2.

Today’s Ignite UI for Blazor 21.2 release is jam-packed with goodies for everyone to enjoy. Besides adding four major features to the Blazor data grid, we have also added 17 brand new components to the product.

Now, let’s turn on the holiday music and unwrap this gift of awesomeness!

.NET 6 Support

As with every release of .NET since 1.0, Infragistics delivers with updated features, capabilities and builds so you can take advantage of the latest and greatest version of .NET. With .NET 6, this is no different. Today's release of Ignite UI for Blazor 21.2 now has full support for .NET 6.

Blazor Grid

It’s no secret that the Blazor grid is by far the most popular component in the Ignite UI for Blazor product offering. Easy to use, exploding with performance, and packed with features. It’s no wonder why the Ignite UI for Blazor grid is the go-to component for all our Blazor customers. In this latest release of Ignite UI for Blazor 21.2, we wanted to make sure we focused on the most important features that have the biggest impact on a grids ability to provide value to an end-user.

Filter Row

While the Ignite UI for Blazor data grid has always supported filtering, the filter experience was limited to the column options dialog with the excel style filtering feature. While this works, it’s not always the most optimal filtering experience. For this reason, we have added a brand-new filter row to the data grid component. You can now provide filters inline making for a much better end-user filtering experience. Not only can you simply filter a specific column, but you can also choose the filter operand for that filter such as start-with, ends with, and contains just to name a few. Not happy with the built-in filter operands? No problem, you can build your own custom filter operands that will show in the data grids new filter row.

 Blazor Grid row filtering example

Interactive GroupBy

Probably the most important on my list, was the ability to group columns by a simple drag and drop operation. Before today’s Ignite UI for Blazor 21.2 release, you had to use the column options dialog to group columns. Unfortunately, that isn’t the best experience and becomes very confusing at times. However, starting today you can now drag and drop any column header into the brand-new data grid GroupBy Header to automatically apply your groupings. It’s so easy and so smooth.

 Blazor Grid interactive groupby

Cell Merging

Cell merging is a common feature in Microsoft Excel that allows you to deliver data clarity and avoid duplication by merging neighboring data cells across different rows whenever they display matching values.  While Excel made this feature famous, it is now a very common request in the context of showing data in a data grid.  With the release of Infragistics Ignite UI for Blazor, the data grid has full support for cell merging.

 Blazor Grid cell merging

Save/Load Layout

When your end-users move, sort, filter, pin, resizes a column, adds a summary, or groups the data grid at runtime, they would often like to save the state of their changes to be loaded later. As of today, they can! You can now save the layout of the Blazor data grid to json using the DataGrid.SaveLayout method and then provide the ability to load any saved layout back into the data grid using the DataGrid.LoadLayout method.

Blazor Avatar

The Ignite UI for Blazor Avatar component helps adding initials, images, or material icons to your application.

 Blazor Avatar example

Blazor Badge

The Ignite UI for Blazor Badge is a component used in conjunction with avatars, navigation menus, or other components in an application when a visual notification is needed. Badges are usually designed as icons with a predefined style to communicate information, success, warnings, or errors.

 Blazor Badge example

Blazor Button

he Ignite UI for Blazor Button directive is intended to turn any button, span, div, or anchor element into a fully functional button.

 Blazor Button example

Blazor Calendar

The Ignite UI for Blazor Calendar component provides an easy and intuitive ways to display date information. Users can choose from three different selection modes - single selection, multi selection or range selection.

 Blazor Calendar

Blazor Card

The Ignite UI for Blazor Card component displays text, images, icons, and buttons in a visually rich presentation that can serve as an entry point to more detailed information.

 Blazor Card

Blazor Checkbox

The Ignite UI for Blazor Checkbox component is a selection control that allows users to make a binary choice for a certain condition. It behaves similarly to the native browser checkbox.

 Blazor Checkbox

Blazor Icon

The Ignite UI for Blazor Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.

 Blazor Icon

Blazor Input

The Ignite UI for Blazor Input is used to create single-line or multi-line text elements. They help to cover common scenarios when dealing with form inputs.

 Blazor Input example

Blazor List

The List component is extremely useful when presenting a group of items. You can create a simple list of textual items, or a more complex one, containing an array of different layout elements. The Ignite UI for Blazor List component displays rows of items and supports one or more header items. Each list item is completely templatable and will support any valid HTML.

 Blazor List example

Blazor Navigation Bar

The Ignite UI for Blazor Navigation Bar component informs the user of their current position in an app and helps them move back (much like the “back” button in a browser). The Navigation Bar can also provide links to quick actions such as search or favorite, helping users navigate smoothly through an application without trying to move to invalid routes or states. The bar sits at the top of the container it is placed in.

 Blazor Navigation Bar

Blazor Navigation Drawer

The Ignite UI for Blazor Navigation Drawer component is a side navigation container. It can rest above content and slide in/out of view or be pinned to expand/collapse within the content. A mini version provides quick access to navigation even when closed. The Navigation Drawer features responsive mode selection and touch gestures. Content is completely customizable and can make use of default menu item styling.

 Blazor Navigation Drawer

Blazor Radio and Radio Group

The Ignite UI for Blazor Radio Button and Radio Group components allow the user to select a single option from an available set of options that are listed side by side.

 Blazor Radio and Radio Group

Blazor Ripple

The Ignite UI for Blazor Ripple component creates an animation in response to a touch or a mouse click.

Blazor Ripple

Blazor Switch

The Ignite UI for Blazor Switch component functions like a checkbox but explicitly represents boolean on and off states. Clicking the Switch component will toggle the value of the component from an “on” state (boolean true)  to an “off” state (boolean false).

 Blazor Switch

Let’s Wrap this Baby Up!

If you have ideas about new features we should bring to our components, important issues we need to fix, or even brand new components you’d like us to introduce, please let us know by posting them on our Product Ideas website. Follow and engage with us on Twitter via @infragistics. You can also follow and contact me directly on Twitter at @brianlagunas. You can also subscribe to my YouTube channel to be notified of new videos, and follow me on Twitch to watch me stream live.  Also make sure to connect with our various teams via our Community Forums where you can interact with Infragistics engineers and other customers.  

Lastly, when you do build something cool with our controls, please make sure to let us know.