I am using a webgrid in 2008.1. I am trying to set the column widths in code behind using percentages. This works when I set them to an absolute value (i.e. 150px) but not when I set them to a percentage (10%). When I set them to a percentage the column no longer appears on the grid. The grid takes up 95% of the screen so 10% should be visible. Any ideas what might be going on here.
Here is the relevant ASPX information:
<igtbl:UltraWebGrid ID="UG1" runat="server" Height="100%" Width="100%"> <Bands> <igtbl:UltraGridBand> <AddNewRow View="NotSet" Visible="NotSet"> </AddNewRow> </igtbl:UltraGridBand> </Bands> <DisplayLayout AddNewBox-Hidden="true" AllowAddNewDefault="No" AllowColSizingDefault="Free" AllowColumnMovingDefault="OnClient" AllowDeleteDefault="Yes" AllowSortingDefault="OnClient" BorderCollapseDefault="Separate" CellClickActionDefault="RowSelect" HeaderClickActionDefault="SortSingle" Name="UG1" RowHeightDefault="20px" ScrollBar="Auto" SelectTypeRowDefault="Single" StationaryMargins="Header" ScrollBarView="Vertical" Version="4.00" ViewType="OutlookGroupBy"> <FrameStyle Height="100%" Width="100%"> </FrameStyle> <ActivationObject BorderColor="" BorderWidth=""> </ActivationObject> <FilterOptionsDefault AllowRowFiltering="OnClient"> <FilterDropDownStyle BackColor="#466094" BorderColor="#CDD4E3" BorderStyle="Solid" BorderWidth="1" Font-Names="Verdana" Font-Size="11px" ForeColor="#FFFFFF"> </FilterDropDownStyle> </FilterOptionsDefault> </DisplayLayout></igtbl:UltraWebGrid>
Here is the InitializeLayout event handler:
Private Sub UG1_InitializeLayout(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles UG1.InitializeLayout '// Customize Band 0 UG1.Bands(0).Key = "ColorID" UG1.Bands(0).DataKeyField = "ColorID" UG1.Bands(0).Columns.FromKey("ColorID").Hidden = True UG1.DisplayLayout.UseFixedHeaders = True e.Layout.Bands(0).Columns.Insert(0, "Edit") UG1.Bands(0).Columns(0).HeaderText = "" 'UG1.Bands(0).Columns(0).Width = New Unit("23px") UG1.Bands(0).Columns(0).AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.No UG1.Bands(0).Columns(0).Type = Infragistics.WebUI.UltraWebGrid.ColumnType.HyperLink UG1.Bands(0).Columns(0).AllowRowFiltering = False UG1.Bands(0).Columns(0).Header.Fixed = True Dim arrColumnNames As New ArrayList arrColumnNames.Add("Edit") arrColumnNames.Add("ColorName") arrColumnNames.Add("ColorNumber") arrColumnNames.Add("ColorStandard") arrColumnNames.Add("ERP_Number") arrColumnNames.Add("Note") arrColumnNames.Add("NRFCode") arrColumnNames.Add("Delete") Dim i As Integer For i = 0 To UG1.Bands(0).Columns.Count - 1 If Not arrColumnNames.Contains(UG1.Bands(0).Columns(i).Key) Then UG1.Bands(0).Columns(i).Hidden = True End If Next UG1.Bands(0).Columns.FromKey("ColorName").HeaderText = "Color Name" UG1.Bands(0).Columns.FromKey("ColorName").Width = New Unit("15%") UG1.Bands(0).Columns.FromKey("ColorNumber").HeaderText = "Color Number" UG1.Bands(0).Columns.FromKey("ColorNumber").Width = New Unit("10%") UG1.Bands(0).Columns.FromKey("ColorStandard").HeaderText = "Color Standard" UG1.Bands(0).Columns.FromKey("ColorStandard").Width = New Unit("10%") UG1.Bands(0).Columns.FromKey("NRFCode").HeaderText = "NRF Code" UG1.Bands(0).Columns.FromKey("NRFCode").Width = New Unit("10%") UG1.Bands(0).Columns.FromKey("ERP_Number").HeaderText = "ERP Number" UG1.Bands(0).Columns.FromKey("ERP_Number").Width = New Unit("10%") UG1.Bands(0).Columns.FromKey("Note").HeaderText = "Note" 'UG1.Bands(0).Columns.FromKey("Note").Width = New Unit("45%") '// Insert the Delete hyperlink/icon column UG1.Bands(0).Columns.Add("Delete") UG1.Bands(0).Columns.FromKey("Delete").CellButtonDisplay = Infragistics.WebUI.UltraWebGrid.CellButtonDisplay.Always UG1.Bands(0).Columns.FromKey("Delete").Type = Infragistics.WebUI.UltraWebGrid.ColumnType.Button UG1.Bands(0).Columns.FromKey("Delete").Width = New Unit("23px") UG1.Bands(0).Columns.FromKey("Delete").CellButtonStyle.BackColor = Color.Transparent UG1.Bands(0).Columns.FromKey("Delete").CellButtonStyle.BackgroundImage = "~/misc/images/delete.gif" UG1.Bands(0).Columns.FromKey("Delete").CellButtonStyle.BorderStyle = BorderStyle.None UG1.Bands(0).Columns.FromKey("Delete").CellButtonStyle.Width = New Unit("16px") UG1.Bands(0).Columns.FromKey("Delete").CellButtonStyle.Height = New Unit("16px") UG1.Bands(0).Columns.FromKey("Delete").AllowUpdate = Infragistics.WebUI.UltraWebGrid.AllowUpdate.No UG1.Bands(0).Columns.FromKey("Delete").AllowRowFiltering = False End Sub
My recommendation is to either go all relative widths (ie. percentages) or all absolute (ie. pixel values). Since you're mixing and matching, it get's really difficult to even guess how a browser will layout the columns. In your scenario you're telling the HTML table that you want columns "Color Name" to "Note" to take up 100% of the available width. Then you're adding two more columns "Delete" and "Edit" which are supposed to take up 16px of space each. The problem is, you're already using up 100% of the available space. The ambiguity is left up to the Browser's rendering engine to decipher. It's certainly possible that it decided to use up 100% + 32 pixels. If you're grid is set so that it doesn't have scrollbars, you'll never be able to access the column that got pushed out of the visible area.
Your option is to either ave all of the % widths add up to less than 100%, or make the two pixel width columns into percentage width columns. You can also play around with not setting a default column width, and then using CSS to set widths dynamically, but that does get pretty tricky so I wouldn't recommend that if you're not comfortable with CSS and Javascript.
Hope this helps,
-Tony
I tried taking out anything that had a specified value. I then set one column to be 10% width. When I rendered the page that column does not appear.