如何根据kendo ui mvc grid中的条件格式化行

时间:2012-10-11 07:10:37

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

我正在使用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但是我只能格式化特定的单元格,我希望格式化整行。请指导我。

3 个答案:

答案 0 :(得分:18)

正如Sanja建议您可以使用dataBound事件,但最好循环使用 tr 元素(行)。此外,我假设您需要相关的dataItem来检查是否指示该消息是否被读取的属性。

e.g。

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

答案 1 :(得分:7)

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

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

答案 2 :(得分:0)

还有另一种方法,称为RowAction

&

请注意, RowAction 仅适用于在服务器端呈现的行。因此,根据您的情况,您可以使用 RowAction 代替 DataBound