如何根据 kendo ui mvc 网格中的条件格式化行
Posted
技术标签:
【中文标题】如何根据 kendo ui mvc 网格中的条件格式化行【英文标题】:How to format the row based on condition in kendo ui mvc grid 【发布时间】: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,但我只能格式化我想要格式化整行的特定单元格。请指导我。
【问题讨论】:
【参考方案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 的替代品。
【讨论】:
以上是关于如何根据 kendo ui mvc 网格中的条件格式化行的主要内容,如果未能解决你的问题,请参考以下文章
单击用于 MVC 的 kendo ui 网格中的单元格时需要行索引和列标题
弹出窗口在 Kendo UI 网格中的工作原理以及如何在 MVC4 的 Kendo UI ajax 网格中将控件带入弹出窗口