Blazor Hierarchical Grid Export to Excel Service

The Ignite UI for Blazor Export to Excel Service in Blazor Hierarchical Grid can export data to excel. The data export functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the Export method of ExcelExporterService and pass the IgbHierarchicalGrid component as first argument to export grid easily.

Blazor Excel Exporter Example

EXAMPLE

MODULES

DATA

RAZOR

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGridToolbarModule),
                typeof(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class SingersExportDataItem
{
    public double ID { get; set; }
    public string Artist { get; set; }
    public double Debut { get; set; }
    public double GrammyNominations { get; set; }
    public double GrammyAwards { get; set; }
    public bool HasGrammyAward { get; set; }
    public List<SingersExportDataItem_ToursItem> Tours { get; set; }
    public List<SingersExportDataItem_AlbumsItem> Albums { get; set; }
}
public class SingersExportDataItem_ToursItem
{
    public string Tour { get; set; }
    public string StartedOn { get; set; }
    public string Location { get; set; }
    public string Headliner { get; set; }
    public string TouredBy { get; set; }
    public List<SingersExportDataItem_ToursItem_TourDataItem> TourData { get; set; }
}
public class SingersExportDataItem_ToursItem_TourDataItem
{
    public string Country { get; set; }
    public double TicketsSold { get; set; }
    public double Attendants { get; set; }
}
public class SingersExportDataItem_AlbumsItem
{
    public string Album { get; set; }
    public string LaunchDate { get; set; }
    public double BillboardReview { get; set; }
    public double USBillboard200 { get; set; }
    public string Artist { get; set; }
    public List<SingersExportDataItem_AlbumsItem_SongsItem> Songs { get; set; }
}
public class SingersExportDataItem_AlbumsItem_SongsItem
{
    public double Number { get; set; }
    public string Title { get; set; }
    public string Released { get; set; }
    public string Genre { get; set; }
    public string Album { get; set; }
}

public class SingersExportData
    : List<SingersExportDataItem>
{
    public SingersExportData()
    {
        this.Add(new SingersExportDataItem()
        {
            ID = 0,
            Artist = @"Naomí Yepes",
            Debut = 2011,
            GrammyNominations = 6,
            GrammyAwards = 0,
            HasGrammyAward = false,
            Tours = new List<SingersExportDataItem_ToursItem>()
            {
                new SingersExportDataItem_ToursItem()
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes",
                    TourData = new List<SingersExportDataItem_ToursItem_TourDataItem>()
                    {
                        new SingersExportDataItem_ToursItem_TourDataItem()
                        {
                            Country = @"Belgium",
                            TicketsSold = 10000,
                            Attendants = 10000
                        },
                        new SingersExportDataItem_ToursItem_TourDataItem()
                        {
                            Country = @"USA",
                            TicketsSold = 192300,
                            Attendants = 186523
                        }}

                },
                new SingersExportDataItem_ToursItem()
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersExportDataItem_ToursItem()
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                },
                new SingersExportDataItem_ToursItem()
                {
                    Tour = @"Faithful Tour",
                    StartedOn = @"Sep 12",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Naomí Yepes"
                }}
            ,
            Albums = new List<SingersExportDataItem_AlbumsItem>()
            {
                new SingersExportDataItem_AlbumsItem()
                {
                    Album = @"Pushing up daisies",
                    LaunchDate = @"2020-05-31T00:00:00.000Z",
                    BillboardReview = 86,
                    USBillboard200 = 42,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersExportDataItem_AlbumsItem_SongsItem>()
                    {
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 1,
                            Title = @"Wood Shavings Forever",
                            Released = @"2019-06-09T00:00:00.000Z",
                            Genre = @"Punk",
                            Album = @"Pushing up daisies"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 2,
                            Title = @"Forever",
                            Released = @"2019-12-23T00:00:00.000Z",
                            Genre = @"Punk",
                            Album = @"Pushing up daisies"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 3,
                            Title = @"Forever - Remix",
                            Released = @"2019-06-07T00:00:00.000Z",
                            Genre = @"Punk",
                            Album = @"Pushing up daisies"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 4,
                            Title = @"Pushing up daisies",
                            Released = @"2019-03-19T00:00:00.000Z",
                            Genre = @"Punk",
                            Album = @"Pushing up daisies"
                        }}

                },
                new SingersExportDataItem_AlbumsItem()
                {
                    Album = @"Pushing up daisies - Deluxe",
                    LaunchDate = @"2001-05-31T00:00:00.000Z",
                    BillboardReview = 12,
                    USBillboard200 = 2,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersExportDataItem_AlbumsItem_SongsItem>()
                    {
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 1,
                            Title = @"Wood Shavings Forever - Remix",
                            Released = @"2020-06-09T00:00:00.000Z",
                            Genre = @"Punk",
                            Album = @"Pushing up daisies"
                        }}

                },
                new SingersExportDataItem_AlbumsItem()
                {
                    Album = @"Utopia",
                    LaunchDate = @"2021-12-19T00:00:00.000Z",
                    BillboardReview = 1,
                    USBillboard200 = 1,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersExportDataItem_AlbumsItem_SongsItem>()
                    {
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 1,
                            Title = @"SANTORINI",
                            Released = @"2021-12-19T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Utopia"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 2,
                            Title = @"HEARTBEAT",
                            Released = @"2021-12-19T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Utopia"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 3,
                            Title = @"OVERSEAS",
                            Released = @"2021-12-19T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Utopia"
                        }}

                },
                new SingersExportDataItem_AlbumsItem()
                {
                    Album = @"Wish You Were Here",
                    LaunchDate = @"2020-07-17T00:00:00.000Z",
                    BillboardReview = 5,
                    USBillboard200 = 3,
                    Artist = @"Naomí Yepes",
                    Songs = new List<SingersExportDataItem_AlbumsItem_SongsItem>()
                    {
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 1,
                            Title = @"Zoom",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Wish You Were Here"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 2,
                            Title = @"Do You?",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Wish You Were Here"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 3,
                            Title = @"No Photos",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Wish You Were Here"
                        }}

                }}

        });
        this.Add(new SingersExportDataItem()
        {
            ID = 1,
            Artist = @"Babila Ebwélé",
            Debut = 2009,
            GrammyNominations = 0,
            GrammyAwards = 11,
            HasGrammyAward = true,
            Tours = new List<SingersExportDataItem_ToursItem>()
            {
                new SingersExportDataItem_ToursItem()
                {
                    Tour = @"Astroworld",
                    StartedOn = @"Jul 21",
                    Location = @"Worldwide",
                    Headliner = @"NO",
                    TouredBy = @"Babila Ebwélé",
                    TourData = new List<SingersExportDataItem_ToursItem_TourDataItem>()
                    {
                        new SingersExportDataItem_ToursItem_TourDataItem()
                        {
                            Country = @"Bulgaria",
                            TicketsSold = 25000,
                            Attendants = 19822
                        },
                        new SingersExportDataItem_ToursItem_TourDataItem()
                        {
                            Country = @"Romania",
                            TicketsSold = 65021,
                            Attendants = 63320
                        }}

                }}
            ,
            Albums = new List<SingersExportDataItem_AlbumsItem>()
            {
                new SingersExportDataItem_AlbumsItem()
                {
                    Album = @"Fahrenheit",
                    LaunchDate = @"2000-05-31T00:00:00.000Z",
                    BillboardReview = 86,
                    USBillboard200 = 42,
                    Artist = @"Babila Ebwélé",
                    Songs = new List<SingersExportDataItem_AlbumsItem_SongsItem>()
                    {
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 1,
                            Title = @"Show Out",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Fahrenheit"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 2,
                            Title = @"Mood Swings",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Fahrenheit"
                        },
                        new SingersExportDataItem_AlbumsItem_SongsItem()
                        {
                            Number = 3,
                            Title = @"Scenario",
                            Released = @"2020-07-17T00:00:00.000Z",
                            Genre = @"Hip-Hop",
                            Album = @"Fahrenheit"
                        }}

                }}

        });
        this.Add(new SingersExportDataItem()
        {
            ID = 3,
            Artist = @"Chloe",
            Debut = 2015,
            GrammyNominations = 3,
            GrammyAwards = 1,
            HasGrammyAward = true
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="SingersExportData"
        PrimaryKey="ID"
        AllowFiltering="true"
        FilterMode="FilterMode.ExcelStyleFilter"
        Name="hierarchicalGrid1"
        @ref="hierarchicalGrid1">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarExporter
                    ExportCSV="false"
                    ExportExcel="true">
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="Artist"
            Header="Artist"
            DataType="GridColumnDataType.String"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="Debut"
            Header="Debut"
            DataType="GridColumnDataType.Number">
            </IgbColumn>

            <IgbColumn
            Field="GrammyNominations"
            Header="Grammy Nominations"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

            <IgbColumn
            Field="GrammyAwards"
            Header="Grammy Awards"
            DataType="GridColumnDataType.Number"
            Sortable="true">
            </IgbColumn>

            <IgbRowIsland
            ChildDataKey="Albums"
            AutoGenerate="false">
                <IgbColumn
                Field="Album"
                Header="Album"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="LaunchDate"
                Header="Launch Date"
                DataType="GridColumnDataType.Date">
                </IgbColumn>

                <IgbColumn
                Field="BillboardReview"
                Header="Billboard Review"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="USBillboard200"
                Header="US Billboard 200"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbRowIsland
                ChildDataKey="Songs"
                AutoGenerate="false">
                    <IgbColumn
                    Field="Number"
                    Header="No."
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                    <IgbColumn
                    Field="Title"
                    Header="Title"
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                    <IgbColumn
                    Field="Released"
                    Header="Released"
                    DataType="GridColumnDataType.Date">
                    </IgbColumn>

                    <IgbColumn
                    Field="Genre"
                    Header="Genre"
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                </IgbRowIsland>

            </IgbRowIsland>

            <IgbRowIsland
            ChildDataKey="Tours"
            AutoGenerate="false">
                <IgbColumn
                Field="Tour"
                Header="Tour"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="StartedOn"
                Header="Started on"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Location"
                Header="Location"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbColumn
                Field="Headliner"
                Header="Headliner"
                DataType="GridColumnDataType.String">
                </IgbColumn>

                <IgbRowIsland
                ChildDataKey="TourData"
                AutoGenerate="false">
                    <IgbColumn
                    Field="Country"
                    Header="Country"
                    DataType="GridColumnDataType.String">
                    </IgbColumn>

                    <IgbColumn
                    Field="TicketsSold"
                    Header="Tickets Sold"
                    DataType="GridColumnDataType.Number">
                    </IgbColumn>

                    <IgbColumn
                    Field="Attendants"
                    Header="Attendants"
                    DataType="GridColumnDataType.Number">
                    </IgbColumn>

                </IgbRowIsland>

            </IgbRowIsland>

        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var hierarchicalGrid1 = this.hierarchicalGrid1;

    }

    private IgbHierarchicalGrid hierarchicalGrid1;

    private SingersExportData _singersExportData = null;
    public SingersExportData SingersExportData
    {
        get
        {
            if (_singersExportData == null)
            {
                _singersExportData = new SingersExportData();
            }
            return _singersExportData;
        }
    }

}razorCOPY CODE

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssCOPY CODE

