javascript - 基于列值的剑道网格行颜色

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>

如果您有任何问题或疑问，请写信。

干杯!