I have a webgrid with fixed headers and footers that is having some weird rendering issues in IE 7. THe grid works beautifully in Firefox and safari, but IE doesn't seem to want to behave. The attached image shows the problem I am having. My page is set to XHTML 1.0 transitional mode and I have the webgrid wrapped in a DIV with position: relative in the style, but to no avail. Nothing seems to work to fix the problem. Any help would be appreciated. Here is my markup for the grid:
<igtbl:UltraWebGrid ID="wg" runat="server" Width="810px" Height="350px"> <DisplayLayout ColWidthDefault="37px" StationaryMargins="HeaderAndFooter" AutoGenerateColumns="False" AllowSortingDefault="Yes" RowHeightDefault="20px" HeaderClickActionDefault="SortMulti" RowSelectorsDefault="No" Name="wg" TableLayout="Fixed" CellClickActionDefault="NotSet" SelectTypeRowDefault="Single" OptimizeCSSClassNamesOutput="true" ColFootersVisibleDefault="yes"> <HeaderStyleDefault Height="180px"> </HeaderStyleDefault> <FrameStyle Width="810px" Height="350px"> </FrameStyle> <FooterStyleDefault Height="55" Font-Size="8pt" Font-Bold="true" VerticalAlign="top" HorizontalAlign="center" Font-Names="Arial"> </FooterStyleDefault> </DisplayLayout> <Bands> <igtbl:UltraGridBand> </igtbl:UltraGridBand> </Bands> </igtbl:UltraWebGrid>
I've submitted this as a support request, but so far have gotten nothing back. These rendering errors are becoming increasingly frustrating. I run into new ones every time a release comes out.
After some investigation I can add this additional info (which does not fix it at all):
Not sue is this is related but I have found that if you want to hide columns in yoru grid (say DataColumnID field) then these must be the right most columns or I get this kind of behavior. Are you trying to hide any such columns?
We have had a similar issue, and found in our case, we could have the grid overflowing it's frame (actually, I think it was the DIV) similar to what yours showed when we did the following in the aspx
<some javascript>
foo foo('<%= UltraWebGrid.ClientID%>');
</script>
<igblah grid stuff>
</ig grid>
However, if we simply moved all javascript where we had forced getting the ClientID from before the grid was declared in the page, to after the grid was declared, it resolved the issue.
Good luck!
I was having the same problems. I had placed my grid in a div and wanted the grid to never scroll, thus size-up relative to the data inside and instead use the div to scroll the entire grid.
Never got this to work, but decided to make the grid the same size as the div (by javascript via onresize) and use the grid's scroll functionallities.
Works like a charm and looks the same.
Cheers,
Ed
I was able to get a workaround from Infragistics support. It places the position:relative tag around the rows DIV when the grid loads. This forces IE to be consistent with Firefox in its code generation:
function UltraWebGrid1_InitializeLayoutHandler(gridName){
var grid = igtbl_getGridById(gridName);
var div = grid.getDivElement();
div.style.position="relative";
}
It worked like a charm. Now my grid rows stay in the DIV that they are supposed to be in. I still have no idea what caused the problem and this workaround forces me to include this javascript code on every page I have a grid, but it's better than nothing.
Hope that helps.
Mike
I believe I have a similar problem, my grid is appearing at the bottom of my page, underneath the content area, then if I scroll down and mouseover the grid it "pops" into place in the content area. It then remains fixed in that spot, even if I scroll up and down the page. This only happens in IE7, not in Firefox.
I tried to implement the code in your post, but haven't had success. Where do you place the function call for the script?
Thanks!
You can place the following tag in the DisplayLayout section of the grid markup:
<ClientSideEvents InitializeLayoutHandler="Ultrawebgrid1_InitializeLayoutHandler" />
That should force the grid to call this javascript function during the IntializeLayout event. Though it sounds like your problem is a little different than mine in that yours eventually "pops" into place. Mine never corrected itself.
Would you mind providing your code as an example? I have added the JavaScript and the tag in the DisplayLayout section, however my JavaScript is not firing. I placed an alert popup box in the code and I'm not seeing the message. Thanks.
I'm experiencing the exaxt same problem - grid rows pop back into place when I use scroll bars. Did you find a resolution? Any help would be appreciated. Thanks
Thanks for your reply.
I was hoping that this would fix my problem since I felt it might be a problem with the position style, but now it doesn't "pop" back in place, it just stays at the bottom of the screen. I'll have to keep searching...