childRowImmediate not working

mazloumi

I am able to use initComplete and child.show to show all child rows by default but when I use the example provided using the responsive function childRowImmediate instead, it is not working. What am I doing wrong?

Link to test case: https://live.datatables.net/qolevune/239/
Debugger code (debug.datatables.net): I ran the debugger code and all JS is up to date and no errors were found
Error messages shown: No error shown
Description of problem: Why is childRowImmediate not working?

kthorngren

I commented out this CSS:

 div.container {
    min-width: 980px;
    margin: 0 auto;
}

Otherwise the container width is wide enough to display all the columns. Without this the container width can be made smaller allowing responsive to work.

I also add rhe datatables.css and responsive.css to the test case.

https://live.datatables.net/qolevune/240/edit

Kevin

mazloumi

Hi Kevin, I think you misunderstood my question. I removed all CSS. It was just a distraction from my problem.

When I use

    initComplete: function () {
          this.api().rows().every(function ( rowIdx, tableLoop, rowLoop ) {
            d = this.data();
            this.child($(format(d))).show();
            this.nodes().to$().addClass('shown');
          } );
        }

It expands the child rows automatically but when I use

    responsive: {
                details: {
                    display: $.fn.dataTable.Responsive.display.childRowImmediate,
                    type: ''
                }
            }

It's not working.

https://live.datatables.net/qolevune/239/

kthorngren

Maybe the problem is I don't understand why you are asking the question.

I explained why childRowImmediate is not working in your test case. The answer is still the same without the CSS. You have set the container width min-width: 980px; larger than the table width so Responsive does not need to hide the columns. I removed it here from your original test case:
https://live.datatables.net/qolevune/242/edit

Are you trying to use both the Responsive extension and Child Row Details at the same time? If so then using Responsive to display in a child row is not supported. The reason is they both use the same child row and both can't be used at the same time. You will need to display the responsive data using a modal like this example. See the Compatibility Matrix for details.

Kevin

mazloumi

Hi Kevin, I'm only trying to use childRowImmediate.
My goal is to have the child rows show always but with the current code, the child rows don't show

https://live.datatables.net/qolevune/242/edit

kthorngren

childRowImmediate is a function of the Responsive extension. It does not work with the Child Detail rows solution. The Responsive extension will hide rows when the table width doesn't fit inside the container. Your last test case does work once the table width is larger than the container width. Here is a screenshot with the Salary column shown in the child:

Are you trying to use Responsive or Child Detail Rows or both?

You will need to use your initComplete code if you are trying to use Child Detail rows instead of Responsive. Child Detail Rows and Responsive are two different solutions with different control methods.

Kevin