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在.k-grid周围生成了一个包装器div tag table，因此在样式表中添加以下内容。

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

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

2 个答案: