Blazor 계층형 그리드를 Excel 서비스로 내보내기

Blazor Hierarchical Grid의 Ignite UI for Blazor Export to Excel Service는 데이터를 Excel로 내보낼 수 있습니다. 데이터 내보내기 기능은 ExcelExporterService 클래스에 캡슐화되어 있으며 데이터는 MS Excel 테이블 형식으로 내보내집니다. 이 형식은 필터링, 정렬 등의 기능을 허용합니다. 이를 위해 ExcelExporterService의 Export 메서드를 호출하고 IgbHierarchicalGrid 구성 요소를 첫 번째 인수로 전달하여 그리드를 쉽게 내보내야 합니다.

すぐに使用できる機能のフルセット は、ページング、ソート、フィルタリング、編集、グループ化から行と列の仮想化まで、あらゆる機能をカバーします。.NET 開発者には制限はありません。

無料で試してみる

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();
        }
    }
}csコピー

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
        });
    }
}csコピー

@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;
        }
    }

}razorコピー

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

Like this sample? Get access to our complete Ignite UI for Blazor toolkit and start building your own apps in minutes. Download it for free.

Export Multi Column Headers Grid

이제 내보낼 수 있습니다. IgbHierarchicalGrid 정의된 경우 다중 열 머리글. 모든 헤더는 내보낸 Excel 파일에 표시되는 대로 반영됩니다. IgbHierarchicalGrid. 내보낸 데이터에서 정의된 다중 열 헤더를 제외하려면 다음을 설정할 수 있습니다. ExporterOption IgnoreMultiColumnHeaders 받는 사람 true.

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

EXAMPLE

DATA

MODULES

RAZOR

JS

CSS

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"
        });
    }
}csコピー

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();
        }
    }
}csコピー

@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;
        }
    }

}razorコピー

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

jsコピー

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

Export Grid with Frozen Column Headers

기본적으로 Excel 내보내기 서비스는 스크롤 가능한(고정 해제된) 열 머리글과 함께 그리드를 내보냅니다. 사용자가 레코드를 스크롤할 때 항상 표시되도록 내보낸 Excel 파일 위에 모든 헤더를 고정하려는 시나리오가 있습니다. 이를 달성하려면 ExporterOption FreezeHeaders​ ​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

한정	설명
계층 수준	Excel 내보내기 서비스는 최대 8개 수준의 계층 구조를 생성할 수 있습니다.
최대 워크시트 크기	Excel에서 지원되는 최대 워크시트 크기는 1,048,576행 x 16,384열입니다.
고정된 열 내보내기	내보낸 Excel 파일에서 고정된 열은 고정되지 않지만 그리드에 나타나는 것과 동일한 순서로 표시됩니다.

API References

• ExcelExporterService
• ExcelExporterOptions
• IgbHierarchicalGrid

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.

• Ignite UI for Blazor 포럼
• Ignite UI for Blazor 깃허브