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
I am declaring my grids with minimal declarative script and then formatting them dynamically and controlling almost everything from data-driven code (C#). I too want to control the width of some but not all columns and have found this to be a surprisingly difficult thing to do.
What has worked for me is to a) specify the width of the grid using CCS such that it fits withing the browser's horizontal width without requiring a scroll bar. (I place the grid within a <div> that has the appropriate CSS declarations. This involves margins etc because I have a left-justified nav-bar.) Then I define all but one of my grid columns to be a nominated width in pixels (not a percantage) and just one column to be !00%. The fixed width columns (usually monetary values) then appear with their correct widths and the one column nomianted as 100% (usually a descriptive field) adjusts to be whatever width remains.
This works well when the grid if flat but all goes to pot with a heirarchical grid so I shall have to post about this separately :(
HTH
Hello,
I am not 100% sure that this is a bug (although it could be). I am aware of one limitation of the grid when using widths in percentages and it is documented here:
http://help.infragistics.com/Help/NetAdvantage/NET/2008.1/CLR2.0/html/WebGrid_Percentage_Widths_Used_with_Stationary_Margins_andor_Fixed_Headers_Limitation.html
So maybe setting TableLayout to Fixed will help in this case. If not, maybe contacting Developer Support directly will provide additional clues.
http://ko.infragistics.com/Support/#Overview
HTH,
After further investigation it seems that this issue is related to this line in the code behind:
UG1.DisplayLayout.UseFixedHeaders = True
As soon as I commented it out it worked. This seems like a bug to me.
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.
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