Telerik MVC Grid создает красный цвет столбца на основе значения другого столбца - PullRequest
Новая
       15

Telerik MVC Grid создает красный цвет столбца на основе значения другого столбца

4 голосов
/ 17 августа 2011

У меня есть 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* красным

1 Ответ

12 голосов
/ 19 августа 2011

Есть два способа сделать это, один для привязки к серверу, а другой для привязки 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();
}

Как вы можете видеть выше, я использую столбец Template и, используя синтаксис 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, тогда я просто получаю доступ к innerHTML и коллекции стилей конкретногоячейка (поскольку CustomerID является первым столбцом, он имеет индекс 0).

Оба подхода достигают того, что вы ищете, и тот, который вы реализуете, зависит только от того, как вы связываете свою Grid.

...