On hovering over row icon is not displayed in rowheaders

Tags: #<Tag:0x00007f8b188d63a0>
#1

Hello @aleksandra_budnik. I am stuck in development. What I want is when a user hovers over the cell( OR row) then an expand icon should be displayed in row headers and clicking on that icon will open a popup displaying row data which is context, when the user clicked on the icon.

Here is a little demo I developed on fiddle. Example

I added a mouse over and out event on cell and on that event’s function handler I am displaying an icon in row headers. However, the icon is not displayed at all when I hover over a cell. Strange is when I mouse over row header cell then the icon is displayed and mouse out then the icon disappears. I want this same behavior on other cells as well(i.e. cells which contains actual data)

any help will be grateful.

#2

Hey @manthanp

for the header itself it is easier as you attach the new element to the same elements that you are hovering on. Maybe you can use the rowHeaders with afterOnCellMouseOver hook like https://jsfiddle.net/handsoncode/vq67dayu/13/

#3

Ohh. yes. thank you. This is really helpful.

#4

You’re welcome. Good luck with the project.

#5

hi @aleksandra_budnik one fallback I find the solution you have provided is that everytime i hover on my cell, all cell renders are being called. Which might impact performance. What do you think ?

#6

The updateSettings itself is calling the renderer to let the table know that we’re changing something. Currently there is no choice to stop the renderer of being called.

#7

Thank you for a response. Any other solution you can think of because I have few custom renders and many custom editors. It is making app slow when i hovering over cell

#8

Hm…

afterOnCellMouseOver is the only hook that we can use. The updateSettings method is the only one that can update the colHeaders.
The column headers can be also changed by the native DOM changes (but I wouldn’t recommend those as they’re outside the official API) and the afterGetColHeader hook.

You can try to modify the TH itself

afterOnCellMouseOver: function() {
		  var parent = arguments[2].parentNode.children[0];
		  parent.className = parent.className + ' abc';
     }

but I cannot guarantee that it won’t break anything in further processing.

#9

I am getting this error and i don’t know how to debug. i have some custom HTML as part of my custom renderer. when I am using this solution (i.e. using rowHeaders with afterOncellMouseOver first time you given not the last reply) getting this error randomly.

#10

that will surely complicate the path of finding the fix. You can try to console the variables if debugging gets too complicated.

#11

I see that I have created a custom renderers like this, and whenenver I hover over a custom element I have created as part of my renders it throws an error. I don’t know the logic.

function (hotInstance, td, row, column, prop, value, cellProperties) {
Handsontable.renderers.BaseRenderer.apply(this, arguments);
let templateString = ‘’;
templateString = value ? <ul class='listRendererWrpper'><li style='background-color:#CCC'>${value}</li></ul> : ’ '; const { rootDocument } = hotInstance,
ARROW = rootDocument.createElement(‘DIV’);
ARROW.className = ‘htAutocompleteArrow’;
ARROW.appendChild(rootDocument.createTextNode(String.fromCharCode(9660)));
Handsontable.dom.empty(td);
Handsontable.dom.fastInnerHTML(td, <div style='width:80%'>${templateString ? templateString : ''}</div>);
td.insertBefore(ARROW, td.firstChild);
td.setAttribute(‘data-col-id’, prop);
return td;
},

#12

Can you fill this example with the mouse over hook?

https://codepen.io/anon/pen/NZJpdV?editors=0010

ps. Handsontable can only hold one element as data, in your example I get a complex object.

#13

I resolved the complex Object issue and also updated with mouse over hook . here is the link

https://codepen.io/anon/pen/ewXExv?editors=0010

#14

hi. @aleksandra_budnik I have fixed this issue as of now. I am not using the solution you have provided earlier. I came with the other solution. here is link https://jsfiddle.net/kx8r3b20/8/ .

but, I am stuck here. Now, when I hover over a row, the checkbox is displayed. I want to select the row when the user checks the checkbox and deselect the row when the user unchecked. I am able to do for an only single row at a time. I want to do for multiple rows. My solution is not working for multiple row selection. we have selectCells method but I don’t know whether it is good to use because I have to provide him an array of arrays every time. Method deselects all the cells first and then again select all the cells. That is not I desired.

My expectation is, let say user click on row1’s checkbox then row 1 will get selected and then user clicks on row5’s checkbox at that instance row 5 should get selected but row1 should also remain selected.

I tried to emulate CTRL + click manually but it does not seem to be working for me. Any quick solution for this code will be really help. If you can come with a quick solution. It will be really of great help.

hi @aleksandra_budnik any solution for this ?

#15

I’m glad that you’ve found the solution but the provided scenario is custom. I would need to ask our developers for help.

Please share your license ID or license email with me on support@handsontable.com

#16