Unable to style borders of a row of Kendo grid

问题:

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.

Grid:

@(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

Event handler:

 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 Class:

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

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.

回答1:

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

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

回答2:

Kendo grid's row borders can be changed as shown below,

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

This can be extended and manipulated according to the need. i.e., .k-grid tr td or .k-grid th or .k-grid table and etc.

回答3:

I found this answer thanks to a combination of @j4ro's response in respect of styling the td rather than the row and researching how to iterate across td's in the tr applying the class. So - the javascript to iterate over the row is:

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

and the class is defined as (and I guess the key thing is the introduction of the k.grid reference):

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