How to add some code to the details.renderer and still call existing one ?
How to add some code to the details.renderer and still call existing one ?
johndoo
Posts: 18Questions: 5Answers: 1
Description of problem:
Sometimes when sorting a datatable column, the headers/footers are misaligned with the rows (still with scrollY: true)
But the misalignment occurs only after the responsive.details.renderer is called.
Here is my current code:
responsive: { details: { renderer: $.fn.dataTable.Responsive.renderer.listHiddenNodes() } }
I have looked at the example "Custom child row renderer" but it replaces completely the renderer, what I want is just add some kind of api.columns.adjust(); after the existing renderer call.
I don't know how modify the renderer without rewriting it completely.
NOTE: I use the last datatables version + last responsive version.
This discussion has been closed.
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
Here is a test case:
http://live.datatables.net/jelaremu/1/edit?html,js,output
Try to click several times on the "position" column ordering arrows , or try to slowly reduce the size of the browser window (Tested on last version of firefox).
On google chrome, try to reduce the size of the browser window.
Sometimes the misalignment is only 2 pixels, but it can be really huge (when a column appears/disappears in responsive mode).
If you can solve the issue in the plugin, I can then remove some tricky code I have added to solve the "browser window width change bug". ;-)
Thanks for flagging this up. Two initial comments:
scrollYas well? If not, then remove that option and the issue will be resolved.However, to resolve what you are seeing, you could use the
responsive-displayevent to trigger the call tocolumns.adjust()- updated example:Regards,
Allan
Thanks allan !
Concerning scrollY option, in some cases I will remove the paging so I need it.
I've commented out the second CSS loading in your example : update
But now the headers/footers are far away from the rows (wasted space on small screens).
And the resize window bug still there on firefox (sorting seems solved with your code).
You have to slowly reduce the width of window until one column becomes hidden.
In a datatable with many columns this occurs easily.
NOTE: if you put an alert() in the responsive-display function, it seems that it is never called.
You removed the wrong CSS. If you use the download builder, then you get all the right sources. See updated example here: http://live.datatables.net/jelaremu/5/edit
Colin
Thanks colin but bug still there in your updated version.
I'm not seeing any misalignment - can you give instructions on how to reproduce, please.
Colin
Well now this is indeed not easy to reproduce,
Example: you have to slowly reduce the width of the browser window around the transition between 4 to 3 columns visible in the datatables, you must release the mouse bouton exactly when the 4th column disapears, and then you will see the bug.
In real life there is little chance that the bug occurs but you know it is always when you make a demo to a customer that weird things occur
Ah I see. It looks like
scrollYis still enabled - see Allan's comment above about removing it - with that removed, it appears to work as expected - see here: http://live.datatables.net/jelaremu/7/editOne point worth noting is that his other comment, to use
responsive-display, isn't working - that event isn't being triggered. I've raised it internally (DD-1815 for my reference) and we'll report back here when there's an update.Cheers,
Colin
Thanks for the feedback !