Spreadsheet cell formatting

2 posts, 0 answers
  1. Anna
    Anna avatar
    56 posts
    Member since:
    Jul 2015

    Posted 01 Sep Link to this post

    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

     

     

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 05 Sep Link to this post

    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
    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.
Back to Top