Spreadsheet cell formatting

[Anna]

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

 

 

[Veselin Tsvetanov]

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.

Regards,
Veselin Tsvetanov
Progress Telerik