Kendo Grid - Получить индекс ячейки при наведении

Я пытаюсь добавить kendoToolTip в ячейки определенного столбца в моей сетке. Прямо сейчас подсказка работает, но она отображается при наведении курсора на любую ячейку в сетке.

Я хочу получить конкретный индекс ячейки элемента над ним, чтобы я мог отображать только всплывающую подсказку, например, при наведении указателя мыши на индекс 9 ячейки.

Код, который у меня есть, всегда возвращает мне индекс ячейки -1. Я могу заставить его работать с событием onclick, но я не могу заставить его работать при наведении курсора.

Любая помощь будет оценена.

    $("#samplerequest-grid").kendoTooltip({
        filter: "td",
        content: function(e) {
            var grid = $("#samplerequest-grid").data("kendoGrid");
            var dataItem = grid.dataItem(e.target.closest('tr'));
            var rowIdx = $("tr", grid.tbody).index(dataItem);
            var colIdx = $("td", dataItem).index(this); // Always returns -1

            console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
            return dataItem.sampleStatusMsg;
        }
    });

ОБНОВИТЬ:

Спасибо за ответы. Они оба сработали бы, и я могу изменить свое решение, чтобы использовать их. Прежде чем увидеть ваши ответы, я нашел собственное решение, которое заключалось в добавлении шаблона в ячейку и фильтрации этого идентификатора.

Декларация столбца сетки:

{
   field: "sampleStatus",
   title: "Sample Status",
   width: "110px",
   locked: true,
   lockable: true,
   template: "<span id='sampStatus'>#=getValue(sampleStatus)#</span>"
},

Функция контроллера для всплывающей подсказки

$("#samplerequest-grid").kendoTooltip({
   filter: "#sampStatus",
   content: function(e) {
      var grid = $("#samplerequest-grid").data("kendoGrid");
      var dataItem = grid.dataItem(e.target.closest('tr'));
      return dataItem.sampleStatusMsg;
   }
});

2 ответа

Решение

Я думаю, что вы здесь все усложняете. Вы можете получить индексы с:

  • e.target.index() индекс клетки;
  • e.target.closest('tr') индекс строки.

Вы content Событие должно быть:

content: function(e) {
    var grid = $("#samplerequest-grid").data("kendoGrid");
    var tr = e.target.closest('tr');
    var dataItem = grid.dataItem(tr);
    var rowIdx = tr.index();
    var colIdx = e.target.index();

    console.log("row:" + rowIdx + " col:" + colIdx + " msg: " + dataItem.sampleStatusMsg);
    return dataItem.sampleStatusMsg;
}

демонстрация

Код для поиска индекса не будет работать, потому что вы ищете элементы td в контексте dataItem. Кроме того, я не думаю, что контекстом функции содержимого является текущая ячейка. Этот код должен работать, чтобы найти индекс:

var row = e.target.closest('tr');                  
var colIdx = $("td", row).index(e.target); 

но ИМХО лучший подход - добавить класс к ячейкам столбца и тот же класс к фильтру: https://dojo.telerik.com/@SiliconSoul/UbImUjOl

Другие вопросы по тегам