如何有条件地格式化 Kendo UI 网格单元格（取决于值）剃刀

Posted 2023-05-07

【中文标题】如何有条件地格式化 Kendo UI 网格单元格（取决于值）剃刀

【英文标题】：How to conditionally format Kendo UI grid cell (depending on values) razor

【发布时间】：2013-07-30 05:59:12

【问题描述】：

有没有办法根据单元格中的值有条件地格式化Kendo UI 网格单元格。我还想根据值向网格单元格添加一个类。 (ASP.net, C#, Razor)

附言

解决方案

啊，我想通了。

<script>
    function onDataBound(e) 
        $('td').each(function() 
            if ($(this).text() == 'Condition') 
                $(this).addClass('customClass');
            
        );
    
</script>

网格看起来像这样

@(html.Kendo().Grid<CustomStylesOnDataBound.ViewModels.EmployeeViewModel>()
              .Name("mvcGrid")


              .Columns(columns =>
              
                  columns.Bound(p => p.EmployeeId).Width(100);
                  columns.Bound(p => p.FirstName).Width(75);
                  columns.Bound(p => p.LastName).Width(75);
                  columns.Bound(p => p.Address);
              )
              .Events(e => e.DataBound("onDataBound"))
              .Filterable()
              .Pageable()
              .DataSource(dataSource => dataSource
                .Ajax()                                
                .PageSize(50)
                .Read(read => read.Action("Employees_Read", "Home"))
            )
)

我不确定是否有更好的解决方案，但它可以完成工作。泰彼得

【参考方案1】：

this 代码库文章中涵盖了您的问题。

【讨论】：

感谢您的快速回答，但这仅对格式化整行有用，而我只需要根据值格式化单个单元格。是否可以仅针对单个单元格进行修改？

我在原帖中添加了解决方案！

【参考方案2】：

我建议你使用$(e.sender.element).find('td').each 作为选择器。

添加 $(e.sender.element) 会将您的搜索限制在网格中，否则如果您的 from 上有多个表格，您也会在其他表格中找到单元格。

此外，如果您使用$(e.sender.element).find('tr').each，那么您可以使用$(this.cells[0]).text() 检查网格中的各个列，您的班级作业将如下所示：$(this.cells[1]).addClass('customClass');