Export Multi Column Headers Grid

It is now possible to export IgbHierarchicalGrid with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the IgbHierarchicalGrid. If you want to exclude the defined multi-column headers from the exported data you can set the ExporterOption IgnoreMultiColumnHeaders to true.

The exported IgbHierarchicalGrid will not be formatted as a table, since Excel tables do not support multiple column headers.

EXAMPLE

MODULES

DATA

RAZOR

JS

CSS

using System;
using System.Net.Http;
using System.Collections.Generic;
using System.Threading.Tasks;
using System.Text;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using IgniteUI.Blazor.Controls; // for registering Ignite UI modules

namespace Infragistics.Samples
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");
            builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
            // registering Ignite UI modules
            builder.Services.AddIgniteUIBlazor(
                typeof(IgbGridToolbarModule),
                typeof(IgbColumnGroupModule),
                typeof(IgbHierarchicalGridModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class MultiColumnsExportDataItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
    public List<MultiColumnsExportDataItem_ChildCompaniesItem> ChildCompanies { get; set; }
}
public class MultiColumnsExportDataItem_ChildCompaniesItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
    public List<MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem> ChildCompanies { get; set; }
}
public class MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem
{
    public string ID { get; set; }
    public string Company { get; set; }
    public string ContactName { get; set; }
    public string ContactTitle { get; set; }
    public string Address { get; set; }
    public string City { get; set; }
    public string Region { get; set; }
    public string PostalCode { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string Fax { get; set; }
}

public class MultiColumnsExportData
    : List<MultiColumnsExportDataItem>
{
    public MultiColumnsExportData()
    {
        this.Add(new MultiColumnsExportDataItem()
        {
            ID = @"ALFKI",
            Company = @"Alfreds Futterkiste",
            ContactName = @"Maria Anders",
            ContactTitle = @"Sales Representative",
            Address = @"Obere Str. 57",
            City = @"Berlin",
            Region = @"Berlin",
            PostalCode = @"12209",
            Country = @"Germany",
            Phone = @"030-0074321",
            Fax = @"030-0076545",
            ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem>()
            {
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"ANATR",
                    Company = @"Ana Trujillo Emparedados y helados",
                    ContactName = @"Ana Trujillo",
                    ContactTitle = @"Owner",
                    Address = @"Avda. de la Constitución 2222",
                    City = @"México D.F.",
                    Region = @"México D.F.",
                    PostalCode = @"05021",
                    Country = @"Mexico",
                    Phone = @"(5) 555-4729",
                    Fax = @"(5) 555-3745",
                    ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem>()
                    {
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"AROUT",
                            Company = @"Around the Horn",
                            ContactName = @"Thomas Hardy",
                            ContactTitle = @"Sales Representative",
                            Address = @"120 Hanover Sq.",
                            City = @"London",
                            Region = @"London",
                            PostalCode = @"10000",
                            Country = @"UK",
                            Phone = @"(171) 555-7788",
                            Fax = @"(171) 555-6750"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BERGS",
                            Company = @"Berglunds snabbköp",
                            ContactName = @"Christina Berglund",
                            ContactTitle = @"Order Administrator",
                            Address = @"Berguvsvägen 8",
                            City = @"Luleå",
                            Region = @"Luleå",
                            PostalCode = @"25000",
                            Country = @"Sweden",
                            Phone = @"0921-12 34 65",
                            Fax = @"0921-12 34 67"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BLAUS",
                            Company = @"Blauer See Delikatessen",
                            ContactName = @"Hanna Moos",
                            ContactTitle = @"Sales Representative",
                            Address = @"Forsterstr. 57",
                            City = @"Mannheim",
                            Region = @"Mannheim",
                            PostalCode = @"68306",
                            Country = @"Germany",
                            Phone = @"0621-08460",
                            Fax = @"0621-08924"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BLONP",
                            Company = @"Blondesddsl père et fils",
                            ContactName = @"Frédérique Citeaux",
                            ContactTitle = @"Marketing Manager",
                            Address = @"24, place Kléber",
                            City = @"Strasbourg",
                            Region = @"Strasbourg",
                            PostalCode = @"67000",
                            Country = @"France",
                            Phone = @"88.60.15.31",
                            Fax = @"88.60.15.32"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BOLID",
                            Company = @"Bólido Comidas preparadas",
                            ContactName = @"Martín Sommer",
                            ContactTitle = @"Owner",
                            Address = @"C/ Araquil, 67",
                            City = @"Madrid",
                            Region = @"Madrid",
                            PostalCode = @"28023",
                            Country = @"Spain",
                            Phone = @"(91) 555 22 82",
                            Fax = @"(91) 555 91 99"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BONAP",
                            Company = @"Bon app",
                            ContactName = @"Laurence Lebihan",
                            ContactTitle = @"Owner",
                            Address = @"12, rue des Bouchers",
                            City = @"Marseille",
                            Region = @"Marseille",
                            PostalCode = @"13008",
                            Country = @"France",
                            Phone = @"91.24.45.40",
                            Fax = @"91.24.45.41"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BOTTM",
                            Company = @"Bottom-Dollar Markets",
                            ContactName = @"Elizabeth Lincoln",
                            ContactTitle = @"Accounting Manager",
                            Address = @"23 Tsawassen Blvd.",
                            City = @"Tsawassen",
                            Region = @"BC",
                            PostalCode = @"13000",
                            Country = @"Canada",
                            Phone = @"(604) 555-4729",
                            Fax = @"(604) 555-3745"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"BSBEV",
                            Company = @"Beverages",
                            ContactName = @"Victoria Ashworth",
                            ContactTitle = @"Sales Representative",
                            Address = @"Fauntleroy Circus",
                            City = @"London",
                            Region = @"London",
                            PostalCode = @"37000",
                            Country = @"UK",
                            Phone = @"(171) 555-1212",
                            Fax = @"011-4988261"
                        }}

                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"ANTON",
                    Company = @"Antonio Moreno Taquería",
                    ContactName = @"Antonio Moreno",
                    ContactTitle = @"Owner",
                    Address = @"Mataderos 2312",
                    City = @"México D.F.",
                    Region = @"México D.F.",
                    PostalCode = @"05023",
                    Country = @"Mexico",
                    Phone = @"(5) 555-3932",
                    Fax = @"011-4988261",
                    ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem>()
                    {
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"CACTU",
                            Company = @"Cactus Comidas para llevar",
                            ContactName = @"Patricio Simpson",
                            ContactTitle = @"Sales Agent",
                            Address = @"Cerrito 333",
                            City = @"Buenos Aires",
                            Region = @"Buenos Aires",
                            PostalCode = @"1010",
                            Country = @"Argentina",
                            Phone = @"(1) 135-5555",
                            Fax = @"(1) 135-4892"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"CENTC",
                            Company = @"Centro comercial Moctezuma",
                            ContactName = @"Francisco Chang",
                            ContactTitle = @"Marketing Manager",
                            Address = @"Sierras de Granada 9993",
                            City = @"México D.F.",
                            Region = @"México D.F.",
                            PostalCode = @"05022",
                            Country = @"Mexico",
                            Phone = @"(5) 555-3392",
                            Fax = @"(5) 555-7293"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"CHOPS",
                            Company = @"Chop-suey Chinese",
                            ContactName = @"Yang Wang",
                            ContactTitle = @"Owner",
                            Address = @"Hauptstr. 29",
                            City = @"Bern",
                            Region = @"Bern",
                            PostalCode = @"3012",
                            Country = @"Switzerland",
                            Phone = @"0452-076545",
                            Fax = @"011-4988261"
                        }}

                }}

        });
        this.Add(new MultiColumnsExportDataItem()
        {
            ID = @"COMMI",
            Company = @"Comércio Mineiro",
            ContactName = @"Pedro Afonso",
            ContactTitle = @"Sales Associate",
            Address = @"Av. dos Lusíadas, 23",
            City = @"Sao Paulo",
            Region = @"SP",
            PostalCode = @"16000",
            Country = @"Brazil",
            Phone = @"(11) 555-7647",
            Fax = @"089-0877451",
            ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem>()
            {
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"CONSH",
                    Company = @"Consolidated Holdings",
                    ContactName = @"Elizabeth Brown",
                    ContactTitle = @"Sales Representative",
                    Address = @"Berkeley Gardens 12 Brewery",
                    City = @"London",
                    Region = @"London",
                    PostalCode = @"23000",
                    Country = @"UK",
                    Phone = @"(171) 555-2282",
                    Fax = @"(171) 555-9199",
                    ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem>()
                    {
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"EASTC",
                            Company = @"Eastern Connection",
                            ContactName = @"Ann Devon",
                            ContactTitle = @"Sales Agent",
                            Address = @"35 King George",
                            City = @"London",
                            Region = @"London",
                            PostalCode = @"42000",
                            Country = @"UK",
                            Phone = @"(171) 555-0297",
                            Fax = @"(171) 555-3373"
                        },
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"ERNSH",
                            Company = @"Ernst Handel",
                            ContactName = @"Roland Mendel",
                            ContactTitle = @"Sales Manager",
                            Address = @"Kirchgasse 6",
                            City = @"Graz",
                            Region = @"Graz",
                            PostalCode = @"8010",
                            Country = @"Austria",
                            Phone = @"7675-3425",
                            Fax = @"7675-3426"
                        }}

                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"DRACD",
                    Company = @"Drachenblut Delikatessen",
                    ContactName = @"Sven Ottlieb",
                    ContactTitle = @"Order Administrator",
                    Address = @"Walserweg 21",
                    City = @"Aachen",
                    Region = @"Aachen",
                    PostalCode = @"52066",
                    Country = @"Germany",
                    Phone = @"0241-039123",
                    Fax = @"0241-059428"
                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"DUMON",
                    Company = @"Du monde entier",
                    ContactName = @"Janine Labrune",
                    ContactTitle = @"Owner",
                    Address = @"67, rue des Cinquante Otages",
                    City = @"Nantes",
                    Region = @"Nantes",
                    PostalCode = @"44000",
                    Country = @"France",
                    Phone = @"40.67.88.88",
                    Fax = @"40.67.89.89",
                    ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem>()
                    {
                        new MultiColumnsExportDataItem_ChildCompaniesItem_ChildCompaniesItem()
                        {
                            ID = @"FAMIA",
                            Company = @"Familia Arquibaldo",
                            ContactName = @"Aria Cruz",
                            ContactTitle = @"Marketing Assistant",
                            Address = @"Rua Orós, 92",
                            City = @"Sao Paulo",
                            Region = @"SP",
                            PostalCode = @"12000",
                            Country = @"Brazil",
                            Phone = @"(11) 555-9857",
                            Fax = @"089-0877451"
                        }}

                }}

        });
        this.Add(new MultiColumnsExportDataItem()
        {
            ID = @"FISSA",
            Company = @"FISSA Fabrica Inter. Salchichas S.A.",
            ContactName = @"Diego Roel",
            ContactTitle = @"Accounting Manager",
            Address = @"C/ Moralzarzal, 86",
            City = @"Madrid",
            Region = @"Madrid",
            PostalCode = @"28034",
            Country = @"Spain",
            Phone = @"(91) 555 94 44",
            Fax = @"(91) 555 55 93",
            ChildCompanies = new List<MultiColumnsExportDataItem_ChildCompaniesItem>()
            {
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"FOLIG",
                    Company = @"Folies gourmandes",
                    ContactName = @"Martine Rancé",
                    ContactTitle = @"Assistant Sales Agent",
                    Address = @"184, chaussée de Tournai",
                    City = @"Lille",
                    Region = @"Lille",
                    PostalCode = @"59000",
                    Country = @"France",
                    Phone = @"20.16.10.16",
                    Fax = @"20.16.10.17"
                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"FOLKO",
                    Company = @"Folk och fä HB",
                    ContactName = @"Maria Larsson",
                    ContactTitle = @"Owner",
                    Address = @"Åkergatan 24",
                    City = @"Bräcke",
                    Region = @"Bräcke",
                    PostalCode = @"19000",
                    Country = @"Sweden",
                    Phone = @"0695-34 67 21",
                    Fax = @"089-0877451"
                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"FRANK",
                    Company = @"Frankenversand",
                    ContactName = @"Peter Franken",
                    ContactTitle = @"Marketing Manager",
                    Address = @"Berliner Platz 43",
                    City = @"München",
                    Region = @"München",
                    PostalCode = @"80805",
                    Country = @"Germany",
                    Phone = @"089-0877310",
                    Fax = @"089-0877451"
                },
                new MultiColumnsExportDataItem_ChildCompaniesItem()
                {
                    ID = @"FRANR",
                    Company = @"France restauration",
                    ContactName = @"Carine Schmitt",
                    ContactTitle = @"Marketing Manager",
                    Address = @"54, rue Royale",
                    City = @"Nantes",
                    Region = @"Nantes",
                    PostalCode = @"44000",
                    Country = @"France",
                    Phone = @"40.32.21.21",
                    Fax = @"40.32.21.20"
                }}

        });
        this.Add(new MultiColumnsExportDataItem()
        {
            ID = @"FRANS",
            Company = @"Franchi S.p.A.",
            ContactName = @"Paolo Accorti",
            ContactTitle = @"Sales Representative",
            Address = @"Via Monte Bianco 34",
            City = @"Torino",
            Region = @"Torino",
            PostalCode = @"10100",
            Country = @"Italy",
            Phone = @"011-4988260",
            Fax = @"011-4988261"
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbHierarchicalGrid
        AutoGenerate="false"
        Data="MultiColumnsExportData"
        PrimaryKey="ID"
        Moving="true"
        AllowFiltering="true"
        Name="hierarchicalGrid1"
        @ref="hierarchicalGrid1">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarExporter
                    ExportCSV="false"
                    ExportExcel="true"
                    Name="hGridToolbarExporter"
                    @ref="hGridToolbarExporter"
                    ExportStartedScript="WebHierarchicalGridExportMultiColumnHeaders">
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumnGroup
            Header="General Information">
                <IgbColumn
                Field="Company"
                DataType="GridColumnDataType.String"
                Sortable="true"
                Resizable="true">
                </IgbColumn>

                <IgbColumnGroup
                Header="Personal Details">
                    <IgbColumn
                    Field="ContactName"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="ContactTitle"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbColumnGroup
            Header="Address Information">
                <IgbColumnGroup
                Header="Location">
                    <IgbColumn
                    Field="Address"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="City"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="PostalCode"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Country"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Contact Information">
                    <IgbColumn
                    Field="Phone"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="Fax"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbRowIsland
            ChildDataKey="ChildCompanies"
            AutoGenerate="false"
            Moving="true">
                <IgbColumnGroup
                Header="General Information">
                    <IgbColumn
                    Field="Company"
                    DataType="GridColumnDataType.String"
                    Sortable="true"
                    Resizable="true">
                    </IgbColumn>

                    <IgbColumnGroup
                    Header="Personal Details">
                        <IgbColumn
                        Field="ContactName"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumn
                        Field="ContactTitle"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                    </IgbColumnGroup>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Address Information">
                    <IgbColumnGroup
                    Header="Location">
                        <IgbColumn
                        Field="Address"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumn
                        Field="City"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumn
                        Field="PostalCode"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumn
                        Field="Country"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                    </IgbColumnGroup>

                    <IgbColumnGroup
                    Header="Contact Information">
                        <IgbColumn
                        Field="Phone"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumn
                        Field="Fax"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                    </IgbColumnGroup>

                </IgbColumnGroup>

                <IgbRowIsland
                ChildDataKey="ChildCompanies"
                AutoGenerate="false"
                Moving="true">
                    <IgbColumnGroup
                    Header="General Information">
                        <IgbColumn
                        Field="Company"
                        DataType="GridColumnDataType.String"
                        Sortable="true"
                        Resizable="true">
                        </IgbColumn>

                        <IgbColumnGroup
                        Header="Personal Details">
                            <IgbColumn
                            Field="ContactName"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                            <IgbColumn
                            Field="ContactTitle"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                        </IgbColumnGroup>

                    </IgbColumnGroup>

                    <IgbColumnGroup
                    Header="Address Information">
                        <IgbColumnGroup
                        Header="Location">
                            <IgbColumn
                            Field="Address"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                            <IgbColumn
                            Field="City"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                            <IgbColumn
                            Field="PostalCode"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                            <IgbColumn
                            Field="Country"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                        </IgbColumnGroup>

                        <IgbColumnGroup
                        Header="Contact Information">
                            <IgbColumn
                            Field="Phone"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                            <IgbColumn
                            Field="Fax"
                            DataType="GridColumnDataType.String"
                            Sortable="true"
                            Resizable="true">
                            </IgbColumn>

                        </IgbColumnGroup>

                    </IgbColumnGroup>

                </IgbRowIsland>

            </IgbRowIsland>

        </IgbHierarchicalGrid>

    </div>
</div>

@code {
    

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        var hierarchicalGrid1 = this.hierarchicalGrid1;
        var hGridToolbarExporter = this.hGridToolbarExporter;

    }

    private IgbHierarchicalGrid hierarchicalGrid1;
    private IgbGridToolbarExporter hGridToolbarExporter;

    private MultiColumnsExportData _multiColumnsExportData = null;
    public MultiColumnsExportData MultiColumnsExportData
    {
        get
        {
            if (_multiColumnsExportData == null)
            {
                _multiColumnsExportData = new MultiColumnsExportData();
            }
            return _multiColumnsExportData;
        }
    }

}razorCOPY CODE

igRegisterScript("WebHierarchicalGridExportMultiColumnHeaders", (ev) => {
    ev.detail.options.ignoreMultiColumnHeaders = false;
}, false);

jsCOPY CODE

/*
CSS styles are loaded from the shared CSS file located at:
https://static.infragistics.com/xplatform/css/samples/
*/
cssCOPY CODE

Export Grid with Frozen Column Headers

By default Excel Exporter service exports the grid with scrollable (unfrozen) column headers. There are scenarios in which you may want to freeze all headers on top of the exported excel file so they always stay in view as the user scrolls through the records. To achieve this you could set the ExporterOption FreezeHeaders to true.

 <IgbHierarchicalGrid>
    <IgbGridToolbar>
      <IgbGridToolbarActions>
        <IgbGridToolbarExporter
          ExportExcel="true" ExportStartedScript="WebHierarchicalGridExportEventFreezeHeaders">
        </IgbGridToolbarExporter>
      </IgbGridToolbarActions>
    </IgbGridToolbar>
 </IgbHierarchicalGrid>

igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
    ev.detail.options.freezeHeaders = false;
}, false);
razor

Known Limitations

Limitation	Description
Hierarchy levels	The excel exporter service can create up to 8 levels of hierarchy.
Max worksheet size	The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
Exporting pinned columns	In the exported Excel file, the pinned columns will not be frozen but will be displayed in the same order as they appear in the grid.

API References

• ExcelExporterService
• ExcelExporterOptions
• IgbHierarchicalGrid

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for Blazor Forums
• Ignite UI for Blazor GitHub