Kendo UI Grid 突出显示选定的行答案

【问题标题】：Kendo UI Grid highlight selected rowKendo UI Grid 突出显示选定的行
【发布时间】：2013-10-06 14:07:46
【问题描述】：

我有一个 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")))

【问题讨论】：

标签： kendo-ui kendo-grid

【解决方案1】：

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

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 行），并且不会杀死编辑命令。

【讨论】：