Kendo MVC Spreadsheet - Rotate cell text by 90°

Question

I would say that my problem is quite trivial but I am having problem to reach expected behaviour.

I am using Telerik MVC framework and at the moment, my task is build Spreadsheet which will look same as given template. However, in the template there are cells in the header rotated by 90° (or 270 if you prefer) (because of their huge amount). It seems, Telerik didn't implement functionality to rotate it by setting up some property or call some prepared function (At least I didn't find a way) and so I am trying to do it with css.

I am able to rotate it by common syntax (testing in Chrome - so at the moment, only one line is enough)

transform: rotate(270deg);

And now I am facing the problem. The rotated text is going out of cell (so part of the text is not visible) and I am not able to find out way how to move it. As workaround, I can set verticalAlign to center, but I would like to have text aligned to left (left after rotation, so to the bottom of the cell). Since div with text is relative positioned, I tried play with top values, but it is not exactly, what I want.

Do you have any idea how to keep it rotated and positioned in the left (bottom)?

Here is dojo example: - cell A1 is center positioned and B1 is left/bottom positioned with text outside cell.

DOJO Example

Answer 1

I suggest using css property of text-orientation and writing mode. Refer to this link.

Also using background property of the cell will apply the color for the entire cell and not just for the text.

<style>
  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-bottom {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}

  .k-spreadsheet .k-spreadsheet-cell > .k-vertical-align-center {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    color: grey;
}
  </style>
    <div id="spreadsheet"></div>
    <script type="text/javascript" charset="utf-8">
        $("#spreadsheet").kendoSpreadsheet();
        var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
        var sheet = spreadsheet.activeSheet();
        sheet.rowHeight(0, 75);
        sheet.range("A1")
             .value("Lorem ipsum")
             .verticalAlign("center")
             .background("rgb(167,214,255)");
        sheet.range("B1")
             .value("Dolet semper")
             .verticalAlign("bottom")
             .background("yellow");;
    </script>