Question

Kendo UI Grid Frozen列CSS类。

我有这个带有冻结行/列的Kendo UI网格，我添加了一些条件格式，但不幸的是这个条件格式没有被添加到Frozen row / col

HTML

<div id="grid"></div>

脚本

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
        },
        pageSize: 10
    },
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true,
        buttonCount: 5
    },
    columns: [
        {
            field: "ContactName",
            title: "Contact Name",
            width: 175,
            locked: true
        }, {
            field: "ContactTitle",
            title: "Contact Title",
            width: 175
        }, {
            field: "CompanyName",
            title: "Company Name",
            width: 175
        }
    ]
    ,
    dataBound: onDataBound

});



function onDataBound(arg) {
        //console.log("Grid data bound");

        var grid = $("#grid").data("kendoGrid");
        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            console.log(gridData[i].Status);
            //get the item uid
            var currentUid = gridData[i].uid;
            //if the record fits the custom condition
            if (gridData[i].ContactTitle =="Owner") {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("ClassDeleted");
            }
            else if (gridData[i].ContactTitle == "Sales Representative") {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("ClassPublished");
            }

            else if (gridData[i].ContactTitle == "Marketing Manager") {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("ClassSaved");
            }

            else if (gridData[i].ContactTitle == "Draft") {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("ClassSaved");
            }

            else if (gridData[i].ContactTitle == "Accounting Manager") {
                //find the row based on the uid and the custom class
                var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                $(currenRow).addClass("ClassCompleted");
            }



        }

    }

CSS

 .ClassDeleted {
        background-color: orangered;
    }

    .ClassPublished {
        background-color: lightgreen;
    }

    .ClassCompleted {
        background-color: lightskyblue;
    }


    .ClassSaved {
        background-color: lightyellow;
    }

输出如下：您可以看到CSS未应用于冻结列。

enter image description here

这里有任何帮助

我创建了它jsfiddle http://jsfiddle.net/chandelyt/k2otzw4L/1/

Answer 1

当我们在kendo网格中使用冻结列时，网格分为两个表，但是2个表中的同一行具有相同的uid。在使用uid访问行时，它仅提供解锁部分的内容，因此您的未锁定部分css正在更改。

var dataItem = $("#grid").data("kendoGrid").dataSource.get(1); // 1 will give row with model id 1.
$("#grid").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "']").
addClass("k-state-selected");

要将css应用于锁定部分，请使用：

$(".k-grid-content-locked").find("tr[data-uid='" + dataItem.uid + "']").
addClass("k-state-selected");

其中“k-grid-content-locked”是被锁定部分的类。

希望这有帮助。

Answer 2

你可以用它。它对我有用！

utf8

Kendo UI Grid Frozen css - Frozen col不支持CSS

2 个答案: