Blazor Tree Grid Export to Excel Service

The Ignite UI for Blazor Export to Excel Service in Blazor Tree 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 IgbTreeGrid 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(IgbGridModule),
                typeof(IgbGridToolbarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class EmployeesNestedDataItem
{
    public double ID { get; set; }
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
    public List<EmployeesNestedDataItem_EmployeesItem> Employees { get; set; }
}
public class EmployeesNestedDataItem_EmployeesItem
{
    public double Age { get; set; }
    public double Salary { get; set; }
    public double Productivity { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Phone { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public string Title { get; set; }
}

public class EmployeesNestedData
    : List<EmployeesNestedDataItem>
{
    public EmployeesNestedData()
    {
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 1,
            Age = 55,
            Salary = 80000,
            Productivity = 90,
            City = @"Berlin",
            Country = @"Germany",
            Phone = @"609-202-505",
            HireDate = @"2008-03-20",
            Name = @"John Winchester",
            Title = @"Development Manager",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 43,
                    Salary = 70000,
                    Productivity = 80,
                    City = @"Hamburg",
                    Country = @"Germany",
                    Phone = @"609-444-555",
                    HireDate = @"2011-06-03",
                    ID = 3,
                    Name = @"Michael Burke",
                    Title = @"Senior Software Developer"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 29,
                    Salary = 60000,
                    Productivity = 80,
                    City = @"Munich",
                    Country = @"Germany",
                    Phone = @"609-333-444",
                    HireDate = @"2009-06-19",
                    ID = 2,
                    Name = @"Thomas Anderson",
                    Title = @"Senior Software Developer"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 31,
                    Salary = 90000,
                    Productivity = 80,
                    City = @"Warasw",
                    Country = @"Poland",
                    Phone = @"609-222-205",
                    HireDate = @"2014-08-18",
                    ID = 11,
                    Name = @"Monica Reyes",
                    Title = @"Software Development Team Lead"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 35,
                    Salary = 70000,
                    Productivity = 70,
                    City = @"Koln",
                    Country = @"Germany",
                    Phone = @"609-502-525",
                    HireDate = @"2015-09-17",
                    ID = 6,
                    Name = @"Roland Mendel",
                    Title = @"Senior Software Developer"
                }}

        });
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 4,
            Age = 42,
            Salary = 90000,
            Productivity = 80,
            City = @"Kielce",
            Country = @"Poland",
            Phone = @"609-202-505",
            HireDate = @"2014-01-22",
            Name = @"Ana Sanders",
            Title = @"CEO",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 44,
                    Salary = 80000,
                    Productivity = 80,
                    City = @"Warasw",
                    Country = @"Poland",
                    Phone = @"609-202-505",
                    HireDate = @"2014-04-04",
                    ID = 14,
                    Name = @"Laurence Johnson",
                    Title = @"Director"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 25,
                    Salary = 85000,
                    Productivity = 55,
                    City = @"Paris",
                    Country = @"France",
                    Phone = @"609-202-505",
                    HireDate = @"2017-11-09",
                    ID = 5,
                    Name = @"Elizabeth Richards",
                    Title = @"Vice President"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 39,
                    Salary = 88000,
                    Productivity = 88,
                    City = @"London",
                    Country = @"UK",
                    Phone = @"609-202-505",
                    HireDate = @"2010-03-22",
                    ID = 13,
                    Name = @"Trevor Ashworth",
                    Title = @"Director"
                }}

        });
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 18,
            Age = 49,
            Salary = 77000,
            Productivity = 70,
            City = @"Manchester",
            Country = @"UK",
            Phone = @"222-555-577",
            HireDate = @"2014-01-22",
            Name = @"Victoria Lincoln",
            Title = @"Senior Accountant",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 43,
                    Salary = 70000,
                    Productivity = 80,
                    City = @"Hamburg",
                    Country = @"Germany",
                    Phone = @"609-444-555",
                    HireDate = @"2011-06-03",
                    ID = 23,
                    Name = @"Thomas Burke",
                    Title = @"Senior Accountant"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 29,
                    Salary = 60000,
                    Productivity = 80,
                    City = @"Munich",
                    Country = @"Germany",
                    Phone = @"609-333-444",
                    HireDate = @"2009-06-19",
                    ID = 22,
                    Name = @"Michael Anderson",
                    Title = @"Junior Accountant"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 31,
                    Salary = 90000,
                    Productivity = 80,
                    City = @"Warasw",
                    Country = @"Poland",
                    Phone = @"609-222-205",
                    HireDate = @"2014-08-18",
                    ID = 21,
                    Name = @"Roland Reyes",
                    Title = @"Accountant Team Lead"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 35,
                    Salary = 70000,
                    Productivity = 70,
                    City = @"Koln",
                    Country = @"Germany",
                    Phone = @"609-502-525",
                    HireDate = @"2015-09-17",
                    ID = 24,
                    Name = @"Monica Mendel",
                    Title = @"Senior Software Developer"
                }}

        });
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 10,
            Age = 61,
            Salary = 85000,
            Productivity = 890,
            City = @"Lyon",
            Country = @"France",
            Phone = @"259-266-887",
            HireDate = @"2010-01-01",
            Name = @"Yang Wang",
            Title = @"Localization Developer",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 31,
                    Salary = 90000,
                    Productivity = 80,
                    City = @"Warasw",
                    Country = @"Poland",
                    Phone = @"609-222-205",
                    HireDate = @"2014-08-18",
                    ID = 11,
                    Name = @"Monica Reyes",
                    Title = @"Software Development Team Lead"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 35,
                    Salary = 70000,
                    Productivity = 70,
                    City = @"Koln",
                    Country = @"Germany",
                    Phone = @"609-502-525",
                    HireDate = @"2015-09-17",
                    ID = 6,
                    Name = @"Roland Mendel",
                    Title = @"Senior Software Developer"
                }}

        });
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 35,
            Age = 35,
            Salary = 75000,
            Productivity = 75,
            City = @"Warasw",
            Country = @"Poland",
            Phone = @"688-244-844",
            HireDate = @"2014-01-22",
            Name = @"Janine Munoz",
            Title = @"HR",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 43,
                    Salary = 70000,
                    Productivity = 80,
                    City = @"Hamburg",
                    Country = @"Germany",
                    Phone = @"609-444-555",
                    HireDate = @"2011-06-03",
                    ID = 3,
                    Name = @"Michael Burke",
                    Title = @"Senior Software Developer"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 31,
                    Salary = 90000,
                    Productivity = 80,
                    City = @"Warasw",
                    Country = @"Poland",
                    Phone = @"609-222-205",
                    HireDate = @"2014-08-18",
                    ID = 11,
                    Name = @"Monica Reyes",
                    Title = @"Software Development Team Lead"
                }}

        });
        this.Add(new EmployeesNestedDataItem()
        {
            ID = 10,
            Age = 49,
            Salary = 95000,
            Productivity = 80,
            City = @"Krakow",
            Country = @"Poland",
            Phone = @"677-266-555",
            HireDate = @"2010-01-01",
            Name = @"Yang Wang",
            Title = @"Sales Manager",
            Employees = new List<EmployeesNestedDataItem_EmployeesItem>()
            {
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 29,
                    Salary = 60000,
                    Productivity = 80,
                    City = @"Munich",
                    Country = @"Germany",
                    Phone = @"609-333-444",
                    HireDate = @"2009-06-19",
                    ID = 2,
                    Name = @"Thomas Anderson",
                    Title = @"Senior Software Developer"
                },
                new EmployeesNestedDataItem_EmployeesItem()
                {
                    Age = 35,
                    Salary = 70000,
                    Productivity = 70,
                    City = @"Koln",
                    Country = @"Germany",
                    Phone = @"609-502-525",
                    HireDate = @"2015-09-17",
                    ID = 6,
                    Name = @"Roland Mendel",
                    Title = @"Senior Software Developer"
                }}

        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesNestedData"
        ChildDataKey="Employees">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarExporter
                    ExportCSV="false"
                    ExportExcel="true">
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

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

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

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

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

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

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

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;

    private EmployeesNestedData _employeesNestedData = null;
    public EmployeesNestedData EmployeesNestedData
    {
        get
        {
            if (_employeesNestedData == null)
            {
                _employeesNestedData = new EmployeesNestedData();
            }
            return _employeesNestedData;
        }
    }

}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 IgbTreeGrid with defined multi-column headers. All headers will be reflected in the exported excel file as they are displayed in the IgbTreeGrid. If you want to exclude the defined multi-column headers from the exported data you can set the ExporterOption IgnoreMultiColumnHeaders to true.

The exported IgbTreeGrid 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(IgbInputModule),
                typeof(IgbGridModule),
                typeof(IgbGridToolbarModule)
            );
            await builder.Build().RunAsync();
        }
    }
}csCOPY CODE

using System;
using System.Collections.Generic;
public class EmployeesFlatDetailsItem
{
    public string Address { get; set; }
    public double Age { get; set; }
    public string City { get; set; }
    public string Country { get; set; }
    public string Fax { get; set; }
    public string HireDate { get; set; }
    public double ID { get; set; }
    public string Name { get; set; }
    public double ParentID { get; set; }
    public string Phone { get; set; }
    public double PostalCode { get; set; }
    public string Title { get; set; }
    public string LastName { get; set; }
    public string FullAddress { get; set; }
}

public class EmployeesFlatDetails
    : List<EmployeesFlatDetailsItem>
{
    public EmployeesFlatDetails()
    {
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Obere Str. 57",
            Age = 55,
            City = @"Berlin",
            Country = @"Germany",
            Fax = @"030-0076545",
            HireDate = @"2008-03-20",
            ID = 1,
            Name = @"Johnathan Winchester",
            ParentID = -1,
            Phone = @"030-0074321",
            PostalCode = 12209,
            Title = @"Development Manager",
            LastName = @"Winchester",
            FullAddress = @"Obere Str. 57, Berlin, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Avda. de la Constitución 2222",
            Age = 42,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(51) 555-3745",
            HireDate = @"2014-01-22",
            ID = 4,
            Name = @"Ana Sanders",
            ParentID = -1,
            Phone = @"(5) 555-4729",
            PostalCode = 5021,
            Title = @"CEO",
            LastName = @"Sanders",
            FullAddress = @"Avda. de la Constitución 2222, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Mataderos 2312",
            Age = 49,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(5) 555-3995",
            HireDate = @"2014-01-22",
            ID = 18,
            Name = @"Victoria Lincoln",
            ParentID = -1,
            Phone = @"(5) 555-3932",
            PostalCode = 5023,
            Title = @"Accounting Manager",
            LastName = @"Lincoln",
            FullAddress = @"Mataderos 2312, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"120 Hanover Sq.",
            Age = 61,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-6750",
            HireDate = @"2010-01-01",
            ID = 10,
            Name = @"Yang Wang",
            ParentID = -1,
            Phone = @"(171) 555-7788",
            PostalCode = 39000,
            Title = @"Localization Manager",
            LastName = @"Wang",
            FullAddress = @"120 Hanover Sq., London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berguvsvägen 8",
            Age = 43,
            City = @"Luleå",
            Country = @"Sweden",
            Fax = @"0921-12 34 67",
            HireDate = @"2011-06-03",
            ID = 3,
            Name = @"Michael Burke",
            ParentID = 1,
            Phone = @"0921-12 34 65",
            PostalCode = 29000,
            Title = @"Senior Software Developer",
            LastName = @"Burke",
            FullAddress = @"Berguvsvägen 8, Luleå, Sweden"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Forsterstr. 57",
            Age = 29,
            City = @"Mannheim",
            Country = @"Germany",
            Fax = @"0621-08924",
            HireDate = @"2009-06-19",
            ID = 2,
            Name = @"Thomas Anderson",
            ParentID = 1,
            Phone = @"0621-08460",
            PostalCode = 68306,
            Title = @"Senior Software Developer",
            LastName = @"Anderson",
            FullAddress = @"Forsterstr. 57, Mannheim, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"24, place Kléber",
            Age = 31,
            City = @"Strasbourg",
            Country = @"France",
            Fax = @"88.60.15.32",
            HireDate = @"2014-08-18",
            ID = 11,
            Name = @"Monica Reyes",
            ParentID = 1,
            Phone = @"88.60.15.31",
            PostalCode = 67000,
            Title = @"Software Development Team Lead",
            LastName = @"Reyes",
            FullAddress = @"24, place Kléber, Strasbourg, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"C/ Araquil, 67",
            Age = 35,
            City = @"Madrid",
            Country = @"Spain",
            Fax = @"(911) 555 91 99",
            HireDate = @"2015-09-17",
            ID = 6,
            Name = @"Roland Mendel",
            ParentID = 11,
            Phone = @"(91) 555 22 82",
            PostalCode = 28023,
            Title = @"Senior Software Developer",
            LastName = @"Mendel",
            FullAddress = @"C/ Araquil, 67, Madrid, Spain"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"12, rue des Bouchers",
            Age = 44,
            City = @"Marseille",
            Country = @"France",
            Fax = @"91.24.45.41",
            HireDate = @"2009-10-11",
            ID = 12,
            Name = @"Sven Cooper",
            ParentID = 11,
            Phone = @"91.24.45.40",
            PostalCode = 13008,
            Title = @"Senior Software Developer",
            LastName = @"Cooper",
            FullAddress = @"12, rue des Bouchers, Marseille, France"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"23 Tsawassen Blvd.",
            Age = 44,
            City = @"Tsawassen",
            Country = @"Canada",
            Fax = @"(604) 555-3745",
            HireDate = @"2014-04-04",
            ID = 14,
            Name = @"Laurence Johnson",
            ParentID = 4,
            Phone = @"(604) 555-4729",
            PostalCode = 19000,
            Title = @"Director",
            LastName = @"Johnson",
            FullAddress = @"23 Tsawassen Blvd., Tsawassen, Canada"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Fauntleroy Circus",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(125) 555-3798",
            HireDate = @"2017-11-9",
            ID = 5,
            Name = @"Elizabeth Richards",
            ParentID = 4,
            Phone = @"(171) 555-1212",
            PostalCode = 30000,
            Title = @"Vice President",
            LastName = @"Richards",
            FullAddress = @"Fauntleroy Circus, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Cerrito 333",
            Age = 39,
            City = @"Buenos Aires",
            Country = @"Argentina",
            Fax = @"(121) 135-4892",
            HireDate = @"2010-03-22",
            ID = 13,
            Name = @"Trevor Ashworth",
            ParentID = 5,
            Phone = @"(1) 135-5555",
            PostalCode = 1010,
            Title = @"Director",
            LastName = @"Ashworth",
            FullAddress = @"Cerrito 333, Buenos Aires, Argentina"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Sierras de Granada 9993",
            Age = 44,
            City = @"México D.F.",
            Country = @"Mexico",
            Fax = @"(153) 555-7293",
            HireDate = @"2014-04-04",
            ID = 17,
            Name = @"Antonio Moreno",
            ParentID = 18,
            Phone = @"(5) 555-3392",
            PostalCode = 5022,
            Title = @"Senior Accountant",
            LastName = @"Moreno",
            FullAddress = @"Sierras de Granada 9993, México D.F., Mexico"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Hauptstr. 29",
            Age = 50,
            City = @"Sao Paulo",
            Country = @"Brazil",
            Fax = @"(531) 555-6691",
            HireDate = @"2007-11-18",
            ID = 7,
            Name = @"Pedro Rodriguez",
            ParentID = 10,
            Phone = @"0452-076545",
            PostalCode = 3012,
            Title = @"Senior Localization Developer",
            LastName = @"Rodriguez",
            FullAddress = @"Hauptstr. 29, Sao Paulo, Brazil"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Av. dos Lusíadas, 23",
            Age = 27,
            City = @"Bern",
            Country = @"Switzerland",
            Fax = @"(271) 335-357",
            HireDate = @"2016-02-19",
            ID = 8,
            Name = @"Casey Harper",
            ParentID = 10,
            Phone = @"(11) 555-7647",
            PostalCode = 40000,
            Title = @"Senior Localization",
            LastName = @"Harper",
            FullAddress = @"Av. dos Lusíadas, 23, Bern, Switzerland"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Berkeley Gardens 12",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-9199",
            HireDate = @"2017-11-09",
            ID = 15,
            Name = @"Patricia Simpson",
            ParentID = 7,
            Phone = @"(171) 555-2282",
            PostalCode = 26000,
            Title = @"Localization Intern",
            LastName = @"Simpson",
            FullAddress = @"Berkeley Gardens 12, London, UK"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"Walserweg 21",
            Age = 39,
            City = @"Aachen",
            Country = @"Germany",
            Fax = @"0241-059428",
            HireDate = @"2010-03-22",
            ID = 9,
            Name = @"Francisco Chang",
            ParentID = 7,
            Phone = @"0241-039123",
            PostalCode = 52066,
            Title = @"Localization Intern",
            LastName = @"Chang",
            FullAddress = @"Walserweg 21, Aachen, Germany"
        });
        this.Add(new EmployeesFlatDetailsItem()
        {
            Address = @"35 King George",
            Age = 25,
            City = @"London",
            Country = @"UK",
            Fax = @"(171) 555-3373",
            HireDate = @"2018-03-18",
            ID = 16,
            Name = @"Peter Lewis",
            ParentID = 7,
            Phone = @"(171) 555-0297",
            PostalCode = 48000,
            Title = @"Localization Intern",
            LastName = @"Lewis",
            FullAddress = @"35 King George, London, UK"
        });
    }
}csCOPY CODE

