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

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。

Answer 2

在您的表格中添加一个水平滚动条怎么样？ Kendo 在 table 周围生成一个包装器 .k-grid div tag 因此在您的样式表中添加以下内容。

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

垂直文本 - 不起作用

取自本站 - http://scottgale.com/css-vertical-text/2010/03/01

垂直对齐文本，但不调整列高。

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