c# - kendo ui 网格列名称在网格标题中垂直 90 度

Question

我不知道在哪里放置 CSS 相关代码。请不要回复 CSS 设置，因为我不知道将它放在我的 asp.net mvc4 解决方案元素代码中的什么位置。

我是 Kendo Grid 的新手，所以我不知道如何应用标题模板 css 样式以及将此类代码放置在与网格相关的位置。

目前我有一个网格，其中列名被拼写出来并且网格正在用完浏览器。有什么方法可以将网格列标题名称显示为垂直旋转 90 度？

这是我的网格的样子。

        @(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

讨论了同样的问题here .您可以像这样添加神奇的 CSS 来做到这一点:

#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;
}

这是一个JsBin .