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