Telerik MVC Grid 根据其他列值将列设为红色

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

CustomerID and 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

就像上面的例子一样，我想显示 customerid4* and 5* in Red

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

简单说明一下：我创建了一个名为“SmallItem”的模型，它只具有属性、CustomerID 和 OrdersQuantity（均为 int），因此如果对 SmallItem 进行了任何引用，您就知道它来自哪里。

Server:

这一切都可以通过 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，因为这是一个模板列），然后您可以检查模型的特定实例对于 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，然后我只需访问特定单元格的 insideHTML 和样式集合（因为 CustomerID 是第一列，它位于索引 0 处） 。

两种方法都可以实现您正在寻找的内容，您实现哪一种方法仅取决于您如何绑定网格。