In my previous blog covering the roadmap for all the Infragistics Ultimate products for 2020, I talked about the Ignite UI for Blazor Roadmap, the features you should expect, and our expected ship date for Blazor as well as .NET 5 support, and dates for other major events this year.

* Note that we did ship Angular 10.1 in August, but pushed the Blazor, React and Web Components release to September.

This blog will go into more detail on those controls. In that blog I wrote that when we ship Ignite UI for Blazor, we will sync all the core “translation” frameworks that we ship, which include Blazor, React, Web Components and Xamarin / M.A.U.I. This means that features, API, samples, etc. will be the same across these platforms. 

We will be making available to you a seriously rich toolset, with UI controls and components that are optimized for Client (Web Assembly) and Server Blazor. An important aspect of the Blazor product, Ignite UI for Blazor, is the same codebase as the React and Web Components product, so when we ship you get the benefit of the product being in the market for a while, as well as a rich feature set. Our goal is to continue to deliver controls built for the enterprise with unique features and incomparable performance.

If you don’t have time to read the entire blog, here’s the TL;DR version of what’s coming:

• Data Grid
• Data Chart
• Financial Chart
• Treemap
• Pie Chart
• Gauges
• Microsoft Excel Spreadsheet (Delayed to the September 2020 Release)
• Microsoft Excel Library (Preview)
• Geospatial Map
• Combo Box
• Date Picker
• Data Entry Controls

But if you want the details, keep on reading!  I've put the major controls we are shipping along with what sort of feature set you should expect.

Ignite UI for Blazor Roadmap

Here is what you will get with Ignite UI for Blazor when we ship in September 2020.

Blazor Data Grid / Data Table

The Ignite UI for Blazor Data Grid  / Data Table 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 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.

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

Blazor Grid Features

• Virtualized Row / Columns
• Load on Demand Data
• Paging
• 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 Editing
• Cell Range Selection
• Row Selection (Single / Multi)
• Row Pinning
• Grid Toolbar (So you add custom buttons, like Export, Show / Hide, etc.)
• Export to Excel (with formatting, same as you have in Windows Forms)

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:

From the Column Options dialog, you can pretty much deliver the interactive UX features your customers expect. To get a feel for how this works, check out the Web Component data grid Column Options sample – it is the exact same capability we are shipping in the Blazor product.

Blazor Data Entry Controls

As part of the inline cell-editing feature shipping this summer, you will see a set of Blazor data entry controls that can be used inside a grid cell. We plan on shipping these data entry controls for the Blazor grid editing feature.  

• Checkbox
• Combo Box / Drop Down
• Currency Editor
• Date Time Editor
• Radio button
• Text Editor

We plan on shipping these controls as standalone editor Blazor controls in the October 2020 release.

Blazor DockManager

Provide a complete windowing experience, splitting complex layouts into smaller, easier-to-manage panes. This is one of the most frequently asked for complex layout controls for the web, and it is 100% unique to Infragistics as a dependency-free Blazor DockManager layout component.

To see this in action with a Grid and Chart, this is the DockManager using the Angular Grid and Angular Chart in dockable panes.

Blazor Excel Library / Excel Functions

The Ignite UI Blazor Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like Workbooks, Worksheets, Cells, Formulas and many more. The Blazor Excel Library makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.

Supported Versions of Microsoft Excel

The following is a list of the supported versions of Excel for reading / writing files and formula support.

• Microsoft Excel 97
• Microsoft Excel 2000
• Microsoft Excel 2002
• Microsoft Excel 2003
• Microsoft Excel 2007
• Microsoft Excel 2010
• Microsoft Excel 2013
• Microsoft Excel 2016

Even cooler, we implemented the ability export Charts from any of our Infragistics Ultimate platforms to a native Excel Chart object. Check out this example of what you get with Blazor – full exporting support with charts! 

Blazor Spreadsheet

With the Blazor Excel Spreadsheet control, you can load, edit, and save Excel workbooks, with pretty much the same features as Microsoft Excel.  We are currently on the fence if this will make it into the release as a Preview or delayed to September.  If Spreadsheet if a critical need of yours, let me know at jasonb@infragistics.com. 

Here is an example of the spreadsheet control in action.

Blazor Chart

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.

Here is the long list of what we are shipping with Ignite UI for Blazor this summer.

Blazor 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.

Blazor 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 Stock Chart

The Blazor stock chart makes it easy to visualize financial data by using a simple and intuitive API. Once you bind data to the chart, we have turn-key built-in features that give you the core features that every financial chart requires:

• Date Filters
• Trend Lines
• Overlays
• Financial Candlestick Chart
• Financial OHLC Chart
• Financial Area Indicators
• Financial Column Indicators
• Financial Line Indicators
• Financial Overlays

As well as the core visualization types:

• Bar
• Candle
• Column
• Line

Here is the Blazor Financial Chart in action.

Blazor Treemap

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 Gauges

The Blazor Gauge controls offer several options, all with great animations and customization features. We will ship the following Blazor gauge types:

• Bullet Graph
• Linear Gauge
• Radial Gauge

Here is the radial gauge in action showing off some beautiful styles with rich interactions.

Blazor Pie Chart / Blazor Doughnut Chart

Ignite UI for Blazor wouldn’t be complete without a set of awesome Pie Charts, Doughnut Charts and Radial Pie Charts! We ship all variations of beautiful and customizable Blazor part-to-whole / distribution charts.

We also include a Blazor Doughnut chart that supports hierarchical rings.

Wrap Up

As you can see, the first release of Ignite UI for Blazor has a huge number of capabilities, breadth, and depth. We are working very hard now to get this product into your hands by mid-September.

To try the latest updated Blazor Preview bits, you can grab them from Nuget here - https://www.nuget.org/packages/Infragistics.blazor.

If you like what we are doing for the Blazor release, let me know, and if you see gaps and need controls that we are not in the list, shoot me an email at jasonb@infragistics.com as well.

Thanks, and Happy Coding!

Jason