如何根据 kendo ui mvc 网格中的条件格式化行答案

【问题标题】：How to format the row based on condition in kendo ui mvc grid如何根据 kendo ui mvc 网格中的条件格式化行
【发布时间】：2012-10-01 19:04:06
【问题描述】：

我正在研究 asp.net mvc。我正在尝试在 Kendo mvc ui 网格中显示消息列表。我写了这样的代码，

Html.Kendo().Grid((List<messages>)ViewBag.Messages))
                .Name("grdIndox")
                .Sortable(m => m.Enabled(true).SortMode(GridSortMode.MultipleColumn))
                .HtmlAttributes(new { style = "" })
                .Columns(
                col =>
                {
                    col.Bound(o => o.RecNo).HtmlAttributes(new { style = "display:none" }).Title("").HeaderHtmlAttributes(new { style = "display:none" });
                    col.Bound(o => o.NoteDate).Title("Date").Format("{0:MMM d, yyyy}");
                    col.Bound(o => o.PatName).Title("Patient");
                    col.Bound(o => o.NoteType).Title("Type");
                    col.Bound(o => o.Subject);

                }

                )
                .Pageable()
                .Selectable(sel => sel.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
                .DataSource(

                           ds => ds.Ajax().ServerOperation(false).Model(m => m.Id(modelid => modelid.RecNo))
                         .PageSize(10)
                            //.Read(read => read.Action("Messages_Read", "Msg"))
                )

                .Events(ev => ev.Change("onSelectingGirdRow"))
                )

并且我在表中有字段，例如 IsRead-boolean 类型。所以如果消息是未读消息，那么我需要用粗体字体格式化该记录。我使用了 clientTemplates，但我只能格式化我想要格式化整行的特定单元格。请指导我。

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-3 kendo-ui

【解决方案1】：

正如 Sanja 建议的那样，您可以使用 dataBound 事件，但最好在 tr 元素（行）之间循环。另外我假设您将需要相关的dataItem 来检查指示是否已读取消息的属性。

例如

dataBound: function ()
{
   var grid = this;
   grid.tbody.find('>tr').each(function(){
     var dataItem = grid.dataItem(this);
     if(!dataItem.IsMessageRead)
      {
         $(this).addClass('someBoldClass');
      }
   })
}

【讨论】：

不应该是$(this).find("tr").each(function()...吗？按照你写的方式，它会循环遍历所有的TR页面。
没错，我更新了我的帖子，现在它只在 Grid 表格元素的直接子行中循环。
如果您使用服务器数据绑定，ala DataSource(ds => ds.Server()，您是否无法使用 grid.dataItem(this) 访问 javascript 中的底层数据项？

【解决方案2】：

您可以使用 dataBound 事件来更改您的行。

dataBound: function ()
{
   $('td').each(function(){
     if(some condition...)
      {
         $(this).addClass('someBoldClass')}
      }
   })
}

【讨论】：

【解决方案3】：

还有另一种方法可以做到这一点。它叫做RowAction。

.RowAction(row => 
{
   if (condition)
   {
      row.HtmlAttributes["class"] = "someBoldClass";
   }
})

请注意，RowAction 仅适用于在服务器端 呈现的行。因此，在您的情况下，您可以使用 RowAction 作为 DataBound 的替代品。

【讨论】：