基于列的Kendo网格行颜色

Question

Okay, so what I need to do here is display the grid rows with different colors based on the value of a column of the row. Here is my current code for the grid:

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

Have anyone done this already? I'm relatively new to kendo and I have no clue on how to do this. If anyone can tell me how to do this or share a link to something similar that would be great. Thanks

Answer 1

I've got exaxtly what you are looking for. Just tested and it's working fine.

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

Please write if you have any problems or questions.

Cheers!