Kendo ui网格标题中垂直90度的网格列名称

Question

I DO NOT KNOW where to PUT THE CSS RELATED CODE. Please don't respond with CSS settings because I would not know where to put it in my asp.net mvc4 solution project code.

I am new to Kendo Grid so I do not know how to apply header templates css style and where to put this type of code in relation to the grid.

Currently I have a grid where column names are spelled out and grid is running out of browser. Is there a way, I could display the grid column header names as vertical rotated at 90 degrees?

Here is what my grid looks like.

        @(Html.Kendo().Grid<TimberBeamCalculator.Models.TimberGrades>()
            .Name("TimberGradeGrid")
            .DataSource(ds => ds
                            .Ajax()
                            .Read(r => r.Action("TimberData_Read", "Calculator"))   
            )
            .Columns(c=> 
                    {
                        c.Bound(t => t.TimberGrade).Width(10);
                        c.Bound(t => t.BendingParallelToGrain).Width(20);
                        c.Bound(t => t.CompPerpendicularToGrain).Width(10);
                        c.Bound(t => t.ShearParallelToGrain).Width(20);
                        c.Bound(t => t.ModulusOfElasticityMean).Width(10);
                        c.Bound(t => t.ModulusOfElasticityMin).Width(20);
                        c.Bound(t => t.SoftWood).Width(10);
                    }
            )
            .Selectable(s => s.Mode(GridSelectionMode.Single))
            .Events(e => e.Change("OnChangeDivTimberGradeGrid"))
        )

Answer 1

The same question is discussed here . You can do it by adding the magic CSS like so:

#grid .k-grid-header {
  padding-left: 17px;
}

#grid .k-grid-header tr:first{
  height: 150px;
}

#grid .k-grid-header .k-header{
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  height: 150px !important;
  width: 130px !important;
}

Here is a JsBin .

Answer 2

How about just adding a horizontal scroll bar to your table? Kendo produces a wrapper .k-grid div tag around it's table therefore in your stylesheet add the below.

.k-grid{margin-top:auto;overflow:auto;}
.k-grid table td{white-space:nowrap;}

Vertical Text - not working

Taken from this site - http://scottgale.com/css-vertical-text/2010/03/01

Vertically aligns text but height of column does not adjust.

c.Bound(t => t.TimerGrade)
 .HeaderHtmlAttributes(new { @class = "vertical-text" });

.vertical-text
{
    writing-mode:tb-rl;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
}