Telerik MVC网格基于其他列值生成红色列

我有一个Telerik MVC网格，其中有两个字段

CustomerID

和

OrdersQuantity（可以为负数）

我的网格看起来像这样

CustomerID                 OrdersQuantity

1                               10 
2                                3  
<font color="red">4*</font>    -10 
<font color="red">5*</font>    -20 
7                               10  

客户ID订单数量
1                               10 
2                                3  
4*    -10 
5*    -20 
7                               10  

我想用红色显示

客户ID

，如果

订单数量<0

---

就像上面的例子一样，我想用红色显示customerid

4*

和

5*

，有两种方法可以实现这一点，一种用于服务器绑定，另一种用于ajax绑定

请注意：我创建了一个名为“SmallItem”的模型，它只需要属性、CustomerID和OrdersQuantity（都是int），所以如果对SmallItem进行了任何引用，您就知道它的来源

服务器：

这一切都可以通过Telerik网格的声明来实现：

@model IEnumerable<SmallItem>
@{Html.Telerik().Grid(Model)
      .Name("TestGrid")
      .Columns(columns =>
      {
          columns.Template(@<text>@(item.OrdersQuantity < 0 ? item.CustomerID.ToString() + "*" : item.CustomerID.ToString())</text>).Title("CustomerID");
          columns.Bound(s => s.OrdersQuantity).Title("Order Quantity");
      })
      .CellAction(cell =>
      {
          if(cell.Column.Title == "CustomerID")
          {
              SmallItem item = cell.DataItem;

              if(item.OrdersQuantity < 0)
              {
                  cell.HtmlAttributes["style"] = "color: red;";
              }
          }
      })
      .Render();
}

@model IEnumerable
@{Html.Telerik（）.Grid（模型）
.Name（“测试网格”）
.列（列=>
{
columns.Template（@（item.OrdersQuantity<0？item.CustomerID.ToString（）+“*”：item.CustomerID.ToString（））.Title（“CustomerID”）；
columns.Bound（s=>s.OrdersQuantity）.Title（“订单数量”）；
})
.CellAction（cell=>
{
if（cell.Column.Title==“CustomerID”）
{
SmallItem=cell.DataItem；
if（item.OrdersQuantity<0）
{
cell.HtmlAttributes[“style”]=“color:red；”；
}
}
})
.Render（）；
}

正如您在上面看到的，我使用了一个模板列，并使用Razor语法，简单地设置一个简单的if语句，在CustomerID字段旁边添加“*”。现在，更改单元格（而不是整行）属性的一种非常简单的方法是挂接CellAction函数，该函数将对每个单元格执行。这里有一个简单的if语句来确保我们在CustomerID列中（注意Title的用法，而不是Member，因为这是一个模板列），然后您可以检查模型的特定实例对于OrdersQuantity有什么。如果小于0，只需将样式添加到HtmlAttributes集合

Ajax:

ajax方法需要使用一些JavaScript，所有内容都可以在几行代码中涵盖。如果我的网格如下所示：

@{Html.Telerik().Grid<SmallItem>()
  .Name("AjaxTestGrid")
  .Columns(columns =>
  {
      columns.Bound(s => s.CustomerID).Title("Customer ID");
      columns.Bound(s => s.OrdersQuantity).Title("Order Quantity");
  })
  .DataBinding(dataBinding => dataBinding.Ajax().Select("_Test", "Grid"))
  .ClientEvents(clientEvents => clientEvents.OnRowDataBound("onRowDataBound"))
  .Render();}

@{Html.Telerik（）.Grid（）
.Name（“AjaxTestGrid”）
.列（列=>
{
columns.Bound（s=>s.CustomerID）.Title（“客户ID”）；
columns.Bound（s=>s.OrdersQuantity）.Title（“订单数量”）；
})
.DataBinding（DataBinding=>DataBinding.Ajax（）.Select（“\u Test”，“Grid”））
.ClientEvents（ClientEvents=>ClientEvents.OnRowDataBound（“OnRowDataBound”））
.Render（）；}

然后，我可以利用OnRowDataBound事件，它为每一行触发。如果我使用此JavaScript：

    function onRowDataBound(e) {
    if (e.dataItem.OrdersQuantity < 0) {
        e.row.cells[0].innerHTML += "*";
        e.row.cells[0].style["color"] = "red";
    }
}

函数onRowDataBound（e）{
if（e.dataItem.OrdersQuantity<0）{
e、 行。单元格[0]。innerHTML+=“*”；
e、 行。单元格[0]。样式[“颜色”]=“红色”；
}
}

我只需检查行的dataItem（仅包含CustomerID和OrdersQuantity）以查看OrdersQuantity是否小于0，然后我只需访问特定单元格的innerHTML和样式集合（因为CustomerID是第一列，它位于索引0处）

这两种方法都可以实现您所期望的，实现哪种方法取决于您如何绑定网格