无法为一排剑道网格的边框设置样式 [英] Unable to style borders of a row of Kendo grid
问题描述
我正在尝试根据基础数据源中的值设置MVC剑道网格的样式.我有一种似乎有效的机制,但是某些样式元素(尤其是边框)似乎不接受新的样式类,而其他元素(行背景色)可以正常工作.
I'm attempting to style an MVC kendo grid based on values in the underlying datasource. I have a mechanism that seems to work, but certain style elements (notably borders) do not seem to accept the new style class, whereas other elements (row background color) work fine.
网格:
@(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都不会对行边框样式产生任何影响,而它们都可以愉快地更改行的背景色.
Neither the .css or the .addClass have any effect on the row border style, whilst both happily change the background color of the row.
是否需要在单元级别执行此操作?但是考虑到背景色按行工作,这似乎很奇怪.
Is it that I need to do this at a cell-level? But that seems odd given the background color works row-wise.
推荐答案
边界属性不适用于tr,仅适用于td,因此您可以执行以下操作:
Border property does not work with tr it only works with td so you can do what you need like that:
.k-grid .customClass {
background-color:lightyellow;
}
.k-grid .customClass td {
border-top-style:double;
border-style:double;
border-top-width:thick;
}
或者,您可以为tr使用outline
属性,但是它会设置整个边框的样式-您不能分别指定左,右,上和下边框:
Alternatively you can use outline
property for tr but it styles whole border - you can't specify separately left, right, top and bottom border:
.k-grid .customClass {
outline: thick double;
}
这篇关于无法为一排剑道网格的边框设置样式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!