sheets

Array

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [
      {
        name: "Sheet1",
        rows: [
          { cells: [{ value: "A1" }, { value: "B1" }] },
          { cells: [{ value: "A2" }, { value: "B2" }] }
        ]
      },
      {
        name: "Sheet2",
        activeCell: "B2"
      }
    ]
  });
</script>

sheets.activeCell

String

The active cell in the sheet, for example, A1.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [
      {
        activeCell: "C3"
      }
    ]
  });
</script>

sheets.columns

Array

An array which defines the columns in this sheet and their content.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      columns: [
        { index: 0, width: 100 },
        { index: 1, width: 200 },
        { index: 2, width: 150 }
      ]
    }]
  });
</script>

sheets.dataSource

kendo.data.DataSource

The DataSource instance for this sheet. For more information, refer to the article on binding to the DataSource.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      dataSource: new kendo.data.DataSource({
        data: [
          { Name: "John", Age: 30 },
          { Name: "Jane", Age: 25 }
        ]
      })
    }]
  });
</script>

sheets.drawings

Array

An array which contains the drawings used in this sheet.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    images: {
      "1": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg=="
    },
    sheets: [{
      drawings: [{
        topLeftCell: "A1",
        offsetX: 10,
        offsetY: 10,
        width: 100,
        height: 100,
        image: "1"
      }]
    }]
  });
</script>

sheets.filter

Object

Defines the filtering criteria for this sheet, if any.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      filter: {
        ref: "A1:C10",
        columns: [
          { index: 0, type: "value", value: "John", filter: "custom", criteria: [{ value: "J", operator: "contains" }] }
        ]
      }
    }]
  });
</script>

sheets.frozenColumns

Number

The number of frozen columns in this sheet.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      frozenColumns: 2
    }]
  });
</script>

sheets.frozenRows

Number

The number of frozen rows in this sheet.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      frozenRows: 1
    }]
  });
</script>

sheets.mergedCells

Array

An array of merged cell ranges, for example, B1:D2.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      mergedCells: ["A1:C1", "B2:D3"]
    }]
  });
</script>

sheets.name

String

The name of the sheet.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [
      { name: "Employees" },
      { name: "Sales Data" }
    ]
  });
</script>

sheets.rows

Array

The row data for this sheet.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [
        {
          height: 25,
          cells: [
            { value: "Name", bold: true },
            { value: "Age", bold: true }
          ]
        },
        {
          cells: [
            { value: "John" },
            { value: 30 }
          ]
        }
      ]
    }]
  });
</script>

sheets.selection

String

The selected range in the sheet, for example, A1:B10.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        selection: "A1:C3",
        rows: [{
            cells: [{
                value: "Cell A1"
            }, {
                value: "Cell B1"
            }, {
                value: "Cell C1"
            }]
        }]
    }]
});
</script>

sheets.showGridLines

Boolean

A Boolean value which indicates if the grid lines of the sheet will be displayed.

Default: true

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        showGridLines: false,
        rows: [{
            cells: [{
                value: "No grid lines"
            }]
        }]
    }]
});
</script>

sheets.sort

Object

Defines the sort criteria for the sheet.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        sort: {
            ref: "A1:B5",
            columns: [{
                index: 0,
                ascending: false
            }]
        },
        rows: [{
            cells: [{
                value: "Name"
            }, {
                value: "Age"
            }]
        }]
    }]
});
</script>

Related Members