dgrid (with tree column) in border container render issue in ie (compat mode)

[cgodfrey]

I created a jsfiddle http://jsfiddle.net/carole/Ncevz/ (full screen http://jsfiddle.net/carole/Ncevz/embedded/result/) for an issue that I am seeing with dgrid When I try and view this with IE in compatability mode (any columns scrolled out of view do not rerender properly when scrolled back into view). It is a dgrid in a border container (has a tree column)

I am trying to have the grid with a horizontal scroll on the grid itself (rather than the border container)

Any suggestions as to what I may be doing wrong or how I could do this differently would be appreciated

Thanks

[kfranqueiro]

It's very likely this issue could be related to your layout/CSS. Off the bat I notice that the columns are misaligned in old IE, likely due to the extra padding added to the cells in the header.

You've also got parseOnLoad: true in your data-dojo-config but are calling parser.parse() manually anyway, so you might as well take parseOnLoad out. This doesn't seem to be the cause of your problems though.

As for the actual reported issue, I'm not sure I'm even able to reproduce it, possibly because the layout already has significant other issues. I'd strongly suggest that you try to further reduce this test case - take things out of the equation (e.g. the surrounding layout widgets), start with just the grid, then work your way up until you have the least amount of code necessary to reproduce the issue, then we can take another look.

[cgodfrey]

Thank you for taking alook at this.

I've simplified the jsfiddle http://jsfiddle.net/carole/Ncevz/

• removed any padding I had on dgrid-header elements (any way to achieve this type of header adjustment without padding?)
• removed parseOnLoad in data-dojo-config (I don't have that set in my app)
• removed all layout widgets

If I look at this jsfiddle in full screen (expand the tree) , resize the browser window smaller to force a horizontal scroll on the grid - then scroll to the right - all tree rows other than the first do not render the hidden rows properly

I see it in firefox and chrome now too (not sure if there is way to attach an image here?)

[kfranqueiro]

So I spent some time trying to work with this, but it seems like in the process of further reducing this test case and pulling it out of jsfiddle, I've made the problem disappear entirely. I'm stumped as to what exactly I removed that stopped it from happening. It looks like what was happening was for whatever reason, the grid's resize function wasn't firing on window resizes, which would be a bug seeing as List.js registers a window resize handler.

On further inspection, as I was trying to get what I have on display on jsfiddle as well, I noticed that the fullscreen mode of jsfiddle seems to be pulling some wrong data (from older revisions of the fiddle), so that could be complicating matters as well. To avoid further complications, I'm providing a gist instead: https://gist.github.com/3711117

Also, this gist answers your question of how you can achieve the header adjustment you wanted without the side-effects in IE < 8. Instead of setting the padding on .dgrid-cell, set it on .dgrid-cell-padding. In modern browsers, both of these classes are set on the same node (the actual table cells), but in old IE, an extra inner node is created for .dgrid-cell-padding in order to facilitate cases like this.

[cgodfrey]

Hello Ken,

Thanks much for looking into this

I was looking into the gist sample that you provided

I still seem to see some odd render behavior for columns in IE compat mode

If I make my IE browser window narrower than the grid (to show a scroll bar)

and then scroll to the right – any tree columns that were out of view (which have now been scrolled into view) no longer render properly

The very first tree row renders properly all the time

I also noticed that there is a space past the last column (in ie compat) – with other browser the columns become wider as the browser window expands. Not sue if there is something I can do in css for this?

Thanks for the dgrid-cell-padding css recommendation

Can the padding be applied independently to column headings or does it apply to all column headings? I was hoping to add some top padding specifically to some columns and not others

hierarchyTree .dgrid-header .dgrid-cell-padding {

                               padding: 10px;

                      }

Carole

From: Kenneth G. Franqueiro [mailto:notifications@github.com] Sent: Wednesday, September 12, 2012 9:05 PM To: SitePen/dgrid Cc: Carole Godfrey Subject: Re: [dgrid] dgrid (with tree column) in border container render issue in ie (compat mode) (#277)

So I spent some time trying to work with this, but it seems like in the process of further reducing this test case and pulling it out of jsfiddle, I've made the problem disappear entirely. I'm stumped as to what exactly I removed that stopped it from happening. It looks like what was happening was for whatever reason, the grid's resize function wasn't firing on window resizes, which would be a bug seeing as List.js registers a window resize handler.

On further inspection, as I was trying to get what I have on display on jsfiddle as well, I noticed that the fullscreen mode of jsfiddle seems to be pulling some wrong data (from older revisions of the fiddle), so that could be complicating matters as well. To avoid further complications, I'm providing a gist instead: https://gist.github.com/3711117

Also, this gist answers your question of how you can achieve the header adjustment you wanted without the side-effects in IE < 8. Instead of setting the padding on .dgrid-cell, set it on .dgrid-cell-padding. In modern browsers, both of these classes are set on the same node (the actual table cells), but in old IE, an extra inner node is created for .dgrid-cell-padding in order to facilitate cases like this.

— Reply to this email directly or view it on GitHub https://github.com/SitePen/dgrid/issues/277#issuecomment-8515430 .

https://github.com/notifications/beacon/Wvlmu1SCMKCQPfTKVDV03mAxaHNeKf5l9Z71jem5k1CmzLHUkETpK__l2_1G_eev.gif

[kfranqueiro]

You're right - not sure how I missed the IE < 8 rendering issue this time around but it's there. Child items are one level deeper in the DOM; my guess is that's messing it up somehow, but I'm not sure what the real culprit is yet. This will require further investigation.

Regarding your other questions:

• It should be feasible to have different paddings on different columns (using either .field-<fieldname> or .dgrid-column-<id>); I had uber-simplified the CSS when trying to reduce the code needed for the test case.
• Non-stretching columns when all columns have explicit widths is a common issue in IE < 8; I would have liked to suggest min-width but that doesn't work for table cells in most browsers.

[cgodfrey]

Thanks again for looking into this