Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
135
% Column Width Not Working
posted

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
Parents
  • 19308
    posted

    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

     

Reply Children