Kendo UI Сетка выделенной строки

Question

У меня есть сетка Kendo (2013.2.716) с командой Edit (кнопка редактирования находится в первом столбце) и 40+ других столбцов. У меня нет Setable set для Grid. Когда сетка заполнена, я могу запустить мою мышью в колонке «Редактировать команду», и каждая кнопка «Редактировать» подсвечивается поочередно, и когда я нажимаю один, мой редактор сразу появляется.

Однако, без опции .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"))) 

Answer 1

Обеспечить глобальную переменную для хранения ранее выделенной строки:

var previousHighlightedRow; 

обеспечивают стиль для желаемой подсветки:

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

В случае GridBound, проволока в MouseUp событий для строк, использующих removeClass в ранее выделенной строке, и addClass в строке «selected».

$('.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 + строками) и не убивает команду Edit.