You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/grid/export/csv.md
+50-41
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: Export to CSV the Grid for Blazor.
5
5
slug: grid-export-csv
6
6
tags: telerik,blazor,grid,export,csv
7
7
published: True
8
-
position: 1
8
+
position: 3
9
9
---
10
10
11
11
# Grid CSV Export
@@ -14,25 +14,38 @@ You can export the grid to CSV with a click of a button. The current filter, sor
14
14
15
15
When you click the Export button, your browser will receive the resulting file.
16
16
17
+
>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview).
18
+
17
19
#### In This Article
18
20
19
21
-[Basics](#basics)
20
22
-[Programmatic Export](#programmatic-export)
21
23
-[Customization](#customization)
22
-
-[Notes](#notes)
23
-
-[See Also](#see-also)
24
24
25
25
## Basics
26
26
27
-
To enable the grid CSV Export, add a [command button](slug:components/grid/columns/command) with the `CsvExport` command name to the [Grid toolbar](slug:components/grid/features/toolbar).
27
+
To enable the CSV export in the Grid:
28
+
29
+
1.[Add the Export Tool](#add-the-export-tool)
30
+
1.[Configure the Export Settings](#configure-the-export-settings)
31
+
32
+
### Add the Export Tool
33
+
34
+
Add the `GridToolBarCsvExportTool` inside the [`<GridToolBar>`](slug:components/grid/features/toolbar#command-tools):
28
35
29
36
````RAZOR.skip-repl
30
-
<GridToolBarTemplate>
31
-
<GridCommandButton Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
32
-
</GridToolBarTemplate>
37
+
<GridToolBar>
38
+
<GridToolBarCsvExportTool>
39
+
Export to CSV
40
+
</GridToolBarCsvExportTool>
41
+
</GridToolBar>
33
42
````
34
43
35
-
Optionally, you can also set the `GridCsvExport` tag settings under the `GridExport` tag to subscribe to the [Grid export events](slug:grid-export-events) that allow further customization of the exported columns/data or configure the CSV export options:
44
+
If you have a custom Toolbar, add a command button with the `CsvExport` command name inside a [templated Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(`<GridToolBarTemplate>`).
45
+
46
+
### Configure the Export Settings
47
+
48
+
To configure the CSV export settings, add the `GridCsvExport` tag under the `GridExport` tag. You may set the following options:
@@ -72,19 +92,17 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp
72
92
@code {
73
93
private List<SampleData> GridData { get; set; }
74
94
75
-
private bool ExportAllPages { get; set; }
76
-
77
95
protected override void OnInitialized()
78
96
{
79
97
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
80
-
{
81
-
ProductId = x,
82
-
ProductName = $"Product {x}",
83
-
UnitsInStock = x * 2,
84
-
Price = 3.14159m * x,
85
-
Discontinued = x % 4 == 0,
86
-
FirstReleaseDate = DateTime.Now.AddDays(-x)
87
-
}).ToList();
98
+
{
99
+
ProductId = x,
100
+
ProductName = $"Product {x}",
101
+
UnitsInStock = x * 2,
102
+
Price = 3.14159m * x,
103
+
Discontinued = x % 4 == 0,
104
+
FirstReleaseDate = DateTime.Now.AddDays(-x)
105
+
}).ToList();
88
106
}
89
107
90
108
public class SampleData
@@ -194,24 +212,15 @@ To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` e
194
212
195
213
The component allows you to control the data set that will be exported. It also provides built-in customization options for the columns, such as `Width`, `Title`, and more.
196
214
197
-
For more advanced customizations (such as coloring the headers, bolding the titles, or even changing cell values) the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`SpreadProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview) or the [`SpreadStreamProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) libraries that are available with your license.
215
+
For more advanced customizations (such as formatting the numbers and dates, or changing the default comma delimiter) the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`SpreadProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview) or the [`SpreadStreamProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) libraries that are available with your license.
198
216
199
217
[Read more about how to customize the exported file...](slug:grid-export-events)
200
218
201
-
## Notes
202
-
203
-
The CSV export has the following specifics:
204
-
205
-
* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document. If you need to add such structure, consider [exporting to an Excel file](slug:grid-export-excel).
206
-
* 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`. If you need additional information, see if you can add it in a Field in the model, or create your own Excel file. Find a <ahref="https://feedback.telerik.com/blazor/1485764-customize-the-excel-file-before-it-gets-to-the-client"target="_blank">project example on how to generate your own exported file</a>.
Copy file name to clipboardExpand all lines: components/grid/export/excel.md
+53-35
Original file line number
Diff line number
Diff line change
@@ -5,7 +5,7 @@ description: Export to Excel the Grid for Blazor.
5
5
slug: grid-export-excel
6
6
tags: telerik,blazor,grid,export,excel
7
7
published: True
8
-
position: 1
8
+
position: 5
9
9
---
10
10
11
11
# Grid Excel Export
@@ -14,25 +14,39 @@ You can export the grid to Excel with a click of a button. The current filter, s
14
14
15
15
When you click the Export button, your browser will receive the resulting file.
16
16
17
+
>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview).
17
18
18
19
#### In This Article
19
20
20
21
-[Basics](#basics)
21
22
-[Programmatic Export](#programmatic-export)
22
23
-[Customization](#customization)
23
-
-[Notes](#notes)
24
24
25
25
## Basics
26
26
27
-
To enable the Grid Excel Export, add a [command button](slug:components/grid/columns/command) with the `ExcelExport` command name to the [Grid toolbar](slug:components/grid/features/toolbar).
27
+
To enable the Excel export in the Grid:
28
+
29
+
1.[Add the Export Tool](#add-the-export-tool)
30
+
1.[Configure the Export Settings](#configure-the-export-settings)
31
+
1.[Set the Columns Width in Pixels](#set-the-columns-width-in-pixels)
32
+
33
+
### Add the Export Tool
34
+
35
+
Add the `GridToolBarExcelExportTool` inside the [`<GridToolBar>`](slug:components/grid/features/toolbar#command-tools):
28
36
29
37
````RAZOR.skip-repl
30
-
<GridToolBarTemplate>
31
-
<GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
32
-
</GridToolBarTemplate>
38
+
<GridToolBar>
39
+
<GridToolBarExcelExportTool>
40
+
Export to Excel
41
+
</GridToolBarExcelExportTool>
42
+
</GridToolBar>
33
43
````
34
44
35
-
Optionally, you can also set the `GridExcelExport` tag settings under the `GridExport` tag to subscribe to the [Grid export events](slug:grid-export-events) that allow further customization of the exported columns/data or configure the Excel export options:
45
+
If you have a custom Toolbar, add a command button with the `ExcelExport` command name inside a [templated Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(`<GridToolBarTemplate>`).
46
+
47
+
### Configure the Export Settings
48
+
49
+
To configure the Excel export settings, add the `GridExcelExport` tag under the `GridExport` tag. You may set the following options:
@@ -41,22 +55,37 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE
41
55
|`FileName`|`string`| The name of the file. The grid will add the `.xslx` extension for you. |
42
56
|`AllPages`|`bool`| Whether to export the current page only, or the entire data from the data source. |
43
57
44
-
>caption Export the Grid to Excel - Example
58
+
For further customizations, use the `GridExcelExport` tag to subscribe to the [Grid export events](slug:grid-export-events).
59
+
60
+
### Set the Columns Width in Pixels
61
+
62
+
The export to Excel does not require that all columns have explicit widths set. However, if you do set the column widths, ensure you use only `px`.
63
+
64
+
Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. If you prefer to use different than `px` units in the UI, handle the [`OnBeforeExport` event to provide the column width in pixels for the proper export](slug:grid-export-events#for-excel-export).
65
+
66
+
>caption Export the Grid to Excel
45
67
46
68
````RAZOR
47
69
@* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
@@ -72,19 +101,17 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE
72
101
@code {
73
102
private List<SampleData> GridData { get; set; }
74
103
75
-
private bool ExportAllPages { get; set; }
76
-
77
104
protected override void OnInitialized()
78
105
{
79
106
GridData = Enumerable.Range(1, 100).Select(x => new SampleData
80
-
{
81
-
ProductId = x,
82
-
ProductName = $"Product {x}",
83
-
UnitsInStock = x * 2,
84
-
Price = 3.14159m * x,
85
-
Discontinued = x % 4 == 0,
86
-
FirstReleaseDate = DateTime.Now.AddDays(-x)
87
-
}).ToList();
107
+
{
108
+
ProductId = x,
109
+
ProductName = $"Product {x}",
110
+
UnitsInStock = x * 2,
111
+
Price = 3.14159m * x,
112
+
Discontinued = x % 4 == 0,
113
+
FirstReleaseDate = DateTime.Now.AddDays(-x)
114
+
}).ToList();
88
115
}
89
116
90
117
public class SampleData
@@ -199,19 +226,10 @@ For more advanced customization (such as coloring the headers or bolding the tit
199
226
200
227
Read more about how to [customize the exported file](slug:grid-export-events).
201
228
202
-
## Notes
203
-
204
-
The Excel export has the following specifics:
205
-
206
-
* Excel does not understand units different than `px` for the column `Width`, and if you use them (such as `rem` or `%`), it will fail to parse them and will render a collapsed (hidden) column with zero width.
207
-
* 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`. If you need additional information, see if you can add it in a Field in the model, or create your own Excel file. Find a <ahref="https://feedback.telerik.com/blazor/1485764-customize-the-excel-file-before-it-gets-to-the-client"target="_blank">project example on how to generate your own exported file</a>. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel).
0 commit comments