Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(Grid): add docs for export options customizations #2877

Merged
merged 2 commits into from
Apr 2, 2025
Merged

docs(Grid): add docs for export options customizations #2877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f4ba9f
docs(Grid): add docs for export options customizations
xristianstefanov Mar 28, 2025
bd7f71d
chore(Grid): apply changes as per comments
xristianstefanov Apr 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 50 additions & 24 deletions components/grid/export/csv.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,25 +105,27 @@ You can programmatically invoke the export feature of the Grid, by using the fol

| Method | Type | Description |
| --- | --- | --- |
| `SaveAsCsvFileAsync` | `ValueTask` | Sends the exported CSV file to the browser for download. |
| `ExportToCsvAsync` | `Task<MemoryStream>` | Returns the exported data as a `MemoryStream`. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new `MemoryStream` instance. |

>note The same methods are exposed for exporting an [Excel file](slug:grid-export-excel#programmatic-export).
| `SaveAsCsvFileAsync` | `ValueTask` | Sends the exported CSV file to the browser for download. You can pass [`GridCsvExportOptions`](slug:Telerik.Blazor.Components.Grid.GridCsvExportOptionsDescriptor) to customize the export. |
| `ExportToCsvAsync` | `Task<MemoryStream>` | Returns the exported data as a `MemoryStream`. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new `MemoryStream` instance. You can pass [`GridCsvExportOptions`](slug:Telerik.Blazor.Components.Grid.GridCsvExportOptionsDescriptor) to customize the export. |

>caption Invoke the export function from code

````RAZOR
@* Send the exported file for download and get the exported data as a memory stream *@

@using System.IO
@using Telerik.Blazor.Components.Grid;

<TelerikButton OnClick="@(async () => await GridRef.SaveAsCsvFileAsync())">Download the CSV file</TelerikButton>
<TelerikButton OnClick="@GetTheDataAsAStream">Get the Exported Data as a MemoryStream</TelerikButton>
<TelerikButton OnClick="@(async () => await SaveAsCsvWithOptions())">Download CSV with Options</TelerikButton>
<TelerikButton OnClick="@(async () => await ExportToCsvWithOptions())">Get CSV Data with Options</TelerikButton>

<TelerikGrid @ref="@GridRef"
Data="@GridData"
Pageable="true"
Sortable="true"
Resizable="true"
Reorderable="true"
FilterMode="@GridFilterMode.FilterRow"
Groupable="true">
Expand All @@ -138,42 +140,66 @@ You can programmatically invoke the export feature of the Grid, by using the fol
</GridExport>

<GridColumns>
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" />
<GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
<GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="300px" />
<GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
<GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="200px" />
<GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="100px" />
<GridColumn Field="@nameof(SampleData.FirstReleaseDate)" Title="Release Date" Width="300px" />
</GridColumns>
</TelerikGrid>

@code {
private TelerikGrid<SampleData> GridRef { get; set; }

private MemoryStream exportedCSVStream { get; set; }

private MemoryStream exportedCsvStream { get; set; }
private List<SampleData> GridData { get; set; }

private bool ExportAllPages { get; set; }

private async Task GetTheDataAsAStream()
{
MemoryStream finalizedStream = await GridRef.ExportToCsvAsync();
var exportStream = await GridRef.ExportToCsvAsync();
exportedCsvStream = new MemoryStream(exportStream.ToArray());
}

private async Task SaveAsCsvWithOptions()
{
await GridRef.SaveAsCsvFileAsync(new GridCsvExportOptions()
{
FileName = "custom-export",
Data = GridData.Take(10).ToList(),
Columns = new List<GridCsvExportColumn>()
{
new GridCsvExportColumn() { Field = nameof(SampleData.ProductId) },
new GridCsvExportColumn() { Field = nameof(SampleData.ProductName) }
}
});
}

exportedCSVStream = new MemoryStream(finalizedStream.ToArray());
private async Task ExportToCsvWithOptions()
{
var exportStream = await GridRef.ExportToCsvAsync(new GridCsvExportOptions()
{
Data = GridData.Take(10).ToList(),
Columns = new List<GridCsvExportColumn>()
{
new GridCsvExportColumn() { Field = nameof(SampleData.ProductId) },
new GridCsvExportColumn() { Field = nameof(SampleData.ProductName) }
}
});
exportedCsvStream = new MemoryStream(exportStream.ToArray());
}

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
Expand Down
58 changes: 42 additions & 16 deletions components/grid/export/excel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,20 +105,21 @@ You can programmatically invoke the export feature of the Grid, by using the fol

| Method | Type | Description |
| --- | --- | --- |
| `SaveAsExcelFileAsync` | `ValueTask` | Sends the exported excel file to the browser for download. |
| `ExportToExcelAsync` | `Task<MemoryStream>` | Returns the exported data as a `MemoryStream`. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new `MemoryStream` instance. |

>note The same methods are exposed for exporting a [CSV file](slug:grid-export-csv#programmatic-export).
| `SaveAsExcelFileAsync` | `ValueTask` | Sends the exported excel file to the browser for download. You can pass [`GridExcelExportOptions`](slug:Telerik.Blazor.Components.Grid.GridExcelExportOptionsDescriptor) to customize the export. |
| `ExportToExcelAsync` | `Task<MemoryStream>` | Returns the exported data as a `MemoryStream`. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new `MemoryStream` instance. You can pass [`GridExcelExportOptions`](slug:Telerik.Blazor.Components.Grid.GridExcelExportOptionsDescriptor) to customize the export. |

>caption Invoke the export function from code

````RAZOR
@* Send the exported file for download and get the exported data as a memory stream *@

@using System.IO
@using Telerik.Blazor.Components.Grid;

<TelerikButton OnClick="@(async () => await GridRef.SaveAsExcelFileAsync())">Download the excel file</TelerikButton>
<TelerikButton OnClick="@GetTheDataAsAStream">Get the Exported Data as a MemoryStream</TelerikButton>
<TelerikButton OnClick="@(async () => await SaveAsExcelWithOptions())">Download Excel with Options</TelerikButton>
<TelerikButton OnClick="@(async () => await ExportToExcelWithOptions())">Get Excel Data with Options</TelerikButton>

<TelerikGrid @ref="@GridRef"
Data="@GridData"
Expand Down Expand Up @@ -150,31 +151,56 @@ You can programmatically invoke the export feature of the Grid, by using the fol

@code {
private TelerikGrid<SampleData> GridRef { get; set; }

private MemoryStream exportedExcelStream { get; set; }

private List<SampleData> GridData { get; set; }

private bool ExportAllPages { get; set; }

private async Task GetTheDataAsAStream()
{
MemoryStream finalizedStream = await GridRef.ExportToExcelAsync();

exportedExcelStream = new MemoryStream(finalizedStream.ToArray());
}

private async Task SaveAsExcelWithOptions()
{
await GridRef.SaveAsExcelFileAsync(new GridExcelExportOptions()
{
FileName = "custom-export",
Data = GridData.Take(10).ToList(),
Columns = new List<GridExcelExportColumn>()
{
new GridExcelExportColumn() { Field = nameof(SampleData.ProductId), Width = "100px" },
new GridExcelExportColumn() { Field = nameof(SampleData.ProductName), Width = "300px" }
}
});
}

private async Task ExportToExcelWithOptions()
{
var exportStream = await GridRef.ExportToExcelAsync(new GridExcelExportOptions()
{
Data = GridData.Take(10).ToList(),
Columns = new List<GridExcelExportColumn>()
{
new GridExcelExportColumn() { Field = nameof(SampleData.ProductId), Width = "100px" },
new GridExcelExportColumn() { Field = nameof(SampleData.ProductName), Width = "300px" }
}
});

exportedExcelStream = new MemoryStream(exportStream.ToArray());
}

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
Expand Down
Loading