Question

我需要更改kendo网格的背景颜色。我的代码如下：

@(Html.Kendo().Grid<TegelCheckerModel>()
            .Name("Grid")
            .CellAction(cell =>
            {
                if (cell.Column.Title.Equals("TegelZones"))
                {
                    if (cell.DataItem.TegelZones.Contains("Extern"))
                    {
                        cell.HtmlAttributes["style"] = "background-color: red";
                    }
                }
            })
            .Columns(columns =>
            {
                columns.Bound(p => p.TegelNaam);
                columns.Bound(p => p.TegelActief).HeaderHtmlAttributes(new { style = "background: #800000;" }).ClientTemplate("#if(TegelActief){# ja #}else{# nee #}#");
                columns.Bound(p => p.TegelZones).HeaderHtmlAttributes(new { style = "background: #800000;" }); })

            .AutoBind(true)
            .Pageable()
            .Sortable()
            .Filterable()
            .DataSource(dataSource => dataSource
            .Ajax() //Or .Server()
            .Read(read => read.Action("GetTegels", "TegelChecker")
            .Data("getAlvNummerAndVoorWie"))
            )
        )

此代码不会更改单元格的背景颜色。我错过了什么？

我部分成功了。这意味着我可以使用以下代码为单元格的某些部分着色：

if (tegelTitel == "TegelActie") {
    if ($("#tegelcheckeroverzicht_klantControl_Klantddl").klantenControl().getKlant().alvNummer == "") {
        html = kendo.format("<span>" + data.TegelActie + "</span>");
    }
    else {
        if (data.TegelActieAllowed) {
            if (data.TegelActie == null) {
                html = kendo.format("<span></span>");
            }
            else {
                html = kendo.format("<span>" + data.TegelActie + "</span>");
            }
        }
        else {
            html = kendo.format("<span  STYLE='background: red; color: white;font-weight:bold'>" + data.TegelActie + "</span>");
        }
    }
}

但这意味着只有跨度的背景是彩色的，而不是整个单元格。

Answer 1

好的，我找到了解决方案：

function gridDataBound() {
var data = this._data;
for (var x = 0; x < data.length; x++) {
    var dataItem = data[x];
    var tr = $("#Grid").find("[data-uid='" + dataItem.uid + "']");
    if (dataItem.Selected) {
        $("input:first", tr).attr("checked", "checked");
    }


    var alvNummer = $("#tegelcheckeroverzicht_klantControl_Klantddl").klantenControl().getKlant().alvNummer;
    if (alvNummer == "")
    { }
    else
    {
        var cell = $("td:nth-child(6)", tr); // Zone
        if (dataItem.HasCorrectZone) {

        }
        else {
            cell.addClass("myerror");
        }
        cell = $("td:nth-child(7)", tr); //Actie
        if (!dataItem.TegelActieAllowed) {
            cell.addClass("myerror");
        }
        cell = $("td:nth-child(8)", tr); //Rollen
        if (!dataItem.RolcodeVoldaan) {
            cell.addClass("myerror");
        }

    }
}

}

在网格中我添加了：

.Events(e => e.DataBound("gridDataBound "))

如何在Kendo MVC UI Grid中动态更改单元格的背景？

1 个答案: