I have a been playing with a grid to use for a FAQ page on our web site. The grid pulls FAQ items from a DB, does some things with them and puts the results in the grid. The grid displays properly in IE 7 but does not display right in FireFox 3. I've included 2 screen shots but the FireFox issue is that there are lines through the middle of various wrapped cells and the last row in the grid is ... well, strange.
Here is the IE 7 version
The FireFox 3 version
Any suggestions as to what I may have done to cause such an ugly result?
Here is the page source. Note that the grid is bound at run time to a business object and the 2nd band is added along with the associated rows at run time.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="faqform.aspx.cs" Inherits="faqform" %><%@ Register assembly="Infragistics2.WebUI.UltraWebGrid.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.WebUI.UltraWebGrid" tagprefix="igtbl" %><%@ Register assembly="Infragistics2.WebUI.Misc.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.WebUI.Misc" tagprefix="igmisc" %><%@ Register assembly="Infragistics2.Web.v8.2, Version=8.2.20082.1000, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.DataSourceControls" tagprefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> #form1 { width: 622px; } </style> <script type="text/javascript" id="igClientScript"><!--<!--function FaqGrid_DblClickHandler(gridName, cellId){ var gridClientID = "<%= FaqGrid.ClientID %>"; igtbl_cancelPostBack(gridClientID); var oRow = igtbl_getRowById(cellId); oRow.toggleRow();}// -->function FaqGrid_InitializeLayoutHandler(gridName){ //Add code to handle your event here. //* Set the column setHidden() value. var oGrid = igtbl_getGridById(gridName); //oBand = oGrid.Bands // for (i =0; i < oGrid.Bands.length; i++) { var oBand = oGrid.Bands[i]; if (oBand.Key == "Categories") { for (j=0; j < oBand.Columns.length; j++) { var oColumn = oBand.Columns[j]; if (oColumn.Key == "Category") oColumn.setHidden(false); else oColumn.setHidden(true); } } else if (oBand.Key == "Faqs") { for (j=0; j < oBand.Columns.length; j++) { var oColumn = oBand.Columns[j]; if ((oColumn.Key != "Question") && (oColumn.Key != "Answer")) oColumn.setHidden(true); else oColumn.setHidden(false); } } }}// --></script></head><body> <form id="form1" runat="server" > <div align="left" style="width: 617px; " title="FAQs Division"> <igmisc:WebPanel ID="WebPanel1" runat="server" BackColor="White" Height="68px" Section508Compliant="True" Width="619px" BorderStyle="None" Font-Bold="False" Font-Names="Verdana,Tahoma,Arial,Helvetica,Sans-serif"> <PanelStyle BorderStyle="Solid" BorderWidth="1px"> <Padding Bottom="5px" Left="5px" Right="5px" Top="5px" /> <BorderDetails ColorBottom="0, 45, 150" ColorLeft="158, 190, 245" ColorRight="0, 45, 150" ColorTop="0, 45, 150" /> </PanelStyle> <Header Text="TastingMaster Frequently Asked Questions" TextAlignment="Left"> <ExpandedAppearance> <Styles BackgroundImage="igpnl_office2k3.png" BorderStyle="Solid" BorderWidth="1px" Font-Names="Verdana,Tahoma,Arial,Helvetica,Sans-serif" Font-Size="11pt" Font-Bold="True"> <Padding Bottom="1px" Left="4px" Top="1px" /> <BorderDetails ColorLeft="158, 190, 245" ColorRight="0, 45, 150" ColorTop="158, 190, 245" WidthBottom="0px" /> </Styles> </ExpandedAppearance> <ExpansionIndicator Height="0px" Width="0px" /> </Header> <Template> Click on +/- button or double click on the category you are interested in to view the answers </Template> </igmisc:WebPanel> </div> <div style="width: 617px;"> <table style="border: thin solid #0000FF; width:100%;" title="TastingMaster FAQ" width="100%"> <tr > <td valign="top" height="100%" width="100%"> <igtbl:UltraWebGrid ID="FaqGrid" runat="server" Height="100%" oninitializeband="FaqGrid_InitializeBand" oninitializedatasource="FaqGrid_InitializeDataSource" oninitializelayout="FaqGrid_InitializeLayout" oninitializerow="FaqGrid_InitializeRow" Width="100%" ondatabound="FaqGrid_DataBound"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout Name="FaqGrid" NoDataMessage="There is no FAQ information to display" RowSizingDefault="Free" SelectTypeRowDefault="Single" StationaryMarginsOutlookGroupBy="True" Version="3.00" ColWidthDefault="200px" HeaderTitleModeDefault="Always" Section508Compliant="True" ViewType="Hierarchical" RowSelectorsDefault="No" SortCaseSensitiveDefault="False"> <FrameStyle BorderColor="#999999" BorderStyle="None" BorderWidth="3px" Cursor="Default" Font-Names="Verdana,Tahoma,Arial,Helvetica,Sans-serif" Font-Size="10pt" Height="100%" Width="100%"> </FrameStyle> <RowAlternateStyleDefault BackColor="#C5CADB"> <BorderDetails ColorLeft="197, 202, 219" ColorTop="197, 202, 219" /> </RowAlternateStyleDefault> <ClientSideEvents DblClickHandler="FaqGrid_DblClickHandler" InitializeLayoutHandler="FaqGrid_InitializeLayoutHandler" /> <HeaderStyleDefault BackColor="#659CCF" BorderColor="Black" BorderStyle="Solid" Font-Bold="True" Font-Names="Verdana,Tahoma,Arial,Helvetica,Sans-serif" Font-Size="11pt" ForeColor="White" Height="40px"> <BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" /> </HeaderStyleDefault> <RowStyleDefault BackColor="White" BorderColor="Gray" BorderStyle="Solid" BorderWidth="1px" ForeColor="Black" Wrap="True" VerticalAlign="Top" > <Padding Left="3px" /> <BorderDetails ColorLeft="White" ColorTop="White" /> </RowStyleDefault> <SelectedRowStyleDefault BackColor="#CAD6E0" ForeColor="White"> </SelectedRowStyleDefault> <ActivationObject BorderColor="Black" BorderStyle="Dotted" BorderWidth=""> </ActivationObject> <FilterOptionsDefault> <FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px" Width="200px"> <Padding Left="2px" /> </FilterDropDownStyle> <FilterHighlightRowStyle BackColor="#151C55" ForeColor="White"> </FilterHighlightRowStyle> <FilterOperandDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px" CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif" Font-Size="11px"> <Padding Left="2px" /> </FilterOperandDropDownStyle> </FilterOptionsDefault> </DisplayLayout></igtbl:UltraWebGrid> </td> </tr> </table> </div> </form></body></html>
Neil
Just in case anyone else runs into this issue I wanted to give an update.
So, as it turns out, after spending several hours putting together a project that developer suport could use to recreate the problem it is a known problem and marked as "Won't fix". The finger is pointed at FireFox of course..."My stuff is fine, the other guys is messed up" not that it matters.
Since the WebGrid does not render properly on FireFox and does not work at all on Safari I'm off looking for some other product to use to meet my ASP.Net development needs. Disappointing since I've been using the Windows Forms stuff for a year or so and been happy with that, I was hoping that the ASP.Net support would be equally as good. But not really ready for prime time I guess for the Grid.