Kendo UI Grid 突出显示所选行 [英] Kendo UI Grid highlight selected row

问题描述

我有一个带有编辑命令的 Kendo (2013.2.716) 网格(编辑按钮在第一列中)和 40 多个其他列.我没有为网格设置 Selectable .填充网格后，我可以将鼠标移到编辑"命令列，然后依次突出显示每个编辑"按钮，当我单击一个按钮时，我的编辑器会立即出现.

I have a Kendo (2013.2.716) grid with an Edit command (the edit button is in the first column) and 40+ other columns. I do NOT have Selectable set for the Grid. When the grid is populated, I can run my mouse down the Edit command column and each Edit button is highlighted in turn, and when I click on one, my editor comes up right away.

但是，如果没有 .Selectable 选项，如果我滚动网格以查看 40 多列，我将无法确定我在哪一行.所以，我设置了 .Selectable().这为我提供了背景突出显示，每当我连续单击时，我都期望.但是，我有两个负面影响:一是选择新行大约需要六秒钟才能更改(并突出显示)新行，二是单击编辑"按钮现在什么也没做:没有编辑器出现.

However, without the .Selectable option, I cannot tell which row I am on if I scroll the grid to see the 40+ columns. So, I set .Selectable(). This gave me the background highlighting that I expected whenever I clicked in a row. However, I have two negative side-effects: one, the selection of a new row takes about six seconds just to change (and highlight) a new row, and two, clicking the Edit button now accomplishes nothing: no editor comes up.

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

The documentation says, "Selection can be enabled in the grid simply by setting the selectable option to true." But there must be more to it than this... It shouldn't take any time to change the background color, and it shouldn't kill my edit buttons. What did I miss?

@(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")))

推荐答案

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

Provide a global variable to store the previously-highlighted row:

var previousHighlightedRow;

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

Provide a style for the desired highlighting:

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

在 GridBound 事件中，连接行的 mouseup 事件以在先前突出显示的行上使用 removeClass，并在 'selected' 行上使用 addClass.

In the GridBound event, wire the mouseup events for the rows to use removeClass on the previously-highlighted row, and addClass on the 'selected' row.

    $('.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 多行)，并且不会终止编辑命令.

This approach is quick (with 500+ rows), and does not kill the Edit Command.

这篇关于Kendo UI Grid 突出显示所选行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！