Skip to content

Commit 111b160

Browse files
marin-bratanovmarin-bratanov
authored
Grid excel export (#66)
* docs(grid): excel export * chore(grid): fix export demo link
1 parent 46d2daf commit 111b160

File tree

2 files changed

+178
-0
lines changed

2 files changed

+178
-0
lines changed

‎_config.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,9 @@ navigation:
6565
"*components/grid/editing":
6666
title: "Editing"
6767
position: 10
68+
"*components/grid/export":
69+
title: "Export"
70+
position: 24
6871
"*components/grid/selection":
6972
title: "Selection"
7073
position: 24

‎components/grid/export/excel.md

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
---
2+
title: Excel
3+
page_title: Grid for Blazor | Excel Export
4+
description: Export to Excel the Grid for Blazor
5+
slug: grid-export-excel
6+
tags: telerik,blazor,grid,export,excel
7+
published: True
8+
position: 1
9+
---
10+
11+
# Excel Export
12+
13+
You can export the grid to Excel with a click of a button. The current filter, sort, page, grouping, column order and column size are applied to the `xlsx` document.
14+
15+
When you click the Export button, your browser will receive the resulting file.
16+
17+
18+
## Basics
19+
20+
To enable the grid Excel Export, add a [command button]({%slug components/grid/columns/command%}) with the `ExcelExport` command name to the [toolbar]({%slug components/grid/features/toolbar%}).
21+
22+
````
23+
<GridToolBar>
24+
<GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
25+
</GridToolBar>
26+
````
27+
28+
Optionally, you can also set the `GridExcelExport` tag settings under the `GridExport` tag to choose:
29+
30+
* `FileName` - the name of the file. The grid will add the `.xslx` extension for you.
31+
* `AllPages` - whether to export the current page only, or the entire data from the data source.
32+
33+
>caption Export the Grid to Excel - Example
34+
35+
````CSHTML
36+
@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
37+
Export button to save the current data *@
38+
39+
<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
40+
FilterMode="@GridFilterMode.FilterRow" Groupable="true" >
41+
42+
<GridToolBar>
43+
<GridCommandButton Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
44+
<label><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
45+
</GridToolBar>
46+
47+
<GridExport>
48+
<GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
49+
</GridExport>
50+
51+
<GridColumns>
52+
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
53+
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
54+
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
55+
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
56+
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
57+
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
58+
</GridColumns>
59+
</TelerikGrid>
60+
61+
@code {
62+
List<SampleData> GridData { get; set; }
63+
bool ExportAllPages { get; set; }
64+
65+
protected override void OnInitialized()
66+
{
67+
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
68+
{
69+
ProductId = x,
70+
ProductName = $"Product {x}",
71+
UnitsInStock = x * 2,
72+
Price = 3.14159m * x,
73+
Discontinued = x % 4 == 0,
74+
FirstReleaseDate = DateTime.Now.AddDays(-x)
75+
}).ToList();
76+
}
77+
78+
public class SampleData
79+
{
80+
public int ProductId { get; set; }
81+
public string ProductName { get; set; }
82+
public int UnitsInStock { get; set; }
83+
public decimal Price { get; set; }
84+
public bool Discontinued { get; set; }
85+
public DateTime FirstReleaseDate { get; set; }
86+
}
87+
}
88+
````
89+
90+
## Notes
91+
92+
The Excel export has the following specifics:
93+
94+
* `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no boolean data type in Excel and these string values are the most common ones used in data and macros.
95+
96+
* Date and number formats are exported with the current app culture. The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates.
97+
98+
* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`.
99+
100+
* Only columns that have a `Field` set are exported.
101+
102+
* If you are using the `OnRead` event, only the current page of data will be exported, because that's all the grid has at the time of the export action.
103+
104+
* With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example:
105+
106+
**C#**
107+
108+
services.AddServerSideBlazor().AddHubOptions(o =>
109+
{
110+
o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB
111+
});
112+
113+
* With Client-side Blazor (WebAssembly), all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. This means that while the file is being generated, the UI will be unresponsive, so you may want to show a loading sign to the user through the `OnClick` handler of the command button, something like:
114+
115+
**Component**
116+
117+
@* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@
118+
119+
<TelerikGrid Data="@GridData" AutoGenerateColumns="true" Pageable="true">
120+
<GridToolBar>
121+
<GridCommandButton OnClick="@ShowLoadingSign" Command="ExcelExport" Icon="@IconName.FileExcel">Export to Excel</GridCommandButton>
122+
</GridToolBar>
123+
<GridExport>
124+
<GridExcelExport AllPages="true" FileName="telerik-grid-export" />
125+
</GridExport>
126+
</TelerikGrid>
127+
128+
<TelerikWindow Visible="@isExporting" Modal="true">
129+
<WindowTitle>Please wait...</WindowTitle>
130+
<WindowContent>We are exporting your data, your file will download shortly.</WindowContent>
131+
</TelerikWindow>
132+
133+
@code {
134+
bool isExporting { get; set; }
135+
136+
async Task ShowLoadingSign()
137+
{
138+
isExporting = true;
139+
StateHasChanged();
140+
// This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker
141+
await Task.Delay(50);
142+
isExporting = false;
143+
}
144+
145+
List<SampleData> GridData { get; set; }
146+
147+
protected override void OnInitialized()
148+
{
149+
GridData = Enumerable.Range(1, 1000).Select(x => new SampleData
150+
{
151+
ProductId = x,
152+
ProductName = $"Product {x}",
153+
UnitsInStock = x * 2,
154+
Price = 3.14159m * x,
155+
Discontinued = x % 4 == 0,
156+
FirstReleaseDate = DateTime.Now.AddDays(-x)
157+
}).ToList();
158+
}
159+
160+
public class SampleData
161+
{
162+
public int ProductId { get; set; }
163+
public string ProductName { get; set; }
164+
public int UnitsInStock { get; set; }
165+
public decimal Price { get; set; }
166+
public bool Discontinued { get; set; }
167+
public DateTime FirstReleaseDate { get; set; }
168+
}
169+
}
170+
171+
172+
## See Also
173+
174+
* [Live Demo: Grid Excel Export](https://demos.telerik.com/blazor-ui/grid/export-excel)
175+

0 commit comments

Comments
 (0)