基於列的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

我已經得到了您要找的東西。 剛剛測試過，它工作正常。

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

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

干杯!