Telerik MVC网格根据其他列值制作列红色

Question

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

CustomerID和OrdersQuantity (can go negative)

我的网格看起来像这样

CustomerID                 OrdersQuantity

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

我希望以红色显示customerid并在"*"

时添加OrdersQuantity is < 0符号

如上例所示，我想在红色中显示customerid 4*和5*

Answer 1

有两种方法可以实现此目的，一种用于服务器绑定，另一种用于ajax绑定。

快速说明：我创建了一个名为“SmallItem”的模型，它只需要属性CustomerID和OrdersQuantity（都是int），因此如果对SmallItem进行任何引用，您就知道它来自何处。

服务器

只需通过Telerik Grid的声明就可以实现这一切：

@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();
}

如上所示，我正在使用模板列，并使用Razor语法，只需设置一个简单的if语句，在CustomerID字段旁边添加“*”。现在，更改单元格（而不是整行）属性的一种非常简单的方法是挂钩CellAction函数，该函数将为每个单元格执行。这里有一个简单的if语句以确保我们在CustomerID列中（注意Title的用法而不是Member，因为这是一个模板列）然后你可以检查一下Model的特定实例对于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();}

然后我可以利用OnRowDataBound事件，该事件会触发每一行。如果我使用这个JavaScript：

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

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

这两种方法都能实现您的目标，您实施的方法取决于您对网格的绑定方式。