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.
Parents
No Data
Reply
  • 395
    posted

    Hi Shrikantsp

    Does this behaviour only appear if you use the stationarymargin feature or does it also appear if you drag a new ultrawebgrid control onto a web page and then only configure the data relevant properties (DataSourceId, DataKeyField,...)?

    If it always appears, then it is possible that you don't have the newest version of the controls. This is because infragistics has made some changes after release-date (if I'm correct end of september 2007) of version 7.3 of infragistics web controls and did not change the version numbering. Then in October a corrected version was published on the download page with the same version number but with another date.

    Regards
    Adrian

Children