Sorry this is long, I hope that if nothing else future searchers can glean something out of this request...
I have recently been fighting some highly annoying issues using the UltraWebGrid (ver 10.3) under IE in Standards Mode vs Quirks Mode. I have tried IE 7 and IE 9 with the same results.
Oddly, while I have found a couple of light references to there being issues with these grids under standards mode, the forums seem to be relatively devoid of much help with such Standards vs Quirks mode issues.
In Quirks mode, if I use any fixed columns, they are covered by the scrolling cells when we scroll horizontally. This issue does not exist when the document is in Standards mode. I have not found a way to resolve this other than to get the browser to render the document in Standards Mode.
However, when in Standards mode, the grid does not size itself properly when set to 100%, it overflows it's container. This is most noticable in the height, where it would actually visibly overflow the container. I found that I can fix this height issue by using JavaScript and calling the resize method of the grid [ myGrid.resize(desiredWidth, desiredHeight) ], however I still have an issue with the horizontal width. Although it appears that the grid (and it's horizontal scrollbar) fit within the container div at first glance, when you scroll all the way to the right the right-most columns are hidden from view. The amount of the table that is hidden appears to vary based on the number of the columns the table contains.
I have seen that although the columns have defined widths and heights, when I compare the same grid in Standards mode vs Quirks mode, the cells are NOT rendered the same size - the cells are larger in Standards mode, although the margins and padding seem consistent between the two, the cell itself IS larger. I believe this is caused by differences in how IE renders tables under standards and quirks modes, possibly due to the well-documented box model size calculation differences, but I am not sure, and am not sure how I can "fix" the issue. So far, general Google searches on how this mode affects IE table cell sizes have not been useful.
So, in short, does anyone know why, under Standards mode, the last columns of the grid do not show, even when scrolled completely to the end? In addition, is there a way to fix the issue, other than knocking the browser into quirks mode?
-- Insert usual blather about this being a critical issue, spending 2 days on the issue, and being on a deadline here :P --
Thanks!Glenn
Continuing on in the saga... I have confirmed via experimentation that this a variation of the dreaded IE box model bug because if I remove all borders on all cells, the content fits within the scrollable area. Now I either need to find how to have the width of the div that creates the scrollbar (id=grid_divscr) to be calculated properly, or how to add borders to my cells without actually adding borders to them.
Glenn
Hello Glen,
Thank you for posting this to our community.
How do you add the borders to the cells?
Sincerely,
Georgi Sashev
Developer Support Engineer
Infragistics, Inc.
http://ko.infragistics.com/support
Thank you for the detailed information.
You have case opened for something similar. Did you try to set the style like in the recommendation in the grid, using the grid`s properties?
Georgi,
Thanks for the reminder that I wanted to post some more on what I did... I did eventually get this grid to look how I needed, but it did take a lot of time and effort...
I ended up taking 3 different approaches to get all of the borders to work.
For the headers (I had 2 rows in the Headers) I used the Initalize_Layout event (where I added the second row of headers) and set the caption of the HeaderLayout objects to contain a div with a specific css class name. Then, I set these classes to have a border on the top and left sides. I only set 2 sides to have a border because border-collapse did not work anymore (because the divs are seperated by cell boundries). Here is a sample of this code:
for (int i = 0; i < e.Layout.Bands[0].HeaderLayout.Count; i++){ colHead = e.Layout.Bands[0].HeaderLayout[i] as ColumnHeader; if (colHead.RowLayoutColumnInfo.OriginY == 1 && !String.IsNullOrEmpty(colHead.Caption)) { colHead.Caption = String.Format(@"<div class=""HeaderDiv0"">{0}</div>", colHead.Caption); } if (colHead.RowLayoutColumnInfo.OriginY == 0 && !String.IsNullOrEmpty(colHead.Caption)) { colHead.Caption = String.Format(@"<div class=""HeaderDiv1"">{0}</div>", colHead.Caption); }}
On the far left of my grid, I had 2 "vertical headers", essentially 2 columns that were header-like information. For these, I used the DataBound event and set a CellStyle.CssClass value for these 2 columns. In these css classes, I defined a standard border. This was ok because these columns were also fixed, so they did not affect the scrolling area of the grid. Here is a sample of setting these CssClass properties:
grid.Columns[0].MergeCells = true;grid.Columns[0].CellStyle.CssClass = "c0";grid.Columns[0].Width = new Unit(75);
grid.Columns[1].CellStyle.CssClass = "c1";grid.Columns[1].Width = new Unit(200);
For the main, scrollable, area of the grid, I needed to set both a background color and a background image, as these were meant to show a status of Red, Yellow, or Green. For these I could have used the same approach as I used for the headers, with a div inserted in the value, however there are 5760 cells, and that really added a noticable weight to the page, so instead I drew the borders onto the images, again, only to the top and left sides.
In addition to all of the work to get this grid to look right, we also needed it to export right, which was another challenge in itself, as the ultrawebgrid does not export multiple headers, at least not until version 2011 v2, I believe. Between that and our need to set the borders, column and row spans, and background colors, we had to write a pretty extensive export routine.