Our blazing fast Grid component built with pure JavaScript


Post by jintech »

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);

Is there something I am doing wrong here?


Post by tasnim »

Hi,

Those methods are private which is not recommended to use. Instead you should listen to these events (Docs link in the below 'Events' section) in grid listeners https://bryntum.com/products/grid-next/docs/api/Grid/view/Grid#config-listeners

Events:
https://bryntum.com/products/grid-next/docs/api/Grid/view/Grid#event-cellClick
https://bryntum.com/products/grid-next/docs/api/Grid/view/Grid#event-cellMouseOver
https://bryntum.com/products/grid-next/docs/api/Grid/view/Grid#event-cellMouseOut

new Grid({
	listeners : {
		cellClick() {},
		cellMouseOver() {},
		cellMouseOut() {}
	}
});

Hope this helps.

Best regards,
Tasnim


Post by jintech »

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?


Post by ghulam.ghous »

Unfortunately there is no alternative solution. You will have to listen to these events in order to process your logic.


Post by jintech »

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


Post by alex.l »

Hi jintech,

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.

All the best,
Alex


Post by jintech »


Post by tasnim »

Hi,

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.

To achieve your desired result you should use mouseOver and mouseOut listener in the Grid globally
To do so, you'd have to use these events
https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-mouseOut
https://bryntum.com/products/grid/docs/api/Grid/view/Grid#event-mouseOver

Here is the updated codepen https://codepen.io/dv-auntik/pen/WNqbjKZ?editors=0011

Hope this helps.

Best regards,
Tasnim


Post by jintech »

How will I be able to get the record in the mouseOut and mouseOver event. They only have event as the only param


Post by tasnim »

Hi,

You can get the record using https://bryntum.com/products/grid/docs/api/Grid/view/GridBase#function-getRecordFromElement
Here is the updated codepen https://codepen.io/dv-auntik/pen/WNqbjKZ?editors=0011

msedge_qqDvzZGmHe.gif
msedge_qqDvzZGmHe.gif (405.33 KiB) Viewed 84 times

Best regards,
Tasnim


Post Reply