From 4a1249d19f281091d2b9e05079794328a601862d Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Tue, 26 Nov 2024 17:43:57 +0200 Subject: [PATCH] kb(spreadsheet): Add KB for binding Spreadsheet to collection --- components/spreadsheet/overview.md | 1 + ...ind-to-json-ienumerable-list-collection.md | 183 ++++++++++++++++++ 2 files changed, 184 insertions(+) create mode 100644 knowledge-base/spreadsheet-bind-to-json-ienumerable-list-collection.md diff --git a/components/spreadsheet/overview.md b/components/spreadsheet/overview.md index e63ccecaab..a2929c981f 100644 --- a/components/spreadsheet/overview.md +++ b/components/spreadsheet/overview.md @@ -131,3 +131,4 @@ The Blazor Spreadsheet component exposes methods for programmatic operation. To * [Live Demo: Spreadsheet](https://demos.telerik.com/blazor-ui/spreadsheet/overview) * [Spreadsheet API Reference](/blazor-ui/api/Telerik.Blazor.Components.TelerikSpreadsheet) +* [Bind Spreadsheet to IEnumerable]({%slug spreadsheet-kb-bind-to-json-ienumerable-list-collection%}) diff --git a/knowledge-base/spreadsheet-bind-to-json-ienumerable-list-collection.md b/knowledge-base/spreadsheet-bind-to-json-ienumerable-list-collection.md new file mode 100644 index 0000000000..7bd2564341 --- /dev/null +++ b/knowledge-base/spreadsheet-bind-to-json-ienumerable-list-collection.md @@ -0,0 +1,183 @@ +--- +title: Bind Spreadsheet to IEnumerable or JSON +description: Learn how to bind the Telerik Spreadsheet for Blazor to a collection of objects from a JSON or IEnumerable. +type: how-to +page_title: How to Bind Telerik Blazor Spreadsheet to JSON or IEnumerable +slug: spreadsheet-kb-bind-to-json-ienumerable-list-collection +tags: telerik, blazor, spreadsheet +ticketid: 1671569 +res_type: kb +--- + +## Environment + + + + + + + + +
Product + Spreadsheet for Blazor +
+ +## Description + +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`. + +## Solution + +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. + +1. Install the required [Telerik Document Processing NuGet packages](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/getting-started): + * `Telerik.Documents.Spreadsheet` + * `Telerik.Documents.Spreadsheet.FormatProviders.OpenXml` +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. +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. +1. (optional) [Set cell styles](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/working-with-cells/get-set-clear-properties). +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). +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. + +
+ +````CSHTML +@using System.ComponentModel.DataAnnotations +@using System.Reflection + +@using Telerik.Documents.Common.Model +@using Telerik.Windows.Documents.Spreadsheet.FormatProviders +@using Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx +@using Telerik.Windows.Documents.Spreadsheet.Model + +

Bind Spreadsheet to IEnumerable

+ +

Spreadsheet

+ + + +

Grid

+ + + + + +@code { + private List GridData { get; set; } = new(); + + private byte[]? SpreadsheetData { get; set; } + + private void CreateExcelFileFromIEnumerable() + { + // Create Workbook and sheet. + var workbook = new Workbook(); + var worksheet = workbook.Worksheets.Add(); + worksheet.Name = "Product Worksheet"; + + // Get DisplayName attributes or property names. + string[] columnTitles = typeof(SampleModel) + .GetProperties(BindingFlags.Instance | BindingFlags.Public) + .Select(x => x.GetCustomAttribute()?.Name ?? x.Name) + .ToArray(); + + // Populate the header cells. + // If the data cell order is hard-coded, you can hard-code the header titles too. + for (int i = 0; i < columnTitles.Length; i++) + { + worksheet.Cells[0, i].SetValue(columnTitles[i]); + worksheet.Cells[0, i].SetIsBold(true); + worksheet.Cells[0, i].SetFontFamily(new ThemableFontFamily("Arial")); + worksheet.Cells[0, i].SetFontSize(12); + } + + // Populate the data cells. + for (int i = 0; i < GridData.Count; i++) + { + worksheet.Cells[1 + i, 0].SetValue(GridData[i].Id); + worksheet.Cells[1 + i, 1].SetValue(GridData[i].Name); + worksheet.Cells[1 + i, 2].SetValue(GridData[i].Price.ToString()); + worksheet.Cells[1 + i, 3].SetValue(GridData[i].Quantity); + + // Default formats may use different default styles. + worksheet.Cells[1 + i, 4].SetValue(GridData[i].ReleaseDate); + worksheet.Cells[1 + i, 4].SetFontFamily(new ThemableFontFamily("Arial")); + worksheet.Cells[1 + i, 4].SetFontSize(12); + + worksheet.Cells[1 + i, 5].SetValue(GridData[i].OnSale); + } + + // Autofit all column widths... + //worksheet.Columns[worksheet.UsedCellRange].AutoFitWidth(); + + // OR + // autofit specific columns... + //worksheet.Columns[4].AutoFitWidth(); + + // OR + // hard-code all column widths... + //worksheet.Columns[worksheet.UsedCellRange].SetWidth(new ColumnWidth(100, true)); + + // OR + // hard-code specific column widths... + worksheet.Columns[0].SetWidth(new ColumnWidth(40, true)); + worksheet.Columns[1].SetWidth(new ColumnWidth(100, true)); + worksheet.Columns[4].SetWidth(new ColumnWidth(100, true)); + + // Export the workbook to a MemoryStream. + IWorkbookFormatProvider formatProvider = new XlsxFormatProvider(); + using MemoryStream ms = new(); + formatProvider.Export(workbook, ms, new TimeSpan(0, 0, 3)); + + SpreadsheetData = ms.ToArray(); + } + + protected override void OnInitialized() + { + for (int i = 1; i <= 5; i++) + { + GridData.Add(new SampleModel() + { + Id = i, + Name = $"Name {i}", + Price = Random.Shared.Next(1, 100) * 1.23m, + Quantity = Random.Shared.Next(0, 1000), + ReleaseDate = DateTime.Now.AddDays(-Random.Shared.Next(60, 1000)), + OnSale = i % 3 == 0 + }); + } + + CreateExcelFileFromIEnumerable(); + } + + public class SampleModel + { + public int Id { get; set; } + + [Display(Name = "Product Name")] + public string Name { get; set; } = string.Empty; + + public decimal Price { get; set; } + + public int Quantity { get; set; } + + [Display(Name = "Release Date")] + public DateTime ReleaseDate { get; set; } + + [Display(Name = "On Sale")] + public bool OnSale { get; set; } + } +} +```` + +## See Also + +* [Create Excel Documents with SpreadProcessing](https://docs.telerik.com/devtools/document-processing/knowledge-base/generate-excel-files-from-ienumerable-collections) +* [Spreadsheet Overview]({%slug spreadsheet-overview%})