更改Kendo UI网格行字体颜色导致奇怪的选择CSS显示问题

Question

使用Kendo UI Grid我在通过jQuery向一行中的每个TD添加一个简单的CSS类之后会遇到奇怪的选择项样式问题，请参阅我的小提琴：

最新版本的Kendo UI Fiddle（v2014.1.318），演示了该错误： http://jsfiddle.net/sweetog/63j8T/1/

这个小提琴引用了v2013.1.514并且错误不存在： http://jsfiddle.net/sweetog/AHN8S/1/

将字体颜色更改为红色，然后再次选择该行后，k状态选择的行动奇怪，单击时不再突出显示整行，只是间歇性地突出显示：

$(document).ready(function () {

            var dataSource;
            var kendoCheckedIds = {};

            dataSource = new kendo.data.DataSource({
                type: "odata",
                transport: {
                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                },
                pageSize: 10
            });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                groupable: true,
                sortable: true,
                selectable: "row",
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                },
                columns: [{ template: "<input type='checkbox' class='checkbox' />", width: 30 },
                    {
                        field: "ContactName",
                        title: "Contact Name",
                        width: 200
                    }, {
                        field: "ContactTitle",
                        title: "Contact Title",
                        width: 250
                    }, {
                        field: "CompanyName",
                        title: "Company Name"
                    }, {
                        field: "Country",
                        width: 150
                    }]
            })
            .data("kendoGrid")
            .table.on("click", ".checkbox", selectKendoGridRow);

            function selectKendoGridRow() {
                var checked = this.checked,
                    row = $(this).closest("tr"),
                    grid = $('#grid').data("kendoGrid"),
                    dataItem = grid.dataItem(row);

                if (checked) {
                    //-select the row
                    kendoCheckedIds[dataItem.uid] = checked;
                    grid.select(row); // select the item  
                    //row.addClass("k-state-selected");
                } else {
                    //-remove selection
                    delete kendoCheckedIds[dataItem.uid];
                    //row.removeClass("k-state-selected");
                    grid.clearSelection(row);
                }
            }

            $('#btnMarkRed').click(function () {
                var view = dataSource.view();
                var colorClass = 'color-red';
                var grid = $('#grid').data("kendoGrid");

                for (var i = 0; i < view.length; i++) {
                    if (kendoCheckedIds[view[i].uid]) {
                        var row = $("#grid tbody").find("tr[data-uid='" + view[i].uid + "']");
                        row.find(".checkbox").prop('checked', false);
                        $.each(row.find('td'), function (index, element) {
                            $(element).toggleClass(colorClass);
                        });
                        //row.removeClass(otherColorClass).toggleClass(colorClass);
                    }
                }

                grid.clearSelection();
                kendoCheckedIds = {};
            });
        });

HTML     标记已检查项目颜色为红色

<div id="grid" style="height: 365px"></div>

CSS

<style>
 td.color-red
    {
        color: red !important;
        font-weight: 700;
    }
</style>