Lost event handlers and styles

[vpetreski]

Hey NeXT,

I need suggestion from you - my table cells have attached onClick event handlers that are doing some logic and also when clicked adding some styles to the cell.

After cluster change, all event handlers vanish and styles as well. Well, that's expected, but I am wondering is there any quick solution / option that you can provide or the only way to go is to use clusterChanged callback to re-init everything. I hope there is some better way though, because this way would need to hack a lot to make it work.

Thanks, Vanja

[NeXTs]

Hey

This case was noticed in FAQ

You need to use event delegation, so that instead of adding onClick to every cell, you add only one event to parent and check event.target. See FAQ

[vpetreski]

Nice, thanks!

And what about CSS part?

[NeXTs]

Can you set styles by class instead of inline styles?

Or there some specific styles for every row?

[NeXTs]

Or.. I didn't get what the problem with styles was.

Your styles were set by onClick event? If so - you can do same by event-delegation technique

[vpetreski]

Yes, I am using classes, but the thing is: when I click on the cell, cell background changes. After scrolling down and back after cluster changes it renders without that class. So one hack would be that on cluster change I add those classes again for the cells that had different background, but not so nice solution IMHO. What do you think?

[vpetreski]

No, my bad! I see now that I used jQuery css method to set it inline! Great, thanks a lot Next, it's a great tool, will try fixes now and give update once tested!

[NeXTs]

How its going?

[vpetreski]

Hi Next, here are my results:

1) JavaScript problem with handlers solved as you suggested

2) CSS problem still remains. More info: a) I first dynamically create string representing rows off the table, b) using rows attribute and create Clusterized object with created string representing rows, c) classes that exist in rows string are applied because Clusterized was created after the rows, d) BUT, on clicking on the row, I add new CSS class to that cell and after cluster changes this setting is lost, I guess because it happened after creating the Clusterized object. So I need a way to preserve rows/cells manipulation after cluster changes.

3) Similar CSS problem. I have one button "Select All" which is marking ALL cell as selected giving them CSS style. Since all rows don't exist because of the cluster, that class won't be applied to newly created cluster.

So what I need here in a nutshell is to preserve manipulation and do everything like I have all rows. Is it possible somehow?

Thanks! Vanja

[NeXTs]

how about adding unique class to every row (if your task has such requirements of precision. or classes may be added to even/odd rows, etc... I don't know where you need to place them) and than generate dynamic styles in separated <style> tag? Instead of affecting style attribute of each row.

See idea of other my plugin Jets.js. pay attention to description and gif, so it will be much easier to understand the idea

[vpetreski]

Nice idea! Just to confirm that I understand well:

ATM I have this in my CSS file:

td.selectedColumn { background-color: #ebf2f9; }

When user clicks on the cell I add class selectedColumn to that cell. If user clicks again I remove that class.

Idea now is not to have selectedColumn in CSS file, but to have: selectedColumn-0, selectedColumn-1, etc applied to every corresponding td before creating Clusterized object. When user clicks on the cell I have somehow to dynamically create CSS rule, for example if user clicks on cell 3 i have to create/remove rule selectedColumn-3 with background-color.

Is that correct?

[NeXTs]

Yes. Create dynamic css is easy. Just have style tag with id on the page and change its content. Example: $('#styleTag').html('.selectedColumn-1{background-color:red}')

пт, 18 нояб. 2016 г. в 18:56, Vanja Petreski notifications@github.com:

Nice idea! Just to confirm that I understand well:

ATM I have this in my CSS file: td.selectedColumn { background-color: #ebf2f9; }

When user clicks on the cell I add class selectedColumn to that cell. If user clicks again I remove that class.

Idea now is not to have selectedColumn in CSS file, but to have: selectedColumn-0, selectedColumn-1, etc applied to every corresponding td. When user clicks on the cell I have somehow to dynamically create CSS rule, for example if user clicks on cell 3 i have to create/remove rule selectedColumn-3 with background-color.

Is that correct?

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub https://github.com/NeXTs/Clusterize.js/issues/87#issuecomment-261582705, or mute the thread https://github.com/notifications/unsubscribe-auth/ABrAeFm2WTPK7MfazUyKlmX7ufVJCS0tks5q_djJgaJpZM4K1vvF .

[vpetreski]

Thanks man!

On it, will update here when tested.

Cheers, Vanja

[NeXTs]

Or, there are another way, not so tricky :) While you initialize clustize you pass 'data' array. You could than, after clicking on the row - rerender that single row with necessary inline styles and replace this row in data array by index. Then call clusterize.update method. Sure thing you'll need additional object to track state of every row (like was style set or not), but you actually will need it in both cases (in this approach and previous)

[vpetreski]

I've just implemented your first suggestion and it works like a charm! Thanks a lot for your help Next!

Cheers, Vanja