Angular Spreadsheet Data Binding
The Spreadsheet allows you to store and load data in a native JSON format and then display it in a tabular form. Use this approach when the sheets configuration is already stored in the application and needs to be accessible at any time, without depending on HTTP calls.
To load data in the Spreadsheet, set the sheets property to a SheetDescriptor collection. The SheetDescriptor provides properties that allows you to customize the cells' content and appearance.
<kendo-spreadsheet [sheets]="sheets"></kendo-spreadsheet>public sheets: SheetDescriptor[] = [
{
name: 'Sheet1',
rows: [
{
height: 25,
cells: [
{ value: 'ID' },
{ value: 'Product' },
{ value: 'UnitPrice' },
],
},
{
cells: [
{ value: 1},
{ value: 'Chai'},
{ value: 10 },
],
}
]
},
];The following example demonstrates how to bind the Spreadsheet component to initial data.
Setting Predefined Rows and Columns
To manage the number of the visible rows and columns in the sheet, set the rows and columns properties of the component.
<kendo-spreadsheet [rows]="5" [columns]="3"></kendo-spreadsheet>The following example demonstrates a blank sheet with predefined columns and rows.