Question

我正在尝试在kendo（mvc）网格中设置'包含'单元格的样式。该列绑定如下：

@(Html.Kendo().Grid(Of RTFVM)().Name("RealTimeFinancials") _
 .Columns(Sub(c)
                  c.Bound(Function(x) x.Line.Months(0).Total).Title("Jan").ClientTemplate("#= processCell(Line.Months[0])#")
etc

我的JS条件样式函数如下：

 function processCell(CellData) {
    var monthNumber = CellData.MonthNumber;
    var output;

    switch(CellData.Message) {
        case null: output = fn(CellData.Total); break;
        case 'Total': output = '<div style="background-color: Red;"><strong>' + fn(CellData.Total) + '</strong></div>';
            break;
        default: output = '<small>' + CellData.Message + '</small>';
    }

    return output;
}

使用上面我可以设置单元格中显示的文本，但显然不是单元格本身（我想你可以称之为文本对象的'父'/容器）。

有没有办法从ClientTemplate中访问/设置单元格样式，还是必须使用data-uid row / column-find方法使用数据绑定事件单独找到单元格？

Answer 1

尝试：

将一个类/ id添加到输出＆＃34; div＆＃34;从＆＃34; processCell＆＃34;返回的函数和使用该类获取单元格的父元素，并为该单元格添加样式。希望它有效！

Answer 2

经过大量的研究和对萨蒂亚的帮助，我找到了一个基于丹尼尔回答here的广泛通用解决方案 - 虽然它似乎只是部分起作用：

我创建了一个函数，它尝试根据grid.databound事件触发的数据源上字段的值设置行的样式：

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 'Total': $('tr[data-uid="' + row.uid + '"]').addClass('customClass'); break;        
        }
    });
}

customClass是：

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

我遇到的问题（当在网格上简单地设置.css时也会发生）是在更改行的背景颜色时，网格边框不是。我似乎无法设置单元格/行边框的样式。

我认为它确实回答了我的广泛问题，尽管在这种情况下仍存在问题。

我已经开设了一个单独的问题来解决明显的css类问题here

通过ClientTemplate在Kendo网格中设置样式单元格

2 个答案: