Forums Retired Products and Controls
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
Close
Shrikant
20
The Web Grid header is not aligned with the columns when Scroll Bar is present
posted

Hi

When the page loads first time, the grid header ignores the width of the vertical scroll bar and uses 100% of the frame width, resulting in misalignment with the data in the columns.

The problem appears when we use StationaryMargins="Header" of the grid control and additionally include a vertical scroll bar for data.

Please let me know how to fix this. 

 below webgrid aspx code to show how I have defined the web grid. 

<igtbl:UltraWebGrid ID="ugUnitFocusAreas" runat="server" Height="100%" Width="100%" OnInitializeLayout="ugUnitFocusAreas_InitializeLayout" OnInitializeDataSource="ugUnitFocusAreas_InitializeDataSource" OnInitializeRow="ugUnitFocusAreas_InitializeRow" OnSelectedRowsChange="ugUnitFocusAreas_SelectedRowsChange">

<Bands>

<igtbl:UltraGridBand BaseTableName="UnitFocusAreas" Key="UnitFocusAreas" GridLines="Both">

<Columns>

<igtbl:UltraGridColumn BaseColumnName="FocusAreaNumber" IsBound="True" Key="FocusAreaNumber"

Width="5%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="FA #">

</Header>

</igtbl:UltraGridColumn>

<igtbl:TemplatedColumn BaseColumnName="IsGlobal" IsBound="True" Key="IsGlobal" Width="4%">

<CellTemplate>

<asp:Label runat="server" CssClass="FAPendingRequest" ID="lblIsGlobal"></asp:Label>

</CellTemplate>

<Header Caption="Gbl">

<RowLayoutColumnInfo OriginX="1" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="1" />

</Footer>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Center" VerticalAlign="Middle">

</CellStyle>

</igtbl:TemplatedColumn>

<igtbl:TemplatedColumn BaseColumnName="AccessType" IsBound="True" Key="AccessType"

Width="4%">

<CellTemplate>

<asp:Label runat="server" CssClass="FAPendingRequest" ID="lblIsPublic"></asp:Label>

</CellTemplate>

<Header Caption="Pub">

<RowLayoutColumnInfo OriginX="2" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="2" />

</Footer>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Center" VerticalAlign="Middle">

</CellStyle>

</igtbl:TemplatedColumn>

<igtbl:UltraGridColumn BaseColumnName="FaName" IsBound="True" Key="FaName" Width="35%">

<HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Left" VerticalAlign="Middle">

</CellStyle>

<Header Caption="FA Name">

<RowLayoutColumnInfo OriginX="3" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="3" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="Leaders" IsBound="True" Key="Leaders" Width="13%">

<HeaderStyle HorizontalAlign="Left" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Left" VerticalAlign="Middle">

</CellStyle>

<Header Caption="Leadership">

<RowLayoutColumnInfo OriginX="4" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="4" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="InsightCount" IsBound="True" Key="InsightCount"

Width="6%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="# Insts">

<RowLayoutColumnInfo OriginX="5" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="5" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="OppCount" IsBound="True" Key="OppCount" Width="6%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="# Opty">

<RowLayoutColumnInfo OriginX="6" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="6" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="OppSum" IsBound="True" Key="OppSum" Width="8%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="$ Opty">

<RowLayoutColumnInfo OriginX="7" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="7" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="ProjCount" IsBound="True" Key="ProjCount"

Width="6%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="# Proj">

<RowLayoutColumnInfo OriginX="8" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="8" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="ProjSum" IsBound="True" Key="ProjSum" Width="8%">

<HeaderStyle HorizontalAlign="Right" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Right" VerticalAlign="Middle">

</CellStyle>

<Header Caption="$ Proj">

<RowLayoutColumnInfo OriginX="9" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="9" />

</Footer>

</igtbl:UltraGridColumn>

<igtbl:TemplatedColumn Key="Dummy" Width="5%">

<CellTemplate>

<asp:Button ID="btnGrdUnitGo" Height="100%" runat="server" CommandArgument='<%# DataBinder.Eval(Container, "DataItem.FocusAreaId") %>'

CommandName="Go" Text="Go" CssClass="btnInGrid" />

