New to Kendo UI for jQuery? Start a free 30-day trial

Sheets.rows.cells

configuration

The cells of each row. Each cell represents a cell from the final Excel document.

sheets.rows.cells

Array

<script>
  var workbook = new kendo.ooxml.Workbook({
    sheets: [{
      rows: [
        { cells: [ { value: "Document Title" }  ] },
        { cells: [ { value: 22 }, { value: 33 }, { value: 44 }, {value: 55}  ] }
      ]
    }]
  });

  workbook.toDataURLAsync().then(function(dataURL) {
    kendo.saveAs({
      dataURI: dataURL,
      fileName: "Test.xlsx"
    });
  });
</script>

sheets.rows.cells.background

String

Sets the background color of the cell. Supports hex CSS-like values that start with #, for example, #ff00ff.

Default: null

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Red", background: "#ff0000" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.bold

Boolean

Setting sheets.rows.cells.bold to true makes the cell content bold.

Default: false

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Bold", bold: true } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.borderBottom

Object

The style information for the bottom border of the cell.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "Cell with bottom border", borderBottom: { color: "#0066cc", size: 2 } } 
              ] },
              { cells: [ 
                  { value: "Regular cell below" } 
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "border-bottom-example.xlsx"
  });
});
</script>

sheets.rows.cells.borderLeft

Object

The style information for the left border of the cell.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "No border" },
                  { value: "Left border", borderLeft: { color: "#ff6600", size: 3 } }
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "border-left-example.xlsx"
  });
});
</script>

sheets.rows.cells.borderRight

Object

The style information for the right border of the cell.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "Right border", borderRight: { color: "#009900", size: 3 } },
                  { value: "Next cell" }
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "border-right-example.xlsx"
  });
});
</script>

sheets.rows.cells.borderTop

Object

The style information for the top border of the cell.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "Top border", borderTop: { color: "#cc0066", size: 2 } }
              ] },
              { cells: [ 
                  { value: "Regular cell" } 
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "border-top-example.xlsx"
  });
});
</script>

sheets.rows.cells.colSpan

Number

Sets the number of columns that a cell occupies.

Default: 1

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          columns: [ { width: 100}, { width: 100 } ],
          rows: [
            { cells: [ { value: "Occupies two columns", colSpan: 2 } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.color

String

The text color of the cell. Supports hex CSS-like values that start with #, for example, #ff00ff.

Default: null

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "red", color: "#ff0000" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.fontFamily

String

Sets the font for displaying the cell value.

Default: "Calibri"

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Arial", fontFamily: "Arial" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.fontName

String

Deprecated in versions 2015.3 and later. Use fontFamily instead.

Default: "Calibri"

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "Arial Font", fontName: "Arial" },
                  { value: "Times Font", fontName: "Times New Roman" },
                  { value: "Default Font" }
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "font-name-example.xlsx"
  });
});
</script>

sheets.rows.cells.fontSize

Number

Sets the font size in pixels.

Default: 11

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "20px", fontSize: 20 } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.format

String

Sets the format that Excel uses to display the cell value.

The format option does not follow the {0:} syntax that kendo.format uses.

For more information on the formats that Excel supports, refer to the page on creating a custom number format.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: new Date(), format: "yy-MM-dd" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.formula

String

Sets the formula that Excel uses to compute and display the cell content.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ { value: 1 }, { formula: "=SUM(A:A)" } ] },
              { cells: [ { value: 2 } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.hAlign

String

Deprecated in versions 2015.3 and later. Use textAlign instead.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { cells: [ 
                  { value: "Left", hAlign: "left" },
                  { value: "Center", hAlign: "center" },
                  { value: "Right", hAlign: "right" }
              ] }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "horizontal-align-example.xlsx"
  });
});
</script>

sheets.rows.cells.index

Object

The zero-based index of the cell in the row. Records which miss an index will be placed in the first available cell on the row.

Mixing indexed with non-indexed cells might cause invalid results. To use both, place the indexed cells at the end of the array.

  <script>
  var workbook = new kendo.ooxml.Workbook({
    sheets: [{
      rows: [{
          cells: [
              { value: "B1", index: 1 },
              { value: "E1", index: 4 }
          ]
      }]
    }]
  });
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
  </script>

sheets.rows.cells.italic

Boolean

Setting sheets.rows.cells.italic to true renders the cell content in italics.

Default: false

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Italic", italic: true } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.rowSpan

Number

Sets the number of rows that a cell occupies.

Default: 1

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          columns: [ { width: 200 } ],
          rows: [
            { cells: [ { value: "Occupies two rows", rowSpan: 2 } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.textAlign

String

Sets the horizontal alignment of the cell content.

The supported values are:

"left"
"center"
"right"

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          columns: [ { width: 200 } ],
          rows: [
            { cells: [ { value: "Left", textAlign: "left" } ] },
            { cells: [ { value: "Center", textAlign: "center" } ] },
            { cells: [ { value: "Right", textAlign: "right" } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.underline

Boolean

Setting sheets.rows.cells.underline to true underlines the cell content.

Default: false

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Uderline", underline: true } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.vAlign

String

Deprecated in versions 2015.3 and later. Use verticalAlign instead.

Default: "bottom"

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
              { 
                  height: 50,
                  cells: [ 
                      { value: "Top", vAlign: "top" },
                      { value: "Center", vAlign: "center" },
                      { value: "Bottom", vAlign: "bottom" }
                  ] 
              }
          ]
      }
  ]
});

workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "vertical-align-example.xlsx"
  });
});
</script>

sheets.rows.cells.value

Date|Number|String|Boolean

The value (content) of the cell. Numbers and dates are formatted as strings. String values are HTML-encoded.

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Name" }, { value: "Birthday" }, { value: "Age" } ] },
            { cells: [ { value: "John" }, { value: new Date(1980, 1, 5) }, { value: 34 } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.verticalAlign

String

Sets the vertical alignment of the cell content.

The supported values are:

"top"
"center"
"bottom"

Default: "bottom"

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          columns: [ { width: 200 } ],
          rows: [
            { cells: [
              { rowSpan: 2, value: "Top", verticalAlign: "top" },
              { rowSpan: 2, value: "Middle", verticalAlign: "center" },
              { rowSpan: 2, value: "Bottom", verticalAlign: "bottom" }
             ]
            }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

sheets.rows.cells.wrap

Boolean

Setting sheets.rows.cells.wrap to true wraps the cell content.

Default: false

<script>
var workbook = new kendo.ooxml.Workbook({
  sheets: [
      {
          rows: [
            { cells: [ { value: "Long value", wrap: true } ] }
          ]
      }
  ]
});
workbook.toDataURLAsync().then(function(dataURL) {
  kendo.saveAs({
    dataURI: dataURL,
    fileName: "Test.xlsx"
  });
});
</script>

Related Members