Kendo UI 网格突出显示所选行

我有一个 Kendo (2013.2.716) 网格，其中包含一个编辑命令（编辑按钮位于第一列）和 40 多个其他列。我没有为网格设置可选集。填充网格后，我可以将鼠标放在“编辑”命令列上，每个“编辑”按钮会依次突出显示，当我单击其中一个时，我的编辑器会立即出现。

但是，如果没有 .Selectable 选项，当我滚动网格查看 40 多列时，我无法判断自己位于哪一行。所以，我设置了.Selectable()。这给了我每当我连续单击时所期望的背景突出显示。但是，我有两个负面影响：一是选择新行大约需要六秒钟才能更改（并突出显示）新行，二是单击“编辑”按钮现在什么也做不了：没有编辑器出现。

文档说：“只需将可选选项设置为 true，即可在网格中启用选择。”但一定不止于此......更改背景颜色不应该花费任何时间，也不应该杀死我的编辑按钮。我错过了什么？

@(Html.Kendo().Grid(Model.Data)
.Columns(columns =>
{
    columns.Command(command => command.Edit().Text("Edit").UpdateText("Submit")).Width(97).HtmlAttributes(new { style = "text-align: center;" });
...
})
.Selectable( )
.Editable(editable => editable
    .Mode(GridEditMode.PopUp)
    .TemplateName("MyEditor")
    .Window(w => w.Width(500))
    .Window(w => w.Title("My Editor")))

提供一个全局变量来存储先前突出显示的行：

var previousHighlightedRow;

提供所需突出显示的样式：

.highlightTR {
    background-color: #99CCFF;
}

在 GridBound 事件中，连接行的 mouseup 事件，以在先前突出显示的行上使用 removeClass，并在“选定”行上使用 addClass。

    $('.k-grid-content tbody').off('mouseup');
    $('.k-grid-content tbody').on('mouseup', 'tr', function () {
        if (previousHighlightedRow != undefined) {
            previousHighlightedRow.removeClass("highlightTR");
        }
        $(this).addClass("highlightTR");
        previousHighlightedRow = $(this);
    });

这种方法速度很快（超过 500 行），并且不会终止编辑命令。