无法设置一排剑道网格的边框答案

【问题标题】：Unable to style borders of a row of Kendo grid无法设置一排剑道网格的边框
【发布时间】：2014-11-18 11:03:32
【问题描述】：

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

网格：

@(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 对行边框样式都没有任何影响，而两者都可以愉快地改变行的背景颜色。

我需要在单元级别执行此操作吗？但是考虑到背景颜色是按行工作的，这似乎很奇怪。

【问题讨论】：

标签： kendo-ui kendo-grid kendo-asp.net-mvc

【解决方案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;
}

【讨论】：

谢谢 - 我没有意识到这一点。将“td”添加到 customClass 似乎仍然不起作用 - 我认为因此我需要遍历 tr 中的 td 并将类应用于 td。
好的 - 我尝试迭代 td 并得到相同的结果 - 颜色改变但边框没有改变： case 'Total': $('tr[data-uid="' + row .uid + '"]').find('td').each(function () { $(this).addClass('customClass') });休息;
嗯...请为我尝试这样的操作：.k-grid .customClass td 而不是 .customClass td，它比 .k-grid td 本身更强大。
如果我这样做，我也会失去背景颜色。但是 - 仅使用 .customClass 选择器并添加 '!important' 作品 - 所以我认为我的代码似乎是在 Kendo 之前绘制单元格？这似乎很奇怪。不知何故，这感觉不是最好的解决方案。
!important 是最终性，我们应该避免它。但我不明白为什么你在我的解决方案中失去了背景颜色。您不想在 customClass 的所有行中使用背景颜色吗？

【解决方案2】：

剑道网格的行边框可以改变如下，

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

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

【讨论】：

【解决方案3】：

我找到了这个答案，这要归功于@j4ro 在样式化 td 而不是行方面的响应，以及研究如何在应用类的 tr 中迭代 td。所以 - 遍历该行的 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;
  }

【讨论】：