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

Posted 2023-05-07

【中文标题】通过 ClientTemplate 在 Kendo 网格中设置单元格样式

【英文标题】：Styling cell in Kendo grid via ClientTemplate

【发布时间】：2015-01-14 08:08:28

【问题描述】：

我正在尝试在剑道 (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;

使用上面的方法，我可以设置出现在单元格中的 text 样式，但显然不是单元格本身（我猜你可以将其称为文本对象的“父级”/容器）。

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

【参考方案1】：

试试看：

将类/id 添加到从“processCell”函数返回的输出“div”中，并使用该类获取单元格的父元素并向该单元格添加样式。 希望它有效！

【讨论】：

感谢您并为您的迟到表示歉意：我不确定我可以使用什么对象来获取单元格的父元素。我在 processCell 范围内的所有内容都是数据项本身，我看不到如何通过 ClientTemplate 从网格级上下文中注入适当的对象......或者你是说使用纯 CSS 导航回 DOM ?

试一试：col.Bound(e => e.Name).ClientTemplate("#= Name # ") 并在 dataBound 事件上调用一个 javascript 函数，该函数将使用 id 即“xyz”获取单元格元素，并使用 .parent() 函数获取网格的行元素并为其设置样式。 好的，谢谢 - 你把我引向 Daniel 的解决方案（见上文），我认为它确实回答了这个问题，即使它似乎对所有样式都无效。 很高兴您得到了一些答案。我也会尝试您提供的解决方案，如果可能的话，我会提出一些更好的解决方案。:) 我已经针对这个问题打开了一个单独的问题：***.com/questions/26992745/…

【参考方案2】：

经过大量研究和 Satya 的帮助，我发现了一个基于 Daniel 的回答 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

【讨论】：

为了完整性（并反馈在我的另一个问题中学到的内容），上述不适用于边框的原因是 tr 元素不采用边框格式，而 td 元素（单元格）可以.为了上述工作，有必要遍历 tr 中的 td 并按照描述应用类：***.com/questions/26992745/…