Kendo網格行顏色基於列值

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

我已經exaxtly你在找什麼。剛剛測試過，它工作正常。

@(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> 

如果您有任何問題或疑問，請填寫。

乾杯！