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

Sheets.rows.cells

configuration

The cells for this row.

sheets.rows.cells

Array

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [
          { value: "Product", fontFamily: "Arial", fontSize: "14px" },
          { value: "Price", textAlign: "center" },
          { value: "Quantity", color: "#ff0000" }
        ]
      }]
    }]
  });
</script>

sheets.rows.cells.background

String

The background color of the cell. Many standard CSS formats are supported. However, the canonical form is #ccff00.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [
          { value: "Header", background: "#ffff00" }
        ]
      }]
    }]
  });
</script>

sheets.rows.cells.bold

Boolean

If set to true, sets the cell font to bold.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Bold text",
          bold: true
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.borderBottom

Object

The style information for the bottom border of the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Cell with bottom border",
          borderBottom: {
            color: "#000000",
            size: "2px"
          }
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.borderLeft

Object

The style information for the left border of the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Cell",
          borderLeft: {
            color: "#0000ff",
            size: "1px"
          }
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.borderRight

Object

The style information for the right border of the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Cell",
          borderRight: {
            color: "#000000",
            size: "1px"
          }
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.borderTop

Object

The style information for the top border of the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Cell",
          borderTop: {
            color: "#ff00ff",
            size: "3px"
          }
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.color

String

The font color of the cell. Many standard CSS formats are supported. However, the canonical form is #ccff00.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Colored text",
          color: "#ff0000"
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.comment

String

The comment of the cell - a tooltip that appears when the cell is hovered.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Hover me",
          comment: "This is a cell comment"
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.enable

Boolean

If set to false, disables the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Disabled cell",
          enable: false
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.fontFamily

String

The font family of the cell.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Custom Font",
          fontFamily: "Courier New"
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.fontSize

Number

The font size of the cell in pixels.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Large Text",
          fontSize: 18
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.format

String

The format of the cell text. For more information, refer to the article on creating or deleting a custom number format on MS Office.

<div id="spreadsheet"></div>
<script>
    $("#spreadsheet").kendoSpreadsheet({
        sheets: [{
            name: "Order",
            rows: [{
                cells: [{
                    value: 12.39, format: "$#,##0.00"
                }]
            }],
        }]
    });
</script>

sheets.rows.cells.formula

String

The cell formula without the leading equals sign, for example, A1 * 10.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            cells: [{
                value: 10
            }, {
                formula: "A1 * 2"
            }]
        }]
    }]
});
</script>

If set to true, renders the cell value as HTML. It is important to sanitize the value of the cell on the server for passing safe html because there is no client-side sanitizing. When editing a cell the new value can be checked and prevented in the client changing event.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            cells: [{
                value: "<strong>Bold Text</strong>",
                html: true
            }, {
                value: "Regular Text",
                html: false
            }]
        }]
    }]
});
</script>

sheets.rows.cells.index

Number

The zero-based index of the cell. Required to ensure correct positioning.

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

sheets.rows.cells.italic

Boolean

If set to true, sets the cell font to italic.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [{
      rows: [{
        cells: [{
          value: "Italic text",
          italic: true
        }]
      }]
    }]
  });
</script>

sheets.rows.cells.link

String

The hyperlink (URL) of the cell.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            cells: [{
                value: "Visit Telerik",
                link: "https://www.telerik.com"
            }, {
                value: "Email Us",
                link: "mailto:info@telerik.com"
            }]
        }]
    }]
});
</script>

sheets.rows.cells.textAlign

String

The text-align setting for the cell content.

The available options are:

left
center
right

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            cells: [{
                value: "Left aligned",
                textAlign: "left"
            }, {
                value: "Center aligned",
                textAlign: "center"
            }, {
                value: "Right aligned",
                textAlign: "right"
            }]
        }]
    }]
});
</script>

justify

sheets.rows.cells.underline

Boolean

If set to true, sets the cell font to underline.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            cells: [{
                value: "Underlined text",
                underline: true
            }, {
                value: "Normal text",
                underline: false
            }]
        }]
    }]
});
</script>

sheets.rows.cells.validation

Object

The validation rule that is applied to the cell.

<div id="spreadsheet"></div>

<script type="text/javascript" charset="utf-8">
    $("#spreadsheet").kendoSpreadsheet({
        sheets: [
            {
                name: "Populated" ,
                rows: [
                    {
                        index: 2,
                        cells: [
                            { index: 3, background: "red", color: "green", value: "D3" },
                            { index: 10, color: "blue", value: "a value" }
                        ]
                    },
                    {
                        index: 5,
                        cells: [
                            {
                                index: 0,
                                color: "red",
                                value: "A6",
                                validation: {
                                    from: "1",
                                    to: "2",
                                    comparerType: "between",
                                    dataType: "number",
                                    messageTemplate: "Number should match the validation."
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    });
</script>

sheets.rows.cells.value

Number|String|Boolean|Date

The cell value.

<div id="spreadsheet"></div>
<script>
  $("#spreadsheet").kendoSpreadsheet({
    sheets: [
      {
        rows: [
          {
            cells: [{ value: "Name" },{ value: "age" }]
          },
          {
            cells: [{ value: "Peter" },{ value: 34 }]
          }
        ]
      }
    ]
  });
</script>

sheets.rows.cells.verticalAlign

String

The vertical align setting for the cell content.

The available options are:

top
center
bottom

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            height: 60,
            cells: [{
                value: "Top aligned",
                verticalAlign: "top"
            }, {
                value: "Center aligned",
                verticalAlign: "center"
            }, {
                value: "Bottom aligned",
                verticalAlign: "bottom"
            }]
        }]
    }]
});
</script>

sheets.rows.cells.wrap

Boolean

If set to true, wraps the cell content.

<div id="spreadsheet"></div>
<script>
$("#spreadsheet").kendoSpreadsheet({
    sheets: [{
        name: "MySheet",
        rows: [{
            height: 60,
            cells: [{
                value: "This is a very long text that should wrap to multiple lines",
                wrap: true
            }, {
                value: "This text will not wrap and will overflow",
                wrap: false
            }]
        }]
    }]
});
</script>

Related Members