Ignite UI for Blazor – The Official Release

Brian Lagunas / Tuesday, September 29, 2020

Today is the day that you have all been waiting for.  Its the day that Infragistics changes the lives of Microsoft Blazor developers all around the world. Its the day we release Ignite UI for Blazor!  Starting right now build rich Blazor WASM (web assembly) and Blazor Server (ASP.NET Core) applications using your existing C# skills and eliminate the need to use JavaScript.

Don't wait any longer!

Download Infragistics Ignite UI for Blazor

What exactly do you get in the official release of Ignite UI for Blazor? Well, let's find out.

Bullet Graph

The bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.

 Blazor Bullet Graph example

Category Chart

This touch-enabled charting control makes visualizing category data a breeze. Built on top of a high-performing and feature-rich data chart, the category chart filters the complexities of data visualization into a simplified API that anyone can use.

 Blazor category chart

Charts

Build expressive dashboards, apply deep analytics, and render millions of data points with our real-time Blazor charts. Including the most asked for business, financial and scientific charts, Ignite UI for Blazor fulfills your fintech and business needs.

 Blazor chart

Chart Types

  • Area
  • Bar Chart
  • Column
  • Line
  • Point
  • Point Chart
  • Point Chart
  • Polar Area Chart
  • Polar Line Chart
  • Polar Scatter Chart
  • Polar Scatter Chart
  • Polar Spline Area Chart
  • Polar Spline Chart
  • Radial Area Chart
  • Radial Column Chart
  • Radial Line Chart
  • Range Area Chart
  • Range Column Chart
  • Scatter Area Chart
  • Scatter Bubble Chart
  • Scatter Bubble Chart
  • Scatter Contour Chart
  • Scatter Line Chart
  • Scatter Marker Chart
  • Scatter Marker Chart
  • Scatter Polygon Chart
  • Scatter Polyline Chart
  • Scatter Spline Chart
  • Spark Area
  • Spark Line
  • Spark Win Loss
  • Spline
  • Spline Area Chart
  • Spline Chart
  • SplineArea
  • Stacked 100 Area Chart
  • Stacked 100 Bar Chart
  • Stacked 100 Column Chart
  • Stacked 100 Line Chart
  • Stacked 100 Spline Area Chart
  • Stacked 100 Spline Chart
  • Stacked Area Chart
  • Stacked Bar Chart
  • Stacked Column Chart
  • Stacked Line Chart
  • Stacked Spline Area Chart
  • Stacked Spline Chart
  • Step Area Chart
  • Step Line Chart
  • StepArea
  • StepLine
  • Waterfall
  • Waterfall Chart

As you can see, there is a Blazor chart for every scenario you can think of! The Blazor chart is a modular design of axis, markers, series, legend, and annotation layers. With this data chart, you can create multiple instances of these visual elements in the same chart plot area to create composite chart views.

Chart Features

Your charts need to be fast, and they need to be all-encompassing. With every Blazor chart type – bar, line, column, pie, area, stacked series, and more – you can visualize your data the way you prefer.

Here is just a few of the interactive features you get with the chart:

  • Crosshairs
  • Annotations
  • Callouts
  • Final Values
  • Markers (10 types)
  • Tooltips
  • Series Highlighting
  • Legend
  • Time Series Chart (TimeXAxis)

Blazor Data Grid

The Ignite UI for Blazor Data Grid is a tabular grid component that allows you to quickly bind and display your data with little coding or configuration. Features of the Blazor data grid include inline editing, filtering, sorting, templates, row selection, row grouping, row pinning and movable columns and more. When we designed the core grid component, we optimized for live, streaming data, with the ability to handle unlimited data set size in number of rows or columns. With a large portion of our customer base being financial services, these are the most important attributes – load time, scroll time, unlimited rows, unlimited columns – with buttery-smooth scrolling under heavy loads. At the same time, many of you are coming from feature-packed enterprise line-of-business apps. We are delivering the features you need as well.

 Blazor data grid example

Here is a list of the Blazor data grid features we are shipping today.

  • Inline editing
  • Batch editing
  • Virtualized Row / Columns
  • Load on Demand Data
  • Column Sorting (Single / Multi)
  • Column Resizing
  • Column Moving
  • Column Summaries
  • Column Pinning
  • Column Chooser
  • Column Hiding
  • Column Filtering UI (Excel Style Filtering)
  • Column Grouping (Groups w/ Sticky Headers / Outlook Grouping)
  • Cell Selection
  • Cell Activation
  • Cell Range Selection
  • Row Selection (Single / Multi)
  • Row Pinning
  • Grid Toolbar (So you add custom buttons, like Export, Show / Hide, etc.)

