Ignite UI Angular Grid Summary Export: Getting Started

At Infragistics, we are dedicated to providing our customers with the best products and solutions on the market. We are constantly working hard to improve and innovate, and our latest Ignite UI for Angular 22.2 release is no exception. Even though there are tons of new improvements and brand-new components added to Ignite UI Angular, one of the standout features of this release is definitely the Angular Grid Summary Excel Exporter.

Focusing on it, this article is going to cover the following topics:

• What is Grid Summary Excel Exporter
• What are Grid Summaries
• What is Ignite UI for Angular Excel Exporter
• Exporting Grid with Summaries
• What are some of the known limitations
• Getting started with Ignite UI Angular Excel Exporter

So, let’s get started then.

In A Nutshell: What Is Angular Grid Summary Excel Exporter

The Grid Summary Excel Exporter in Angular is a new feature that allows you to easily export any Grid with summaries into MS Excel, making it easier than ever to analyze and manipulate your data. You can now enjoy even greater flexibility and control over your data and a better WYSIWYG experience.

What are Angular Grid Summaries?

One of the key challenges when working with large datasets is being able to quickly understand and make sense of the information contained within. With Angular Grid Summaries, that’s no longer a problem. Basically, Angular Grid Summaries represent a powerful feature of our Ignite UI for Angular Data Grid that works on a per-column level as group footer. It lets users see aggregated values calculated over all the data in a column.

There’s a predefined set of key summary statistics based on the type of data in the column so that you can save some time, identify trends and patterns in your data and make more informed decisions based on that information. If these functions don't fulfill your requirements, however, you can also provide custom summaries.

Below you can see an Angular Grid Summaries example.

 

Ignite UI for Angular Excel Exporter

The Ignite UI for Angular Excel Exporter service can export data in MS Excel format from raw data (array) or from any of our Grid components. This saves users time and effort, as they no longer need to manually input their data into Excel. In addition, the exporter will export any flat data in MS Excel table format, that allows features like filtering, sorting, etc.

Check out the following Angular Excel Exporter to see how it works.

Exporting Grid With Summaries

One of the key advantages of using Angular Excel exporter is that it preserves the integrity of the data and the calculations used to generate the summaries. Instead of just exporting plain text, the Excel exporter converts the summaries into equivalent Excel functions, ensuring that you stay on top of your data analysis and always have the most up-to-date information at your fingertips. This means that you can continue working with the data in Excel without having to recalculate the summary values.

Let’s look at this Grid for example.

 

As you can see, there are several columns with summaries enabled. When we export this grid, the IgxExcelExporterService will create appropriate functions for each of these summaries. For example, the sum of the data in ‘UnitPrice’ column will be exported using the SUM formula. This means that if the data in the sheet changes, the summary value will automatically update to reflect the changes.

Here's the result of exporting the above grid:

In the table below, you can find the corresponding Excel formula for each of the default summaries.

 

What Are Some of the Known Limitations Here?

The summary export functionality is available in all Angular grid types, excluding Angular Pivot grid. The exported file also includes a hidden column that holds the level of each DataRecord in the sheet. This level is used in the summaries to filter out the cells that need to be included in a particular summary function.

But what about custom summaries? Can Angular Excel Exporter handle those as well? The answer is yes! While we can't know the Excel equivalent of a custom summary, the Excel Exporter will still export custom summaries as plain text. Even in these cases, they can still be useful, as they provide a quick and easy way to show aggregated information of your data.

Getting Started With Ignite UI Angular Excel Exporter

In order to get started with exporting Grid with summaries, first you need to enable them. To do so, you just need to set the hasSummary property of a column to true. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. The default column type is string, so if you want number or date specific summaries you should specify the dataType property as number or date.

  

All you need to do next is export the Grid with the help of the IgxExcelExporterService. To initiate an export, you may use the handler of a button in your component's template.

 

Then you need to invoke the exporter service's export method and pass the IgxGrid component as first argument:

 

For your convenience, we’ve also exposed an exportSummaries option which by default is enabled. Should you not need the summaries in your exported file, simply set the options’ exportSummaries property to false.

 

Wrap-Up 

While working with web applications, we are often faced with the challenge of exporting data in the quickest, easiest, and most efficient possible way. Now, it’s safe to say this process is more simplified when using Ignite UI Angular Grid thanks to the latest features we added – Angular Grid Summary Excel Export.

It’s part of the Ignite UI for Angular 22.2 Release that we pushed in November. If you want, you can read all about the exciting improvements for Angular in this release or watch the detailed Infragistics Ultimate 22.2 Webinar.

Follow us on Medium and stay up to date with the latest Angular-related projects that we are working on. Give us a star on GitHub and help us to continue to improve our product by addressing any concerns, questions or feature requests in the issues section.  We will continue to do our best to constantly improve our product experience to meet all your needs and build apps with ease.