Skip to content

Commit e17c428

Browse files
dimodidimodi
authored
kb(spreadsheet): Add KB for binding Spreadsheet to collection (#2569)
1 parent 5bc8009 commit e17c428

File tree

2 files changed

+184
-0
lines changed

2 files changed

+184
-0
lines changed

‎components/spreadsheet/overview.md

+1
Original file line numberDiff line numberDiff line change
@@ -131,3 +131,4 @@ The Blazor Spreadsheet component exposes methods for programmatic operation. To
131131

132132
* [Live Demo: Spreadsheet](https://demos.telerik.com/blazor-ui/spreadsheet/overview)
133133
* [Spreadsheet API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpreadsheet)
134+
* [Bind Spreadsheet to IEnumerable]({%slug spreadsheet-kb-bind-to-json-ienumerable-list-collection%})

‎knowledge-base/spreadsheet-bind-to-json-ienumerable-list-collection.md

+183
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
---
2+
title: Bind Spreadsheet to IEnumerable or JSON
3+
description: Learn how to bind the Telerik Spreadsheet for Blazor to a collection of objects from a JSON or IEnumerable.
4+
type: how-to
5+
page_title: How to Bind Telerik Blazor Spreadsheet to JSON or IEnumerable
6+
slug: spreadsheet-kb-bind-to-json-ienumerable-list-collection
7+
tags: telerik, blazor, spreadsheet
8+
ticketid: 1671569
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Spreadsheet for Blazor
20+
</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
25+
## Description
26+
27+
The [Telerik Spreadsheet component for Blazor]({%slug spreadsheet-overview%}) can display data from a byte array (`byte[]`). This KB demonstrates how to bind the Spreadsheet to object data, for example, `IEnumerable`, `List` or any other collection, including deserialized `JSON`.
28+
29+
## Solution
30+
31+
The approach requires [Telerik Document Processing]({%slug dpl-in-blazor%}) to create an [Excel file in memory](https://docs.telerik.com/devtools/document-processing/knowledge-base/generate-excel-files-from-ienumerable-collections) and convert it to a byte array which is compatible with the Spreadsheet component.
32+
33+
1. Install the required [Telerik Document Processing NuGet packages](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/getting-started):
34+
* `Telerik.Documents.Spreadsheet`
35+
* `Telerik.Documents.Spreadsheet.FormatProviders.OpenXml`
36+
1. [Create a `Workbook`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-workbooks/create-open-and-save-workbooks) and [add at least one `Worksheet`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-worksheets/add-remove-worksheets) to it.
37+
1. [Populate the worksheet `Cells` collection](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-cells/accessing-cells-of-worksheet) by row index and column index.
38+
1. (optional) [Set cell styles](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-cells/get-set-clear-properties).
39+
1. (optional) Set [column widths](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-rows-and-columns/resizing) or [number formats](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/features/number-formats).
40+
1. Use an [`XlsxFormatProvider` to export the Excel file](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/formats-and-conversion/import-and-export-to-excel-file-formats/xlsx/xlsxformatprovider) to a `MemoryStream` and then to a `byte[]` which the Spreadsheet can consume.
41+
42+
<div class="skip-repl"></div>
43+
44+
````CSHTML
45+
@using System.ComponentModel.DataAnnotations
46+
@using System.Reflection
47+
48+
@using Telerik.Documents.Common.Model
49+
@using Telerik.Windows.Documents.Spreadsheet.FormatProviders
50+
@using Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx
51+
@using Telerik.Windows.Documents.Spreadsheet.Model
52+
53+
<h1>Bind Spreadsheet to <code>IEnumerable</code></h1>
54+
55+
<h2>Spreadsheet</h2>
56+
57+
<TelerikSpreadsheet Data="@SpreadsheetData" Height="400px" />
58+
59+
<h2>Grid</h2>
60+
61+
<TelerikGrid Data="@GridData" AutoGenerateColumns="true" />
62+
63+
<style>
64+
h1 {
65+
font-size: 1.5rem;
66+
}
67+
68+
h2 {
69+
font-size: 1.2rem;
70+
}
71+
</style>
72+
73+
@code {
74+
private List<SampleModel> GridData { get; set; } = new();
75+
76+
private byte[]? SpreadsheetData { get; set; }
77+
78+
private void CreateExcelFileFromIEnumerable()
79+
{
80+
// Create Workbook and sheet.
81+
var workbook = new Workbook();
82+
var worksheet = workbook.Worksheets.Add();
83+
worksheet.Name = "Product Worksheet";
84+
85+
// Get DisplayName attributes or property names.
86+
string[] columnTitles = typeof(SampleModel)
87+
.GetProperties(BindingFlags.Instance | BindingFlags.Public)
88+
.Select(x => x.GetCustomAttribute<DisplayAttribute>()?.Name ?? x.Name)
89+
.ToArray();
90+
91+
// Populate the header cells.
92+
// If the data cell order is hard-coded, you can hard-code the header titles too.
93+
for (int i = 0; i < columnTitles.Length; i++)
94+
{
95+
worksheet.Cells[0, i].SetValue(columnTitles[i]);
96+
worksheet.Cells[0, i].SetIsBold(true);
97+
worksheet.Cells[0, i].SetFontFamily(new ThemableFontFamily("Arial"));
98+
worksheet.Cells[0, i].SetFontSize(12);
99+
}
100+
101+
// Populate the data cells.
102+
for (int i = 0; i < GridData.Count; i++)
103+
{
104+
worksheet.Cells[1 + i, 0].SetValue(GridData[i].Id);
105+
worksheet.Cells[1 + i, 1].SetValue(GridData[i].Name);
106+
worksheet.Cells[1 + i, 2].SetValue(GridData[i].Price.ToString());
107+
worksheet.Cells[1 + i, 3].SetValue(GridData[i].Quantity);
108+
109+
// Default formats may use different default styles.
110+
worksheet.Cells[1 + i, 4].SetValue(GridData[i].ReleaseDate);
111+
worksheet.Cells[1 + i, 4].SetFontFamily(new ThemableFontFamily("Arial"));
112+
worksheet.Cells[1 + i, 4].SetFontSize(12);
113+
114+
worksheet.Cells[1 + i, 5].SetValue(GridData[i].OnSale);
115+
}
116+
117+
// Autofit all column widths...
118+
//worksheet.Columns[worksheet.UsedCellRange].AutoFitWidth();
119+
120+
// OR
121+
// autofit specific columns...
122+
//worksheet.Columns[4].AutoFitWidth();
123+
124+
// OR
125+
// hard-code all column widths...
126+
//worksheet.Columns[worksheet.UsedCellRange].SetWidth(new ColumnWidth(100, true));
127+
128+
// OR
129+
// hard-code specific column widths...
130+
worksheet.Columns[0].SetWidth(new ColumnWidth(40, true));
131+
worksheet.Columns[1].SetWidth(new ColumnWidth(100, true));
132+
worksheet.Columns[4].SetWidth(new ColumnWidth(100, true));
133+
134+
// Export the workbook to a MemoryStream.
135+
IWorkbookFormatProvider formatProvider = new XlsxFormatProvider();
136+
using MemoryStream ms = new();
137+
formatProvider.Export(workbook, ms, new TimeSpan(0, 0, 3));
138+
139+
SpreadsheetData = ms.ToArray();
140+
}
141+
142+
protected override void OnInitialized()
143+
{
144+
for (int i = 1; i <= 5; i++)
145+
{
146+
GridData.Add(new SampleModel()
147+
{
148+
Id = i,
149+
Name = $"Name {i}",
150+
Price = Random.Shared.Next(1, 100) * 1.23m,
151+
Quantity = Random.Shared.Next(0, 1000),
152+
ReleaseDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)),
153+
OnSale = i % 3 == 0
154+
});
155+
}
156+
157+
CreateExcelFileFromIEnumerable();
158+
}
159+
160+
public class SampleModel
161+
{
162+
public int Id { get; set; }
163+
164+
[Display(Name = "Product Name")]
165+
public string Name { get; set; } = string.Empty;
166+
167+
public decimal Price { get; set; }
168+
169+
public int Quantity { get; set; }
170+
171+
[Display(Name = "Release Date")]
172+
public DateTime ReleaseDate { get; set; }
173+
174+
[Display(Name = "On Sale")]
175+
public bool OnSale { get; set; }
176+
}
177+
}
178+
````
179+
180+
## See Also
181+
182+
* [Create Excel Documents with SpreadProcessing](https://docs.telerik.com/devtools/document-processing/knowledge-base/generate-excel-files-from-ienumerable-collections)
183+
* [Spreadsheet Overview]({%slug spreadsheet-overview%})

0 commit comments

Comments
 (0)