</CellTemplate>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Center" VerticalAlign="Middle">

</CellStyle>

<Header Caption="NAV">

<RowLayoutColumnInfo OriginX="10" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="10" />

</Footer>

</igtbl:TemplatedColumn>

<igtbl:UltraGridColumn BaseColumnName="FocusAreaId" Hidden="True" IsBound="True"

Key="FocusAreaId" Width="0%">

<Header Caption="FocusAreaId">

<RowLayoutColumnInfo OriginX="11" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="11" />

</Footer>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Center" VerticalAlign="Middle">

</CellStyle>

</igtbl:UltraGridColumn>

<igtbl:UltraGridColumn BaseColumnName="LongDescription" Hidden="True" IsBound="True"

Key="LongDescription" Width="0%">

<Header Caption="LongDescription">

<RowLayoutColumnInfo OriginX="12" />

</Header>

<Footer>

<RowLayoutColumnInfo OriginX="12" />

</Footer>

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<CellStyle HorizontalAlign="Center" VerticalAlign="Middle">

</CellStyle>

</igtbl:UltraGridColumn>

</Columns>

<AddNewRow View="NotSet" Visible="NotSet">

</AddNewRow>

</igtbl:UltraGridBand>

</Bands>

<DisplayLayout AllowSortingDefault="OnClient" AutoGenerateColumns="False" BorderCollapseDefault="Separate"

GridLinesDefault="Vertical" HeaderClickActionDefault="SortMulti" Name="ugUnitFocusAreas"

RowHeightDefault="18px" RowSelectorsDefault="No" ScrollBar="Always" ScrollBarView="Vertical"

SelectTypeRowDefault="Single" StationaryMargins="Header" StationaryMarginsOutlookGroupBy="false"

TableLayout="Fixed" Version="4.00" CellClickActionDefault="RowSelect">

<FrameStyle CssClass="FrameStyle" Height="100%" Width="100%" CustomRules="table-layout:fixed">

</FrameStyle>

<Pager MinimumPagesForDisplay="2">

<PagerStyle BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">

<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />

</PagerStyle>

</Pager>

<EditCellStyleDefault BorderStyle="None" BorderWidth="0px">

</EditCellStyleDefault>

<FooterStyleDefault BackColor="LightGray" BorderStyle="Solid" BorderWidth="1px">

<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />

</FooterStyleDefault>

<HeaderStyleDefault CssClass="HeaderStyleDefault">

</HeaderStyleDefault>

<RowStyleDefault CssClass="RowStyleDefault">

</RowStyleDefault>

<SelectedRowStyleDefault CssClass="SelectedRowStyleDefault">

</SelectedRowStyleDefault>

<RowAlternateStyleDefault CssClass="RowAlternateStyleDefault" >

</RowAlternateStyleDefault>

<GroupByRowStyleDefault BackColor="Control" BorderColor="Window">

</GroupByRowStyleDefault>

<GroupByBox Hidden="True">

<BoxStyle BackColor="ActiveBorder" BorderColor="Window">

</BoxStyle>

</GroupByBox>

<AddNewBox Hidden="False">

<BoxStyle BackColor="Window" BorderColor="InactiveCaption" BorderStyle="Solid" BorderWidth="1px">

<BorderDetails ColorLeft="White" ColorTop="White" WidthLeft="1px" WidthTop="1px" />

</BoxStyle>

</AddNewBox>

<ActivationObject BorderWidth="1px" BorderColor="">

<BorderDetails WidthRight="1px" ColorRight="236, 236, 236" WidthBottom="0px" WidthLeft="0px" WidthTop="0px" />

</ActivationObject>

<FilterOptionsDefault>

<FilterDropDownStyle BackColor="White" BorderColor="Silver" BorderStyle="Solid" BorderWidth="1px"

CustomRules="overflow:auto;" Font-Names="Verdana,Arial,Helvetica,sans-serif"

Font-Size="11px" Height="300px" 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>

<ClientSideEvents MouseOverHandler="MouseOver" MouseOutHandler="MouseOut" InitializeLayoutHandler="ugUnitFocusAreas_InitializeLayoutHandler" />

</DisplayLayout>

</igtbl:UltraWebGrid>

Thanks in advance.