I have a custom Column defined in which I have added onCellClick, onMouseMouseOver and onCellMouseOut.
The onCellClick event added works fine but the other two events do not get triggered at all. Below is my costomWidget column code
export default class CustomWidgetColumn extends Column {
static $name = 'CustomWidgetColumn';
static type = 'CustomWidget';
onCellClick({ grid, record, target }) {
debugger;
if (target.closest('.refreshPlanningNextTask')) {
// Code
} else if (target.closest('.planning_next_task')) {
// Code }
};
onCellMouseOver({ grid, record, target , event}) {
debugger;
if (target.closest('.planning_next_task')) {
// Code
}
};
// destruct the timeout when the moseleaves
onCellMouseOut({ grid, record, target }) {
if (target.closest('.planning_next_task')) {
// Code
}
};
}
// Register Column
ColumnStore.registerColumnType(CustomWidgetColumn);
The reason for adding the events inside the column is because I only want to listen to the events for this particular column. Even though if I use the recommended events inside grid listeners, they would get triggered for all cells. If I add a acheck for particular cell, I can prevent the code inside these listeners from executing for all cell. However triggering the event listeners also adds processing which I do not want.
Is listening to the listeners inside grid the only option?
I implemented the logic using the listeners. I am using target.closest to check if the div on which mouse is on is the planning_next_task class div. The issue here is sometimes the mouseOver and mouseOut do not get triggered.
The column contains some other divs as well beside the planning_next _task and I only want to trigger mouseOver event if the div I am on has planning_next_task class.
I tried using taget.querySelector but that always returns true flag if I am on that cell even if the mouse is not on that div
Please post the code to reproduce this and we will try to help you. Also please describe steps to reproduce, actual and expected result.
Right now I can't see how its related to our library, so it's hard to help.
According to your use-case, every time you hover over a cell the mouse over event gets triggered but it doesn't get triggered when the mouse is over .planning_next_task. And you're calling target.closest where the target is the .b-grid-cell and closest only searches upwards not down-wards. That's why, you're not able to achieve your desired result.