@using IgniteUI.Blazor.Controls

@inject IJSRuntime JS

<div class="container vertical ig-typography">
    <div class="container vertical fill">
        <IgbTreeGrid
        AutoGenerate="false"
        Name="treeGrid"
        @ref="treeGrid"
        Id="treeGrid"
        Data="EmployeesFlatDetails"
        ForeignKey="ParentID"
        PrimaryKey="ID">
            <IgbGridToolbar
            >
                <IgbGridToolbarActions
                >
                    <IgbGridToolbarPinning
                    >
                    </IgbGridToolbarPinning>

                    <IgbGridToolbarHiding
                    >
                    </IgbGridToolbarHiding>

                    <IgbGridToolbarExporter
                    ExportCSV="false"
                    ExportExcel="true"
                    ExportStartedScript="WebGridExportEventMultiColumnHeaders"
                    Name="gridToolbarExporter1"
                    @ref="gridToolbarExporter1">
                    </IgbGridToolbarExporter>

                </IgbGridToolbarActions>

            </IgbGridToolbar>

            <IgbColumn
            Field="ID"
            Header="ID"
            Resizable="true"
            Filterable="false">
            </IgbColumn>

            <IgbColumn
            Field="Name"
            Header="Name"
            Resizable="true"
            Sortable="true"
            Width="200px">
            </IgbColumn>

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

                <IgbColumnGroup
                Header="Personal Details">
                    <IgbColumn
                    Header="Title"
                    Field="Title"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                    <IgbColumn
                    Header="Age"
                    Field="Age"
                    DataType="GridColumnDataType.Number"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

            <IgbColumnGroup
            Header="Address Information">
                <IgbColumnGroup
                Header="Location">
                    <IgbColumn
                    Header="Country"
                    Field="Country"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                    <IgbColumn
                    Field="City"
                    Header="City"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                    <IgbColumn
                    Header="Address"
                    Field="Address"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                </IgbColumnGroup>

                <IgbColumnGroup
                Header="Contact Information">
                    <IgbColumn
                    Header="Phone"
                    Field="Phone"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                    <IgbColumn
                    Header="Fax"
                    Field="Fax"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                    <IgbColumn
                    Header="PostalCode"
                    Field="PostalCode"
                    Resizable="true"
                    Sortable="true">
                    </IgbColumn>

                </IgbColumnGroup>

            </IgbColumnGroup>

        </IgbTreeGrid>

    </div>
</div>

@code {
    

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

    }

    private IgbTreeGrid treeGrid;
    private IgbGridToolbarExporter gridToolbarExporter1;

    private EmployeesFlatDetails _employeesFlatDetails = null;
    public EmployeesFlatDetails EmployeesFlatDetails
    {
        get
        {
            if (_employeesFlatDetails == null)
            {
                _employeesFlatDetails = new EmployeesFlatDetails();
            }
            return _employeesFlatDetails;
        }
    }

}razorCOPY CODE

igRegisterScript("WebGridExportEventMultiColumnHeaders", (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.

 <IgbTreeGrid>
    <IgbGridToolbar>
      <IgbGridToolbarActions>
        <IgbGridToolbarExporter
          ExportExcel="true" ExportStartedScript="WebGridExportEventFreezeHeaders">
        </IgbGridToolbarExporter>
      </IgbGridToolbarActions>
    </IgbGridToolbar>
 </IgbTreeGrid>

igRegisterScript("WebGridExportEventFreezeHeaders", (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.
Cell Styling	The excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the Excel Library.

API References

• ExcelExporterService
• ExcelExporterOptions
• IgbTreeGrid

Additional Resources

Our community is active and always welcoming to new ideas.

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