Kendo Grid Row Цвета на основе значения столбца

Question

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

@(Html.Kendo().Grid<iPlan.Syspro.Beekman.Portal.Agents.Models.SalesOrderViewModel>() 
.Name("Inbox") 
.HtmlAttributes(new { style = "height:80vh; width:80vw;" }) 
.Columns(columns => 
{ 
    columns.Bound(c => c.SalesOrder).Width(60); 
    columns.Bound(c => c.Status).Width(60); 
    columns.Bound(c => c.Date).Width(60); 
    columns.Bound(c => c.DaysOutstanding).Width(80); 
    //columns.Bound(c => c.Available).Width(60); 
    columns.Template(@<text></text>).Width(60).ClientTemplate("<a class='k-button k-button-icontext k-grid-edit' href='/Inbox/SalesOrderDetail?SalesOrder=#=SalesOrder#'><span class='k-icon k-edit'></span>View</a>").Title("Detail");  
    columns.Template(@<text></text>).Width(60).ClientTemplate("<a class='k-button k-button-icontext k-grid-edit' href='/Inbox/GetDeliveryNote?SalesOrder=#=SalesOrder#'><span class='k-icon k-edit'></span>View</a>").Title("Delivery Note"); 
    columns.Template(@<text></text>).Width(60).ClientTemplate("<a class='k-button k-button-icontext k-grid-edit' href='/Inbox/GetDealerOrder?SalesOrder=#=SalesOrder#'><span class='k-icon k-edit'></span>View</a>").Title("Dealer order"); 
    columns.Template(@<text></text>).Width(60).ClientTemplate("<a class='k-button k-button-icontext k-grid-edit' href='/Inbox/GetFitmentFee?SalesOrder=#=SalesOrder#'><span class='k-icon k-edit'></span>View</a>").Title("Fitment invoice");  

}) 
.Selectable() 
.Scrollable() 
.Sortable() 
.Groupable() 
.Filterable() 
.Pageable(pageable => pageable 
    .Refresh(true) 
    .PageSizes(true) 
    .ButtonCount(5)) 
.DataSource(dataSource => dataSource 
    .Ajax() 
    .Read(read => read.Action("SalesOrders_Read", "Inbox"))   
    )   
) 

Кто-нибудь сделал это уже? Я относительно новичок в кендо, и я не знаю, как это сделать. Если кто-нибудь может сказать мне, как это сделать или поделиться ссылкой на что-то подобное, это было бы здорово. Спасибо

Answer 1

У меня есть то, что вы ищите. Просто протестирован и работает нормально.

@(Html.Kendo().Grid(Model) 
     .Name("GridLogIn") 
     .Events(e => e.DataBound("LineItems_Databound")) 
     .Columns(columns => 
    { 
     columns.Bound(p => p.SomeValueRow).Title("Użytkownik").Width(139).HtmlAttributes(new { style = "text-align:center" }).HeaderHtmlAttributes(new { style = "text-align:center" }); 

    }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(100) 
     .ServerOperation(true) 
     .Read(read => read.Action("AjaxBinding", "TableLogIn")) 
    ) 
) 

<script> 

    function LineItems_Databound() { 

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

     $.each(data, function (i, row) { 
      var status = row.SomeValueRow; 

      if (status == 0) { 
       $('tr[data-uid="' + row.uid + '"] ').css("background-color", "#99cc99"); //green 
      } 
      else 
      { 
       $('tr[data-uid="' + row.uid + '"] ').css("background-color", "#ffffb2"); //yellow 
      } 


     }); 
    } 

</script> 

Пожалуйста, напишите, если у вас есть какие-либо проблемы или вопросы.

Cheers!