2014-02-13 4 views
4

У меня есть сетка, связанная с ajax, которая отображает список аварийных сигналов. Исходя из некоторого условия в объекте row, мне нужно изменить цвет строки. Это работало до того, когда моя сетка была привязана к серверу (я знаю, что так оно и должно работать), но из-за изменений сетка должна быть обновлена ​​с помощью ajax. Это моя сетка, и то, что используется для работы, когда сервер связан (Обратите внимание, я изменил к .Ajax():Использование jquery/javascript для изменения цвета строки в сетке Kendo

@(Html.Kendo().Grid(Model.Alarms) 
     .Name("grid") 
     .DataSource(dataSource => dataSource 
      .Ajax() 
        .ServerOperation(false) 
        .Model(m => m.Id(s => s.AlarmComment)) 
        .Read(read => read.Action("Alarms_Read", "Alarms", new { id = Model.ViewUnitContract.Id }).Type(HttpVerbs.Get)) 
        .AutoSync(true) 
        .ServerOperation(true) 
    ) 
     .RowAction(row => 
     { 
      if (row.DataItem.DateOff == null && row.DataItem.DateAck == null) 
      { 
       row.HtmlAttributes["style"] = "backgrcolor:red"; 
      } 
      if (row.DataItem.DateOff != null && row.DataItem.DateAck == null) 
      { 
       row.HtmlAttributes["style"] = "color: green"; 
      } 
      if (row.DataItem.DateOff == null && row.DataItem.DateAck != null) 
      { 
       row.HtmlAttributes["style"] = "color: blue"; 
      } 
     }) 
     .Columns(col => 
     { 
      col.Bound(p => p.DateOn).Format("{0:u}").Title("Date"); 
      col.Bound(p => p.Priority).Width(50); 
      col.Bound(p => p.ExtendedProperty2).Width(100).Title("Action"); 
      col.Bound(p => p.AlarmTag).Title("Name"); 
      col.Bound(p => p.AlarmComment).Title("Comment"); 
      col.Bound(p => p.ExtendedProperty1).Title("AlarmID"); 
      col.Bound(x => x.DateOff).Title("Value"); 
     }) 
     .HtmlAttributes(new {style = "height:430px;"}) 
     .Events(e => e.DataBound("setColors")) 
    ) 

Теперь, это то, что я делаю в моем сценарии:

function setColors() { 
    var grid = $("#grid").data("kendoGrid"); 
    var data = grid.dataSource.data(); 

    $.each(data, function(i, row) { 
     if (row.DateOff != null && row.DateAck == null) { 
      // Add color to that rows text 
     } 
    }); 
} 

Я не могу за жизнь мне понять, как изменить цвет текста на этой строке Любые предложения

+0

Где я могу получить список доступных цветов –

+0

Не уверен, что я понимаю, что вы подразумеваете под «цветным» цветом. Это обычные цвета, используемые в CSS или hex. –

+0

Я имел в виду, где я могу получить список всех цветов, которые я мог бы там использовать, я знаю, что могу использовать шестнадцатеричное значение, и я нашел сайт со списком цветов, таких как «LightGreen», «DarkRed» и т. Д. –

ответ

9

Наконец нашли решение:.?

function setColors() { 
    var grid = $("#grid").data("kendoGrid"); 
    var data = grid.dataSource.data(); 

    grid.tbody.find('>tr').each(function() { 
     var dataItem = grid.dataItem(this); 
     if (dataItem.DateOff == null && dataItem.DateAck == null) { 
      $(this).css('color', 'red'); 
     } 

     if (dataItem.DateOff != null && dataItem.DateAck == null) { 
      $(this).css('color', 'green'); 
     } 

     if (dataItem.DateOff == null && dataItem.DateAck != null) { 
      $(this).css('color', 'blue'); 
     } 
    }); 
+0

В этой функции нет переменной данных. но он работает хорошо. –

Смежные вопросы