Hi,
We are using Tooltip beforeShow listener to show tooltip. How can I retrieve resource id and column id from the function argument?
Best regards,
Kerstin
Support Forum
Please show how you add and use the tooltip. For example using CellTooltip feature you have record and column in the arguments. Please see Cell tooltip demo for reference.
examples/celltooltip/app.js
examples/celltooltip/app.js
features : {
// enable CellTooltip and configure a default renderer
cellTooltip : ({ record, column }) => record[column.field]
},
Pavlo Miklashevych
Sr. Frontend Developer
I have no idea what .activity is in your application. You can receive target element using tip.activeTarget property.
But without a full context I cannot tell more. Please explain better what you're trying to achieve and attach a screenshot that shows your tooltip. Providing a small runnable testcase based on one of our demos is the best way to get the fastest support. Cheers!
beforeShow: function({ source : tip }) {
console.log(tip.activeTarget)
}
Pavlo Miklashevych
Sr. Frontend Developer
Here is an updated "examples/groupedheaders/app.umd.js", instead of '.activity', class used here is '.name'. Hover over the lightblue names for console log.
Best regards,
Kerstin
"use strict";
function nameRender(_ref) {
var value = _ref.value,
cellElement = _ref.cellElement;
cellElement.innerHTML = '<div class="names" style="background-color: lightblue">' + value + '</div>';
}
new bryntum.grid.Grid({
appendTo: 'container',
minHeight: '20em',
features: {
columnPicker: true,
regionResize: true
},
columns: [{
text: 'Customer#',
field: 'id',
width: 150,
locked: true,
editor: false
}, {
text: 'Contact',
children: [{
text: 'First name',
field: 'firstName',
width: 150,
htmlEncode: false,
renderer: nameRender,
}, {
text: 'Surname',
field: 'surName',
width: 150,
htmlEncode: false,
renderer: nameRender,
}, {
text: 'City',
field: 'city',
width: 150
}]
}, {
text: 'Favorites',
children: [{
text: 'Food',
field: 'food',
flex: 1
}, {
text: 'Color',
field: 'color',
flex: 1,
htmlEncode: false,
renderer: function renderer(_ref) {
var value = _ref.value,
cellElement = _ref.cellElement;
cellElement.innerHTML = '<div class="color-box"></div>' + value;
cellElement.firstElementChild.style.backgroundColor = value;
}
}]
}],
data: bryntum.grid.DataGenerator.generateData(50)
});
new bryntum.grid.Tooltip({
hideOnDelegateChange: 700,
forSelector : '.names',
showOnHover : false,
listeners: {
beforeShow: function(_ref) {
console.log("_ref", _ref);
}
}
});
Kerstin
Hello Kerstin,
Please see getColumnFromElement and getRecordFromElement functions. They accept an element that is somewhere in a grid cell and return column/record accordingly. Please see the code snippet. I've changed selector to '.b-grid-cell .names' to make sure that activeTarget is inside a grid cell, so I don't need to check if column/record are there before use them.
Cheers,
Pavel
Please see getColumnFromElement and getRecordFromElement functions. They accept an element that is somewhere in a grid cell and return column/record accordingly. Please see the code snippet. I've changed selector to '.b-grid-cell .names' to make sure that activeTarget is inside a grid cell, so I don't need to check if column/record are there before use them.
function nameRender({ value, cellElement }) {
cellElement.innerHTML = '<div class="names" style="background-color: lightblue">' + value + '</div>';
}
new Tooltip({
hideOnDelegateChange : 700,
forSelector : '.b-grid-cell .names',
showOnHover : false,
listeners : {
beforeShow : function({ source : tip }) {
const
column = grid.getColumnFromElement(tip.activeTarget),
record = grid.getRecordFromElement(tip.activeTarget);
tip.html = `${column.id} ${record.id}`;
}
}
});
Pavel
Pavlo Miklashevych
Sr. Frontend Developer