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

Question

Kendo UI 网格卡住列 CSS 类。

我有一个带有卡住行/列的 Kendo UI 网格，我添加了一些条件格式，但不幸的是，此条件格式没有添加到卡住行/列

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 未应用于卡住列。

这里有任何帮助

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

Answer 1

当我们在剑道网格中使用卡住列时，网格会分为两个表，但两个表中的同一行具有相同的 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”是锁定部分的类别。

希望这有帮助。