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