This is a migrated thread and some comments may be shown as answers.

Spreadsheet cell formatting

1 Answer 611 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Anna asked on 01 Sep 2017, 06:47 PM

Hi team,

I'm very new to the spreadsheet widget. I'm trying to format a sheet column to form a hierarchy like look. Is it possible to format the cell text with different indentation (without resorting to spaces like below), and color part of them with different color? (see attachment)

where [O] represents an icon which I want to color brown while keeping rest of text as black



1 Answer, 1 is accepted

Sort by
Veselin Tsvetanov
Telerik team
answered on 05 Sep 2017, 07:22 AM
Hi Anna,

The Kendo Spreadsheet does not offer a built-in way to insert icons as part of its cells content. Moreover, using two different colors for the content of single cell is also not supported.

Nevertheless, using font Font Awesome and some hacks may allow you to achieve the desired result. First, you will need to force the Spreadsheet to apply specific class to those cells, that need an icon to be displayed:
cells: [{
  verticalAlign: "center",
  value: 216321,

Then you could include the Font Awesome and style the cell to display the required icon appropriately:
.k-spreadsheet .k-spreadsheet-cell>.k-vertical-align-center:before {
  font-family: "FontAwesome",Arial,Verdana,sans-serif;
  content: "\f061";
  color: red;

Concerning the indention question, the Spreadsheet does not support such. Nevertheless, you could manually add the required styling to the respective cells using the render event of the Spreadsheet:
render: function() {
 var cells = $('.k-spreadsheet .k-spreadsheet-cell>.k-vertical-align-center');
  $(cells[0]).css('margin-left', '-30px');
  $(cells[3]).css('margin-left', '-30px');
  $(cells[5]).css('margin-left', '-30px');
  $(cells[7]).css('margin-left', '-30px');

Here you could find a Dojo sample, implementing the above suggestions.

As a side-note, if you are trying to display a hierarchy of items, you may consider to use the dedicated Kendo TreeList widget.

Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question