When the childrow is shown, the relationship between the table header and the columns is destroyed
When the childrow is shown, the relationship between the table header and the columns is destroyed
PCCFR
Posts: 3Questions: 1Answers: 0
Hi, my first question after using datatables since 2016, so far i have been able to solve all problems myself, but not this time. When the table width in the childrow is smaler than the parent table width, there is no problem, but when the width of the datatable in the child row is larger than the parent table width, the columns and the header of the parent are stretched and the relationship between columns and header will be destroyed. Resize the Browser will fix it, but table.columns.adjust().draw() after initComplete of the child table does not. What can i do to solve the problem? It would be correct if the parent keeps its width and the childtable has a scrollbar for overflow-x or both tables resize correct incl. header.
Thanks and regards
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
Hi colin,
I was able to solve the problem myself, I did the adjust after the childRow event, which was obviously too early. Now the adjust is only applied to the parent table after the draw event of the child table. The headers are now correctly scaled.
I'm having a similar problem with the Datatables column headers becoming misaligned when child rows are being displayed. In my case, I was using a fixed height vertical scrolling "scroller" type table with only a few records. Note the number of records should be small so a vertical scroll bar has not appeared. Now, when the button to open child rows is pressed, it increases the height of the table beyond its fixed table height. This causes a vertical scroll bar to appear. The appearance of this vertical scroll bar breaks the alignment between the table data columns and the header columns.
As a test to solve this problem, I tried attaching an event to the table using the following JavaScript;
$(my_table).on('childRow.dt', function (e, show, row) {
$(my_table).DataTable().columns.adjust();
}
This worked when pressing the button to open a child row (i.e. the event triggers, thus calling the DataTable().columns.adjust(). However, when pressing the child row button again, the event was not triggered. It seems the event is only triggered when opening child rows, but not closing them. This is in contrast to the "childRow" event documentation which says, quote: "The childRow is triggered whenever a child row is inserted or removed from the table."
Thus, I assume there may be a bug somewhere.
(On a side note: I tried the above code in a "non-scroller" type table, but it requires the line;
$(my_table).DataTable().columns.adjust().draw();
...instead. However, I discovered the ".draw()" line triggered the code which I attached to the "childRow.dt'" child row event again, causing an infinite loop until eventually causing a JavaScript stack overflow).
@Trevor_Attwood
Are you using
row().child.hide()orrow().child.remove()when closing the child row? I suspect usingrow().child.remove()will fire the event.Kevin
Hi Kevin,
Thanks for the response.
I'm not using row().child.hide() or .remove(). My table and all its data is created entirely within html (plus a bit of JavaScript to init the Datatable), and I just use html classes to mark which table columns are treated as child rows.
For example, to create the table, I set the attributes in html as;
data-scroll-Y="300" data-paging="true" data-scroll-X="true" data-scroller="true"
The table also has the class "responsive".
Then, for the 'th' table elements, I apply the classes "control all" to the first column which will contain the child row button (the "+" in a blue circle icon, which is generated after calling the Datatables JS initialization function). Then, for the majority of table column 'th' elements, I apply the class "all". But for the columns to appear as child rows, I add the class "none".
(Edited:)
In JavaScript, I attach an event to the "childRow" to call the header alignment adjust() function, i.e.
$("#my_table").on('childRow.dt', function (e, show, row) { $(#my_table).DataTable().columns.adjust();
});
Then for my JavaScript initialization, i just use;
$("#my_table).DataTable({});
This fix to correct misaligned headers seems to work fine when opening a child row (i.e. pressing the "+" button). But when closing the child row (pressing the red "-" button), the event is not triggered.
@Trevor_Attwood
I thought you were using Child Row Details which I believe is what the
childRowevent is intended for. With Responsive you will want to useresponsive-displayinstead.Kevin
Thanks Kevin! I'll give that a try.
(I was trying to edit my second comment to add more info, but upon saving, it seems to have vanished!)
Yes, that solved my problem! Thank you Kevin!
On a side note, I looked at the link you provided for "responsive-display", and copied its example code, i.e.
table.on( 'responsive-display', function ( e, datatable, row, showHide, update )
Initially, it didn't work. Then I read the top part of the description, and it said "Please note that, as with all DataTables emitted events, this event is triggered with the dt namespace. As such, to listen for this event, you must also use the dt namespace by simply appending .dt to your event name, [...]"
So I changed the line to include the .dt namespace, i.e.;
table.on( 'responsive-display.dt', function ( e, datatable, row, showHide, update )
...and it now works. So, is the example for the "responsive-display" incorrect, such that it is missing the .dt namespace?
Sorry, Trevor, your reply got caught in the spam filter.
The ".dt" namespace should be used as in some cases it is definitely needed. We tend to drop it in the simple test cases as there it isn't.
Colin