Kendo UI Grid突出显示所选行

Question

我有一个带有编辑命令的Kendo(2013.2.716)网格(编辑按钮位于第一列)和40多个其他列.我没有Grid的Selectable设置.当填充网格时,我可以在编辑命令列中运行鼠标,并依次突出显示每个编辑按钮,当我单击一个时,我的编辑器立即出现.

但是,如果没有.Selectable选项,如果我滚动网格以查看40多列,我无法确定我在哪一行.所以,我设置.Selectable().这给了我突出显示的背景,无论何时我连续点击一下.但是,我有两个负面的副作用:第一,选择一个新行只需要6秒钟来改变(并突出显示)一个新行,而另外两个,点击编辑按钮现在什么都不做:没有编辑器出现.

文档说,"只需将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")))

Answer 1

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

var previousHighlightedRow;

为所需的突出显示提供样式:

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

在GridBound事件中,连接行的mouseup事件以在先前突出显示的行上使用removeClass,并在"selected"行上使用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多行),并且不会终止编辑命令.