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>

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

干杯！

Kendo Grid Row基于列值的颜色

1 个答案: