кендо UI событие изменения сетки фона

Question

Я использую Кендо UI сетку, которая изменяет цвет Б.Г. каждой строки из-за состояния в DataBound события, как это:

function onDataBound(e) { 

    var grid = $("#Software").data("kendoGrid"); 
    var gridData = grid.dataSource.view(); 

    for (var i = 0; i < gridData.length; i++) { 
     var currentUid = gridData[i].uid; 
     if (gridData[i].CategoryID == 1) { 
      var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']"); 
      $(currenRow).addClass("green"); 
     } 
     else if (gridData[i].CategoryID == 2){ 
      var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']"); 
      $(currenRow).addClass("red"); 
     } 
     else { 
      var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']"); 
      $(currenRow).addClass("yellow"); 
     } 
    } 
} 

У меня есть пользовательский столбец где Для категоризации назначаются 3 кнопки. Теперь я хочу изменить цвет фона строки, когда нажимается одна из этих кнопок.

меняет свой цвет фона, когда сетка перезагружается, но это занимает слишком много времени, потому сетка заполнена с большим количеством данных.

Я только хочу добавить, например, класс css «зеленый» для затронутой строки.

function SetGreen(sid, cid) { 

    var grid = $("#grid").data("kendoGrid"); 

    cid =1; 
    var url = '@Url.Action("SetMethod","SetController")'; 

    $.post(url, { SID: sid, CID: cid }); 

    grid.saveChanges(); 

    //right here I want to set the bg color for the affected row 
} 

заранее спасибо

Answer 1

Вы можете использовать rowTemplate сетку, чтобы установить класс CSS элемента строки таблицы (TR) оказанный для каждого элемента данных. Что-то вроде этого:

var categoryClassNames = { 
    1: "red", 
    2: "green" 
}; 

$("#grid").kendoGrid({ 
    dataSource: [ 
    { Category: 1 }, 
    { Category: 2 }, 
    { Category: 1 } 
    ], 
    rowTemplate: "<tr data-uid='#=uid#' class='#= categoryClassNames[Category]#'>" + 
       "<td>#= Category #</td>" + 
       "</tr>" 
}); 

Для обновления определенной строки таблицы можно использовать следующий код:

var grid = $("#grid").data("kendoGrid"); 
var itemToUpdate = grid.dataSource.at(1); // we will update the second item 

itemToUpdate.Category = 1; 

$("#grid tr[data-uid='" + itemToUpdate.uid + "']").removeClass("green").addClass("red"); 

Вот живой демо: http://jsbin.com/iNExotO/2/edit