Over the last 5 months, we have been continuing to focus our efforts to grow our Ignite UI for Blazor product. These efforts have produced 10 brand new components, the only Blazor dock manager in existence, new features for the data grid, and major improvements to the UX of our data visualization components which include a new data legend and data tooltip.

Let’s take a moment to discuss all these great new additions to the Ignite UI for Blazor product.

Blazor Dock Manager (Preview)

Let me start this post off by blowing your mind! I am super excited to announce the immediate availability of the brand new Blazor Dock Manager component as a preview.  That’s right! You heard me… it’s a dock manager for Blazor. While we are releasing this brand new Blazor dock manager component with 22.1, please keep in mind this is just a preview. We still have a lot of work to do before we can call it done, but feel free to play with it and start providing your feedback today.

What is a dock manager? Well, if you have ever used Visual Studio, you know exactly what it is. If you haven’t, it’s a component that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The dock manager allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.

Blazor Grid

With each release, the Ignite UI for Blazor Grid component gets better and better. The last few releases included features such as a new filter row, interactive group-by, cell merging, save/load layout, and an improved editing experience. In today's Ignite UI for Blazor 22.1 release, we add another great feature to round out this amazing grid component.

Pagination

Often, developers need to show a lot of data in a grid. Depending on the application requirements there could be 10’s of thousands of rows in the data grid. While the Ignite UI for Blazor Grid component would have no trouble scrolling this amount of data, scrolling may not be the preferred method to navigate this number of rows. Instead, another common approach to navigating this amount of grid data is to use pagination. Also known as a grid pager.

Pagination is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.

In today’s release of Ignite UI for Blazor 22.1, the Grid component now supports paging.

Blazor Data Visualization

Having a data visualization toolset that meets the demands of high-volume, real-time data loads, with a beautiful, interactive experience is critical. Therefore, we have spent a large amount of time improving out chart which includes new defaults for the look and feel of the charts, and new features across our data visualization components.

These new features include:

• Auto-Label Rotation
• Enhanced Margin Computation
• Properties for Label Gaps
• Positioning in Callout Layers
• Style Events
• New Highlighting Series Modes
• Horizontal & Vertical Scrollbars
• Margin Angle Modes
• and more…

Improving the default look and feel for our charts is more than just colors, margins, and paddings. We’re also introducing two brand new components that help bring not only the polish, but also a better end-user experience to our data visualization components: a new Data Legend and Data Tooltip.

Data Legend

The Data Legend is a new component that is similar to the Legend, but it focuses more on showing the values of series, the legend badges, and the series titles. The Data Legend updates the displayed values while moving the mouse inside of the plot area within the Data Chart component. It will remember the last hovered point when your mouse pointer leaves the plot area. The Data Legend exposes an API that allows you to control what is displayed to the user. This includes what information is displayed, what values to show, the formatting to apply to the values, as well as styling that should be used.

This type of legend is very popular in financial and stock trading applications.

Data Tooltip

The Data Tooltip is a new type of tooltip layer that displays detailed information about a series including their values, a legend badge, and a series title. Essentially, this tooltip displays a Data Legend as its content. Therefore, it will have the same styling, formatting, and filtering properties as the Data Legend component.

Blazor Chip

The Web Component Chip component is a small container of information. Chips can contain text, avatars, images, icons, and more. Chips are commonly used as tags, filters, choices, and providing input to an application. The Web Component Chip component is highly customizable and supports selection, removing, as well as adding other components as either a prefix or suffix.

Chip Selection

Chip Removal

Blazor Drop Down

The Ignite UI for Blazor Drop Down is a component, which displays a toggleable list of predefined values and allows users to easily select a single option item with a click. It can be quickly configured to act as a drop-down menu or you can simply use it to deliver more useful visual information by grouping data. With grouping you can use both flat and hierarchical data.

Blazor Mask Input

The Ignite UI for Blazor Mask Input is an enhanced input component that provides an easy and reliable way to collect end-user input. Masks allow you to require input characters, optionally accept input characters, and define the type of character that is expected at a specific position in the Mask Input. By using a mask, you can easily distinguish between a proper and an improper user input value. This means you can validate the input provided by the user and notify the user of any errors. Common masks include phone numbers, credit card numbers, social security numbers, dates, and many more.

Blazor Progress Bar – Linear and Circular

The Ignite UI for Blazor Linear Progress Bar component provides a visual indicator of an application’s process as it changes. This can include processes like loading data from a database, uploading a file, or making a web service call. You can use the Progress Bar to visually inform your end-users about the progress of a long running task or a series of steps. This is commonly done by showing a percentage of the process that increments as it gets closer to completing.

Sometimes, the time to complete a long running task is unknown. To support this scenario, the Progress Bar supports an “Indeterminate” mode. Instead of reporting a specific value of completion, the Progress Bar animation will continue to loop until the process has completed.

Blazor Rating

The Ignite UI for Blazor Rating component is a simple, yet very useful component. The Rating component allows your end-users to select a rating value from a group of visual symbols such as stars. The Rating component is often used to provide insight regarding the opinions and experiences of users for products and services they may have used or purchased.

Blazor Slider and Range Slider

The Ignite UI for Blazor Slider component is a type of input control that allows selecting a value by moving the thumb along a track within a given range of values. The track can be defined as continuous or stepped. The Slider components provides a set of configurable features such as labels, tick marks, tooltips, constraints, and custom styling.

 

 

The Ignite UI for Blazor Range Slider is almost identical to the Slider component. The only difference being that you can select a range of values instead of a single value. Selecting a range of values is done by moving two independent thumbs along a track within a range of given values. One thumb will represent the first value of the selected range, while the second thumb will represent the last value of the selected range.

Blazor Snackbar

The Ignite UI for Blazor Snackbar component is used to show a brief message or notification within the application which may require feedback from the end-user. A common use-case for the Snack Bar component is to inform an end-user that a record has been deleted, and then provide an option to undo the delete operation to restore the record.

Blazor Toast

The Ignite UI for Blazor Toast component is used to display an alert or notification on the current page. Common notifications include system messaging, push notifications, warning messages, information, and other non-interactive notifications. The Toast component is usually shown at the bottom of the screen and disappears automatically after a set period of time. It is important to note that the Toast component cannot be dismissed by the end-user.

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 GitHub repo. 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.  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.