fixedHeader stops working with Detail Rows

pain19

I just have a quick question. Not sure there's a real need for a test case.

I have turned on fixedHeader and it works just fine as long as I don't have too many detailed/child rows are not showing. I have functionality to expand all detail/child rows via a button (expands for the current page) or header row (expands all rows).

At any rate, let's say I have (100) rows and I expand each rows detail/child row. The fixedHeader works initially but if I scroll down far enough, the header eventually scrolls out of sight. But again, if all detail/child rows are collapsed, it doesn't seem to affect the header row. I tested with a few hundred rows and it stayed in place.

Just wondering if I missed a setting or not. I reviewed the examples, but none of them involved detail/child rows so I'm guessing it is not fully designed to work with detail/child rows.

Fyi, "freakin awesome stuff you guys have created! I love datatables and the customers using my app seem to love it to!

kthorngren

I was able to recreate the issue in this test case:
http://live.datatables.net/cutogohe/1/edit

Click the Open all button then scroll and you will see the problem. Looks like the fixedHeader.adjust() will help. Uncomment the line //table.fixedHeader.adjust(); then click Run with JS button. Do the same test and you will see the FixedHeader works. This is from the docs:

For performance reasons the position values are cached rather than being constantly updated.

Use the fixedHeader.adjust() in the function where you show and hide the rows. I have this in the click event.

Kevin

pain19

@kthorngren you're the man!!! I knew I had to be missing something and this was it! I did what you said and achieved the desired results! I think you just made my app infinitely better my friend, so THANK YOU for the assist!

pain19

@kthorngren quick follow up help. I noticed the following:

1) Open all detail rows.
2) Scroll down a bit so the header is fixed.
3) Sort any column.

When this happens, I get the same result as before where the header will eventually scroll off.

I thought if I monitored the sort/order event (order.dt) and when fired, use the adjust() method, but that doesn't seem to fix the issue like it did before. I know the event is being fired and captured correctly because I output to the console when it is triggered. I am using something like the following in my code.

`table.on('oder.dt', function() {
console.log("User has performed a sort.

// I've tried both
table.fixedHeader.adjust(); // Does prevent the bad result
$('#example).fixedHeader.adjust(); // Currently collapses all detail rows
});`

Anyway, let me know your thoughts and I'll continue to use your current code to work with.

kthorngren

Thought maybe it would work in the draw event:
http://live.datatables.net/cutogohe/4/edit

But it doesn't. Not sure why. Maybe @allan or @colin can help.

$('#example).fixedHeader.adjust(); // Currently collapses all detail rows

You need an instance of the API. $('#example) is just returning a jQuery object. You could use $('#example).DataTable().fixedHeader.adjust();.

Kevin

pain19

@kthorngren: from my testing, it looks like I may have figured it out--your last example was on track. I took that code and put it inside of the event that was tracking the order event. Below is the final piece of code (in case you're curious or someone else stumbles on this post):

  table.on('order.dt', function() {
    table.on('draw', function () {
      table.fixedHeader.adjust();
    });    
  });

Thanks again for all your help and super-fast responses!

kthorngren

That looks a bit dangerous

I think this will result in a new draw event being created each time the table is ordered. But that does suggest there might be a timing issue. I added a setTimeout with a 0 delay in the draw and it seems to work:
http://live.datatables.net/cutogohe/8/edit

Kevin

colin

Kevin is right, that will create more and more event handlers on each order event. A workaround though is to just call that event once with one(), rather than on():

  table.on('order.dt', function() {
    table.one('draw', function () {
      table.fixedHeader.adjust();
    });    
  });

Colin

pain19

@kthorngren and @Colin: Thanks for the assistance! It works like a charm and will not produce an endless event handlers!

On to the next issue for me.

My app uses tabs and each tab has its own DT. All tables are loaded with their data when the page is loaded. I started turning on the fixedHeader on a new tab but when it scrolls it initially displays the correct header, but if I scroll enough it gets replaced by the header of the existing tab that is working. I'm sure I need to do a check to make sure the proper fixedHeader is displayed. But I'm not one to be spoon fed so I'll spend some time on it. And open a new thread if necessary.

Thanks again and your guys really do ROCK!!!

kthorngren

I've seen issues like this on the forum but don't remember the exact cause. Make sure you are using the correct FixedHeader JS and CSS files for the styling framework you are using. Use the Download builder. Take a look on the forum to see if you can find other threads with the same issue.

Update the test case to show the issue if you don't find the resolution.

Kevin