Blazor Hierarchical Grid Export to Excel サービス
Blazor Hierarchical Grid の Ignite UI for Blazor Export to Excel サービスは、データを Excel へエクスポートできます。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、ExcelExporterService の Export メソッドを呼び出して最初の引数として IgbHierarchicalGrid コンポーネントを渡し、グリッドを簡単にエクスポートします。
Blazor Excel Exporter の例
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
このサンプルが気に入りましたか? 完全な Ignite UI for Blazorツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
複数列ヘッダー グリッドのエクスポート
定義された複数列ヘッダーを使用して IgbHierarchicalGrid をエクスポートできるようになりました。すべてのヘッダーは、IgbHierarchicalGrid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、ExporterOption IgnoreMultiColumnHeaders を true に設定できます。
Excel テーブルは複数の列ヘッダーをサポートしていないため、エクスポートされた IgbHierarchicalGrid はテーブルとしてフォーマットされません。
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
固定された列ヘッダーを使用してグリッドをエクスポートする
デフォルトでは、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既知の問題と制限
| 制限 | 説明 |
|---|---|
| 階層レベル | Excel エクスポーター サービスは、最大 8 レベルの階層を作成できます。 |
| ワークシートの最大サイズ | Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。 |
| ピン固定列された列のエクスポート | エクスポートされた Excel ファイルでは、ピン固定列は固定されませんが、グリッドに表示されるのと同じ順序で表示されます。 |
API リファレンス
ExcelExporterServiceExcelExporterOptionsIgbHierarchicalGrid
その他のリソース
コミュニティに参加して新しいアイデアをご提案ください。