Kendo UI Grid highlight selected row

Question

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.

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.

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

Kelly Cline Kelly Cline · Accepted Answer · 2013-10-01T16:08:49

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

var previousHighlightedRow;

Provide a style for the desired highlighting:

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

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);
    });

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

Kendo UI Grid highlight selected row

1 Answers