Question

我正在尝试根据底层数据源中的值设置MVC kendo网格的样式。我有一个似乎有效的机制，但某些样式元素（特别是边框）似乎不接受新的样式类，而其他元素（行背景颜色）工作正常。

网格：

@(Html.Kendo().Grid(Of RTFVM)().Name("RealTimeFinancials") _
 .Events(Function(x) x.DataBound("LineItems_Databound")) _
 .Columns(Sub(c)
                  c.Bound(Function(x) x.Line.LineItem).HtmlAttributes(New With {.style = "text-align:left"})
etc

事件处理程序：

 function LineItems_Databound() {
    var grid = $("#RealTimeFinancials").data("kendoGrid");
    var data = grid.dataSource.data();
    $.each(data, function (i, row) {
        var LineItem = row.Message;

        switch(LineItem) {
            case 'SubTotal': $('tr[data-uid="' + row.uid + '"]').css({ "border-style":"solid", "border-top":"single","background-color":"yellow"}); break;
            case 'Total': $('tr[data-uid="' + row.uid + '"]').addClass('customClass'); break;
            case 'GrandTotal': $('tr[data-uid="' + row.uid + '"]').css({ "border-style":"solid", "border-bottom":"double"}); break;
        }
    });
}

CSS类：

  .customClass {
    border-top-style:double;
    border-style:double;
    border-top-width:thick;
    background-color:lightyellow;
}

.css或.addClass都不会对行边框样式产生任何影响，同时两者都会愉快地更改行的背景颜色。

我是否需要在单元级别执行此操作？但鉴于背景颜色按行排列，这似乎很奇怪。

Answer 1

Border属性不适用于tr它只适用于td所以你可以做你需要的东西：

.k-grid .customClass {
    background-color:lightyellow;
}

.k-grid .customClass td {
    border-top-style:double;
    border-style:double;
    border-top-width:thick;
}

或者你可以使用outline属性来设置tr，但它可以设置整个边框的样式 - 你不能单独指定左边，右边，上边和下边框：

.k-grid .customClass {
    outline: thick double;
}

Answer 2

我找到了这个答案，这要归功于@ j4ro在样式化td而不是行上的反应，并研究如何在应用该类的tr中迭代td＆＃39; s。所以 - 迭代该行的javascript是：

 case 'Total': $('tr[data-uid="' + row.uid + '"]').find('td') _
     .each(function () { $(this).addClass('customClass') }); break;

并且类定义为（我猜关键是引入了k.grid引用）：

.k-grid .customClass {
   border-top-style:double
   border-style:double;
   border-top-width:thick;
  }

Answer 3

Kendo网格的行边框可以更改，如下所示，

<style>
.k-grid tr {
    border-bottom: 1px solid black;
}
</style>

可以根据需要进行扩展和操作。即.k-grid tr td或.k-grid th或.k-grid table等

无法设置一排Kendo网格的边框样式

3 个答案: