Servicio de exportación de cuadrícula jerárquica Blazor a Excel
El servicio de exportación a Excel de la Ignite UI for Blazor en Blazor Hierarchical Grid puede exportar datos a Excel. La funcionalidad de exportación de datos está encapsulada en la clase ExcelExporterService
y los datos se exportan en formato de tabla de MS Excel. Este formato permite funciones como filtrado, ordenación, etc. Para ello, debe invocar el método Export
de ExcelExporterService
y pasar el componente IgbHierarchicalGrid
como primer argumento para exportar la cuadrícula fácilmente.
Blazor Excel Exporter Example
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();
}
}
}
csusing 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
Ahora es posible exportar IgbHierarchicalGrid
con encabezados de varias columnas definidos. Todos los encabezados se reflejarán en el archivo de Excel exportado a medida que se muestran en el IgbHierarchicalGrid
. Si desea excluir los encabezados de varias columnas definidos de los datos exportados, puede establecer el ExporterOption
IgnoreMultiColumnHeaders
valor a true
.
The exported IgbHierarchicalGrid will not be formatted as a table, since Excel tables do not support multiple column headers.
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"
});
}
}
csusing 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
De forma predeterminada, el servicio Excel Exporter exporta la cuadrícula con encabezados de columna desplazables (descongelados). Hay escenarios en los que es posible que desee congelar todos los encabezados encima del archivo de Excel exportado para que siempre permanezcan a la vista mientras el usuario se desplaza por los registros. Para lograr esto, puede configurar ExporterOption
FreezeHeaders
en 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
Limitación | Descripción |
---|---|
Niveles de jerarquía | El servicio exportador de Excel puede crear hasta 8 niveles de jerarquía. |
Tamaño máximo de hoja de trabajo | El tamaño máximo de hoja de cálculo admitido por Excel es 1.048.576 filas por 16.384 columnas. |
Exportar columnas fijadas | En el archivo de Excel exportado, las columnas fijadas no se congelarán, sino que se mostrarán en el mismo orden en que aparecen en la cuadrícula. |
API References
ExcelExporterService
ExcelExporterOptions
IgbHierarchicalGrid
Additional Resources
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.