chore(grid): refactor export notes

components/grid/export/csv.md

@@ -5,7 +5,7 @@ description: Export to CSV the Grid for Blazor.
 slug: grid-export-csv
 tags: telerik,blazor,grid,export,csv
 published: True
-position: 1
+position: 3
 ---
 
 # Grid CSV Export
@@ -14,25 +14,38 @@ You can export the grid to CSV with a click of a button. The current filter, sor
 
 When you click the Export button, your browser will receive the resulting file.
 
+>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview).
+
 #### In This Article
 
   - [Basics](#basics)
   - [Programmatic Export](#programmatic-export)
   - [Customization](#customization)
-  - [Notes](#notes)
-  - [See Also](#see-also)
 
 ## Basics
 
-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).
+To enable the CSV export in the Grid:
+
+1. [Add the Export Tool](#add-the-export-tool)
+1. [Configure the Export Settings](#configure-the-export-settings)
+
+### Add the Export Tool
+
+Add the `GridToolBarCsvExportTool` inside the [`<GridToolBar>`](slug:components/grid/features/toolbar#command-tools):
 
 ````RAZOR.skip-repl
-<GridToolBarTemplate>
-    <GridCommandButton Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
-</GridToolBarTemplate>
+<GridToolBar>        
+    <GridToolBarCsvExportTool>
+        Export to CSV
+    </GridToolBarCsvExportTool>
+</GridToolBar>
 ````
 
-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:
+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>`).
+
+### Configure the Export Settings
+
+To configure the CSV export settings, add the `GridCsvExport` tag under the `GridExport` tag. You may set the following options:
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
@@ -41,22 +54,29 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp
 | `FileName` | `string` | The name of the file. The grid will add the `.csv` extension for you. |
 | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. |
 
->caption Export the Grid to CSV - Example
+For further customizations, use the `GridExcelExport` tag to subscribe to the [Grid export events](slug:grid-export-events).
+
+>caption Export the Grid to CSV
 
 ````RAZOR
 @* You can sort, group, filter, page the grid, reorder its columns, and you can click the
     Export button to save the current data *@
 
-<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Reorderable="true"
-             FilterMode="@GridFilterMode.FilterRow" Groupable="true">
+<TelerikGrid Data="@GridData"
+             Pageable="true"
+             Sortable="true"
+             Reorderable="true"
+             FilterMode="@GridFilterMode.FilterRow"
+             Groupable="true">
 
-    <GridToolBarTemplate>
-        <GridCommandButton Command="CsvExport" Icon="@SvgIcon.FileCsv">Export to CSV</GridCommandButton>
-        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
-    </GridToolBarTemplate>
+    <GridToolBar>
+        <GridToolBarCsvExportTool>
+            Export to CSV
+        </GridToolBarCsvExportTool>
+    </GridToolBar>
 
     <GridExport>
-        <GridCsvExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
+        <GridCsvExport FileName="telerik-grid-export" />
     </GridExport>
 
     <GridColumns>
@@ -72,19 +92,17 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp
 @code {
     private List<SampleData> GridData { get; set; }
 
-    private bool ExportAllPages { get; set; }
-
     protected override void OnInitialized()
     {
         GridData = Enumerable.Range(1, 100).Select(x => new SampleData
-        {
-            ProductId = x,
-            ProductName = $"Product {x}",
-            UnitsInStock = x * 2,
-            Price = 3.14159m * x,
-            Discontinued = x % 4 == 0,
-            FirstReleaseDate = DateTime.Now.AddDays(-x)
-        }).ToList();
+            {
+                ProductId = x,
+                ProductName = $"Product {x}",
+                UnitsInStock = x * 2,
+                Price = 3.14159m * x,
+                Discontinued = x % 4 == 0,
+                FirstReleaseDate = DateTime.Now.AddDays(-x)
+            }).ToList();
     }
 
     public class SampleData
@@ -194,24 +212,15 @@ To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` e
 
 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.
 
-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.
+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.
 
 [Read more about how to customize the exported file...](slug:grid-export-events)
 
-## Notes
-
-The CSV export has the following specifics:
-
-* 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).
-* 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 <a href="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>.
-
-@[template](/_contentTemplates/grid/export.md#export-common-notes)
 
 ## See Also
 
-  * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export)
-  * [Custom cell formatting of the exported file with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing)
-  * [Custom cell formatting of the exported file with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) 
-  * [Format numbers and dates in the exported CSV file from the Grid](slug:grid-kb-number-formatting-of-the-csv-export)
-  * [Change the default CSV delimiter (comma) during Grid export](slug:grid-kb-csv-export-change-field-delimiter)
-  * [Blazor Grid](slug:grid-overview)
+* [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export)
+* [Format numbers and dates in the exported CSV file from the Grid](slug:grid-kb-number-formatting-of-the-csv-export)
+* [Change the default CSV delimiter (comma) during Grid export](slug:grid-kb-csv-export-change-field-delimiter)
+* [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting)
+* [Blazor Grid](slug:grid-overview)

components/grid/export/excel.md

@@ -5,7 +5,7 @@ description: Export to Excel the Grid for Blazor.
 slug: grid-export-excel
 tags: telerik,blazor,grid,export,excel
 published: True
-position: 1
+position: 5
 ---
 
 # Grid Excel Export
@@ -14,25 +14,39 @@ You can export the grid to Excel with a click of a button. The current filter, s
 
 When you click the Export button, your browser will receive the resulting file.
 
+>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview).
 
 #### In This Article
 
   - [Basics](#basics)
   - [Programmatic Export](#programmatic-export)
   - [Customization](#customization)
-  - [Notes](#notes)
 
 ## Basics
 
-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).
+To enable the Excel export in the Grid:
+
+1. [Add the Export Tool](#add-the-export-tool)
+1. [Configure the Export Settings](#configure-the-export-settings)
+1. [Set the Columns Width in Pixels](#set-the-columns-width-in-pixels)
+
+### Add the Export Tool
+
+Add the `GridToolBarExcelExportTool` inside the [`<GridToolBar>`](slug:components/grid/features/toolbar#command-tools):
 
 ````RAZOR.skip-repl
-<GridToolBarTemplate>
-    <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
-</GridToolBarTemplate>
+<GridToolBar>        
+    <GridToolBarExcelExportTool>
+        Export to Excel
+    </GridToolBarExcelExportTool>
+</GridToolBar>
 ````
 
-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:
+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>`).
+
+### Configure the Export Settings
+
+To configure the Excel export settings, add the `GridExcelExport` tag under the `GridExport` tag. You may set the following options:
 
 @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
 
@@ -41,22 +55,37 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE
 | `FileName` | `string` | The name of the file. The grid will add the `.xslx` extension for you. |
 | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. |
 
->caption Export the Grid to Excel - Example
+For further customizations, use the `GridExcelExport` tag to subscribe to the [Grid export events](slug:grid-export-events).
+
+### Set the Columns Width in Pixels
+
+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`. 
+
+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).
+
+>caption Export the Grid to Excel
 
 ````RAZOR
 @* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the
     Export button to save the current data *@
 
-<TelerikGrid Data="@GridData" Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
-             FilterMode="@GridFilterMode.FilterRow" Groupable="true" >
+<TelerikGrid Data="@GridData"
+             Pageable="true"
+             Sortable="true"
+             Resizable="true"
+             Reorderable="true"
+             FilterMode="@GridFilterMode.FilterRow"
+             Groupable="true"
+             Width="1200px">
 
-    <GridToolBarTemplate>
-        <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
-        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
-    </GridToolBarTemplate>
+    <GridToolBar>
+        <GridToolBarExcelExportTool>
+            Export to Excel
+        </GridToolBarExcelExportTool>
+    </GridToolBar>
 
     <GridExport>
-        <GridExcelExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
+        <GridExcelExport FileName="telerik-grid-export" />
     </GridExport>
 
     <GridColumns>
@@ -72,19 +101,17 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE
 @code {
     private List<SampleData> GridData { get; set; }
 
-    private bool ExportAllPages { get; set; }
-
     protected override void OnInitialized()
     {
         GridData = Enumerable.Range(1, 100).Select(x => new SampleData
-        {
-            ProductId = x,
-            ProductName = $"Product {x}",
-            UnitsInStock = x * 2,
-            Price = 3.14159m * x,
-            Discontinued = x % 4 == 0,
-            FirstReleaseDate = DateTime.Now.AddDays(-x)
-        }).ToList();
+            {
+                ProductId = x,
+                ProductName = $"Product {x}",
+                UnitsInStock = x * 2,
+                Price = 3.14159m * x,
+                Discontinued = x % 4 == 0,
+                FirstReleaseDate = DateTime.Now.AddDays(-x)
+            }).ToList();
     }
 
     public class SampleData
@@ -199,19 +226,10 @@ For more advanced customization (such as coloring the headers or bolding the tit
 
 Read more about how to [customize the exported file](slug:grid-export-events).
 
-## Notes
-
-The Excel export has the following specifics:
-
-* 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.
-* 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 <a href="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).
-
-@[template](/_contentTemplates/grid/export.md#export-common-notes)
-
-
 ## See Also
 
   * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export)
   * [Custom Cell Formatting of the Exported File with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing)
   * [Custom Cell Formatting of the Exported File with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing)
+  * [Showing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting)
   * [Blazor Grid](slug:grid-overview)