Allow the datagrid body to scroll without scrolling the header.

Review Request #5143 — Created Dec. 19, 2013 and submitted

Information

Djblets
master

Reviewers

Allow the datagrid body to scroll without scrolling the header.

This does some heavy surgery to Datagrid's handling of the table header.
Tables aren't able to scroll only their body. All thead tags will scroll
along with it. My goal was to allow the body to be scrolled without the
header, in order to create a nicer experience with large numbers of
rows.

To make this work, we create two tables: One for the header, one for the
body. We pull out a copy of the header from the original body and place
it in the header table. We then do some work to synchronize all the
widths and to ensure that we don't lose their natural widths.

The details are in the comments in the code, but the end result is that
the table acts as it did across all major browsers, with the difference
being that the body is scrollable.

Now to make it scrollable, a height must be assigned to the datagrid
element, and resizeToFit must be called on resize (after appropriately
sizing the datagrid). The datagrid will then do the rest.

Tested with my accompanying Dashboard changes, and with the more plain
datagrids on the Groups and All Review Requests pages.

For the dashboard, the body scrolled without disrupting the header.

For the others, they behaved as before. Scrolling was handled by the
browser.

I tested reordering columns, adding/deleting columns, and resizing the
window.

This was tested in Chrome, Firefox, IE10 and IE 7, 8 and 9 compatibility
modes through IE10.

chipx86
david
  1. It looks like you posted this without specifying the right parent branch.

  2. 
      
chipx86
david
  1. Ship It!
  2. 
      
chipx86
Review request changed
Status:
Completed