Telerik MVC Grid 根据其他列值制作列红色 [英] Telerik MVC Grid making a Column Red Color based on Other Column Value

问题描述

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

I have a Telerik MVC Grid in which say, there are like two fields

CustomerID 和 OrdersQuantity(可以变为负数)

我的网格看起来像这样

CustomerID                 OrdersQuantity

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

我想以红色显示 customerid 并添加 "*" SYMBOL 如果 OrdersQuantity 是 OrdersQuantity0

I want to show customerid in Red color and add "*" SYMBOL if OrdersQuantity is < 0

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

so like in the above example, I want to show customerid 4* and 5* in Red

推荐答案

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

There are two ways to accomplish this, one for server binding and the other for ajax binding.

简短说明:我创建了一个名为SmallItem"的模型，它只包含属性、CustomerID 和 OrdersQuantity(均为 int)，因此如果对 SmallItem 进行任何引用，您就会知道它来自哪里.

Just a quick note: I created a model called "SmallItem" which just has to properties, CustomerID and OrdersQuantity (both int), so if any references are made to SmallItem you know where it's coming from.

服务器:

这一切都可以通过 Telerik Grid 的声明来实现:

This can all be achieved with just the declaration of the 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 集合中.

As you can see above I'm taking use of a Template column and, using Razor syntax, simply setting up a simple if-statement to add the "*" next to the CustomerID field. Now, a really easy way to change the attributes of a cell (and not an entire row) is to hook into the CellAction function, which will execute for every cell. Having a simple if-statement here to ensure that we are in the CustomerID column (note the usage of Title as opposed to Member since this is a template column) and then you can just check what the particular instance of the Model has for an OrdersQuantity. If it's less than 0 just add the style to the HtmlAttributes collection.

阿贾克斯:

ajax 方法涉及使用一些 JavaScript，所有内容都可以用几行代码覆盖.如果我的网格看起来像这样:

The ajax approach involves using some JavaScript and everything can be covered in a couple of lines. If my grid looks like this:

@{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:

I can then take advantage of the OnRowDataBound event, which fires for every row. If I use this 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).

I simply check the row's dataItem (only contains CustomerID and OrdersQuantity) to see if our OrdersQuantity is less than 0, then I just access the innerHTML and style collection of the particular cell (since CustomerID is the first column, it is at index 0).

这两种方法都能实现您的需求，您实现哪一种取决于您如何绑定网格.

Both approaches accomplish what you're looking for, which one you implement just depends on how you are binding your Grid.

这篇关于Telerik MVC Grid 根据其他列值制作列红色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！