One of the cooler features, which covers most of the interactive UX that your users expect, is the Column Options dialog. When you hover with the mouse over a column header, you will see a hamburger menu on every column header (by default) which triggers the column options dialog in the Blazor grid control, which looks like this:

 Blazor grid demo

Doughnut Chart

Display your data with multiple series using this rich Doughnut Chart. Similar to a Pie Chart, the Doughnut Chart shows categorical statistics expressed in percentages. With its hollow center, it's best for displaying multiple series using concentric rings where each ring represents a data series. Bind easily to data, configure the inner radius, display exploded slices, customize themes, and more with this well-rounded control.

 Blazor Doughnut Chart

Financial Chart

This lightweight, high-performance chart is easy to configure to display mission-critical financial data using a simple and intuitive API. Just bind your data, and the chart takes care of everything else. The Blazor Financial Chart component is part of Infragistics’ best-in-breed UI for building high-performance, high-volume financial services, and capital market data applications.

 Blazor Financial Chart example

 Blazor Linear Gauge

Make data visualizations and dashboards more engaging with a Linear Gauge that shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and highly configurable to present dashboards.

 Blazor Linear Gauge

Geographic Map

Create highly-detailed, thematic geographical maps using an innovative feature set that includes: custom shape templates, the ability to render polylines and polyshapes, Map Progression, Scatter Area Plots, an intuitive Overview Pane, and more.

 Blazor Geographic Map

Pie Chart

Create simple or exploded pie charts. Customize the threshold for inclusion in the Other category, and display text labels and images that can be within or outside of the pie in a manner that avoids overlap. Users can click or drill down to view underlying data, explode out a section of the pie, and find information via tooltips.

 Blazor pie chart example

Radial Gauge

Radial Gauge makes your data visualizations and dashboards more engaging and shows off KPIs with rich style and interactivity. The gauges are powerful, easy to use, and configurable to present dashboards capable of displaying clocks, industrial panels, automotive dashboards, and aircraft cockpits.

 Blazor radial gauge

Sparkline

The Sparkline control is a data-intense, design-simple graphic that allows end users to spot trends, variations, and patterns in data in a clear and compact representation.

 Sparkline

 Blazor Tree Map

Add powerful Blazor Treemap visualizations of high-volumes of hierarchical (tree-structured) data as a set of nested nodes. The Blazor Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a Treemap node, which is then tiled with smaller nodes representing sub-branches. Treemaps are great for quick analysis of large data sets and can deliver insights really quickly in very compact area.

Here is the Blazor Treemap showing off drilldown, along with some of the different algorithms we have supplied for customizing the Treemap layout.

 Blazor Tree map

Multi-Column Combo Box (Preview)

Lastly, we have the new Multi-Column Combo Box. This component is unique in that it's a combo box that visualizes large amounts of data in a data grid embedded in the dropdown. It supports features such as filtering with auto-suggest, a material-based label, defining columns, controlling column header visibility, sorting, and more. As noted above, this control is being released as a Preview component because there are just a few features and behaviors we'd like to get in before calling it a solid v1. Look for an update to this component very soon.

  Blazor Multi-Column Combo Box

Dock Manager - Coming Soon

Last but not least, is the world's first ever Blazor Dock Manager. 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 types 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 Dock Manager

Unfortunately, for this initial release, we were not able to finish the Blazor Dock Manager component. Which is why there is a "Coming Soon" in the title of this section. We're still working on it as we speak. As soon as we have completed the Blazor Dock Manager component, we will release it to you immediately.

However, if you really want to use a dock manager in your Blazor apps, you can still do it. You'll just have to use our Ignite UI for Web Component Dock Manager instead. Just follow the steps outlined in my latest blog post on "Using the Ignite UI for Web Components Dock Manager in Blazor". 

Let’s Wrap this Baby Up!

I hope you are as excited as I am with today's release of Ignite UI for Blazor.  We have a long term plan for supporting your Blazor application needs, and we are committed to bringing you the markets best, highest performing, and most beautiful Blazor controls period. But in order to accomplish this, we need your help. 

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 @brianlagunasYou 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.