This is a migrated thread and some comments may be shown as answers.

Horizontal Scroll w/ Frozen Columns

2 Answers 185 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 25 Jan 2013, 05:00 PM
I have read most, if not all, of the posts on this subject, but none of them correct my issue.

I have a grid with frozen columns and, when I use the horizontal scroll bar, scolling to the right does not bring all of the columns into view. If I remove the frozen columns, it works just fine.

  1. All columns have a defined width.
  2. I am using static headers.
  3. I have tried setting the width to a value rather than letting it default to 100%.

The page is defined (in part) as:

<div id="FormWrapper" style="width95%height95%margin0px auto">
	<form id="DeviceStatusForm" runat="server">
	<asp:Panel ID="Panel1" runat="server" CssClass="RaisedPanel">
		<div id="ContentDiv" class="Content">
			<div id="ReportGridDiv">
				<telerik:RadGrid ID="ReportGrid" runat="server" AllowPaging="True" AllowSorting="True"
					PagerStyle-AlwaysVisible="true" PageSize="50" GridLines="None" DataSourceID="GridDataSource"
					GroupingEnabled="False" AutoGenerateColumns="False">
					<ClientSettings EnableRowHoverStyle="true">
						<Selecting AllowRowSelect="False" />
						<ClientEvents OnRowContextMenu="ReportGrid_OnRowContextMenu" />
						<Scrolling AllowScroll="True" UseStaticHeaders="True" FrozenColumnsCount="1" ScrollHeight="20em" />
						<Resizing AllowColumnResize="True" AllowResizeToFit="True" EnableRealTimeResize="False"
						ResizeGridOnColumnResize="False" ShowRowIndicatorColumn="False" />
					</ClientSettings>
					<AlternatingItemStyle CssClass="rgCommandRow" />
					<MasterTableView DataSourceID="GridDataSource" DataKeyNames="AssetId,MacId" ClientDataKeyNames="AssetId, MacId, ReportDate, StatusId"
						TableLayout="Fixed" CommandItemDisplay="Top" PageSize="10" HorizontalAlign="NotSet">
						<CommandItemSettings ShowAddNewRecordButton="False"></CommandItemSettings>
					      <PagerStyle AlwaysVisible="True" />
					</MasterTableView>
					<PagerStyle AlwaysVisible="True" />
				</telerik:RadGrid>
			</div>
		  </div>
	</asp:Panel>
	</form>
</div>

The styles used are:
.RaisedPanel
{
	margin-top20px;
	margin-bottom30px;
	-moz-border-radius12px;
	-webkit-border-radius12px;
	border-radius12px;
	-moz-box-shadow4px 4px 14px #000;
	-webkit-box-shadow4px 4px 14px #000;
	box-shadow4px 4px 14px #000;
	padding-left2em;
	padding-bottom1em;
	padding-right2em;
	padding-top1em;
}
div.Content
{
	height100%;
	width100%;
}

I would appreciate any insights.

2 Answers, 1 is accepted

Sort by
0
David
Top achievements
Rank 1
answered on 28 Jan 2013, 07:11 PM
Ed, I feel your pain. Both of my applications that use RadGrid have about 50 columns each and using FrozenColumns destroys the user experience scrolling horizontally. For my most recent application, I created a workaround that uses 2 grids side to side. It's not perfect, but it's better than just one grid (at least in my opinion). Both grids use the same datasource but show different columns. I put all the frozen columns in the left grid and the non frozen columns in the right grid. I also enclosed both of these grids inside a RadSplitter and two RadPanes. I set the left side RadPane to a fixed width of 535px (in my case that's what my 5 frozen columns needed) and the right side RadPane uses up the rest of the browser width, this is what the user scrolls. The end result is that neither grid needs to technically have FrozenColumns enabled. Thus you don't have the scrolling difficulties. I've attached a picture so you can see the end result which I think looks great. Horizontal scrolling is now lightning fast on the right side grid.

In order to get this to work, you need to have extra script so if you scroll vertically BOTH grids scroll at the same time. Otherwise the rows in both grids will be off and it will confuse the user. To do this, I found another post and that code worked perfect. The user can now grab either scrollbar (left grid or the right grid), drag it up and down and both grids stay in sync. At the very bottom is the RadCodeBlock, that attaches the scroll bars to both grids and syncs them together. For the left grid I put the scrollbar on the left side (instead of the traditional right side of a grid), it looks nicer that way. If you don't, your left side grid has a scrollbar stuck next to the beginning of the right grid. To do this, it's just a style (direction: rtl):
html,
body,
form
{
    margin: 2px
    padding: 1px;         
    height:99%;
}
.PipelineGridLeft
{
    direction: rtl;
}
.PipelineGridLeft table
{
     direction: ltr;
}

Here is my main code, you can ignore everything inside both of the MasterTableViews as they're not relevant to getting the "side by side" grids to work.
    <telerik:RadSplitter id="RadSplitter1" runat="server" width="100%" Height="98%" Orientation="Vertical" >
            <telerik:RadPane id="RadPaneLeftGrid" runat="server" minwidth="100" width="535" Scrolling="None">
 
        <telerik:RadGrid ID="RadGridLeft_Pipeline" runat="server" DataSourceID="sqlds_PipelineData" GridLines="Both"
            EnableLinqExpressions="false" ShowFooter="True"
            CssClass="PipelineGridLeft" Height="100%"
            OnItemDataBound= "RadGridLeft_Pipeline_ItemDataBound" OnColumnCreated="RadGridLeft_Pipeline_ColumnCreated" OnItemCreated="RadGridLeft_Pipeline_ItemCreated"
            OnBiffExporting="RadGrid1_BiffExporting"
            AutoGenerateColumns="False" >
                <ExportSettings ExportOnlyData="false" FileName="PipelineGrid" OpenInNewWindow="True" IgnorePaging="true">
                    <Excel Format="Biff"></Excel>
                </ExportSettings>
 
                <ClientSettings EnableRowHoverStyle="true">                    
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    <Resizing AllowColumnResize="true" />
                    <%--<Selecting AllowRowSelect="true"></Selecting>--%>
                </ClientSettings>
 
                <SelectedItemStyle CssClass="SelectedItem"></SelectedItemStyle>
                                 
                <MasterTableView ShowGroupFooter="true"
                    DataKeyNames="requirement_id" AllowMultiColumnSorting="false" Font-Size="8pt" TableLayout="Fixed" CommandItemDisplay="Top"  >
                     
                    <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
 
                    <ItemStyle CssClass="RowShort" Wrap="false"/>
                    <AlternatingItemStyle CssClass="RowShort"  Wrap="false" />
                    <GroupHeaderItemStyle CssClass="GroupHeader" />
 
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle Width="20px" />
                    </RowIndicatorColumn>
 
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField HeaderText="Phase: " FieldName="phase_name"
                                   ></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Project_Status_Id" SortOrder="Descending"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
 
                    <ColumnGroups>
                        <telerik:GridColumnGroup HeaderText="Prob %" Name="Prob%" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>                       
                    </ColumnGroups>
 
                    <Columns>
                        <telerik:GridBoundColumn DataField="reqIdentity" HeaderText="RP ID" ReadOnly="True"
                            UniqueName="reqIdentity">
                            <HeaderStyle Width="50px" />
                            <ItemStyle Width="50px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="client_project_name" HeaderText="Account" UniqueName="client_project_name">
                            <HeaderStyle Width="200px"/>
                            <ItemStyle Width="200px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="geography_name" UniqueName="geography_name" HeaderText="Geography">
                            <HeaderStyle Width="120px"/>
                            <ItemStyle Width="120px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="AE_lastname" UniqueName="AE_lastname" HeaderText="AE">
                            <HeaderStyle Width="90px"/>
                            <ItemStyle Width="90px" Wrap="false" />
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn DataField="probability_of_closure" UniqueName="probability_of_closure" HeaderText="" ColumnGroupName="Prob%"
                            DataFormatString="{0:P0}">
                            <HeaderStyle Width="60px"/>
                            <ItemStyle Width="60px" Wrap="false"/>
                        </telerik:GridNumericColumn>                                         
                        <telerik:GridBoundColumn DataField="filter" UniqueName="filter" HeaderText="" Display="False">
                            <HeaderStyle Width="0px"/>
                            <ItemStyle Width="0px" Wrap="false"/>
                        </telerik:GridBoundColumn>
 
                    </Columns>
 
                </MasterTableView>               
 
        </telerik:RadGrid>
 
        </telerik:RadPane>
        <telerik:RadSplitBar id="RadSplitbar1" runat="server" EnableResize="false" Visible="false"></telerik:RadSplitBar>
        <telerik:RadPane id="RadPaneRight" runat="server" Scrolling="None">
 
         <telerik:RadGrid ID="RadGridRight_Pipeline" runat="server" DataSourceID="sqlds_PipelineData" GridLines="Both"
            EnableLinqExpressions="false" ShowFooter="True"
            CssClass="PipelineGridRight" Height="100%"
            OnItemDataBound= "RadGridRight_Pipeline_ItemDataBound" OnColumnCreated="RadGridRight_Pipeline_ColumnCreated" OnItemCreated="RadGridRight_Pipeline_ItemCreated"
            OnExcelExportCellFormatting="RadGridRight_ExcelExportCellFormatting" OnItemCommand="RadGridRight_Pipeline_ItemCommand"
            AutoGenerateColumns="False"  >
                <ExportSettings ExportOnlyData="true" FileName="PipelineGrid" OpenInNewWindow="True" IgnorePaging="true">
                    <Excel Format="Html"></Excel>
                </ExportSettings>
 
                <ClientSettings EnableRowHoverStyle="true">
                    <ClientEvents OnColumnCreated="ColumnCreated"  />
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                </ClientSettings>
 
                <SelectedItemStyle CssClass="SelectedItem"></SelectedItemStyle>
                 
                <MasterTableView ShowGroupFooter="true"
                    DataKeyNames="requirement_id,groupNumber" AllowMultiColumnSorting="false" Font-Size="8pt" TableLayout="Fixed" CommandItemDisplay="Top"  >
                     
                    <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false" />
 
                    <ItemStyle CssClass="RowShort" Wrap="false"/>
                    <AlternatingItemStyle CssClass="RowShort"  Wrap="false" />
 
                    <RowIndicatorColumn>
                        <HeaderStyle Width="20px"></HeaderStyle>
                        <ItemStyle Width="20px" />
                    </RowIndicatorColumn>
 
                    <GroupByExpressions>
                        <telerik:GridGroupByExpression>
                            <SelectFields>
                                <telerik:GridGroupByField HeaderText="Phase: " FieldName="phase_name" ></telerik:GridGroupByField>
                            </SelectFields>
                            <GroupByFields>
                                <telerik:GridGroupByField FieldName="Project_Status_Id" SortOrder="Descending"></telerik:GridGroupByField>
                            </GroupByFields>
                        </telerik:GridGroupByExpression>
                    </GroupByExpressions>
 
                    <ColumnGroups>
                        <telerik:GridColumnGroup HeaderText="# of people billing each month" Name="PeopleBilling" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Project Hours" Name="ProjectHours" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Project Magnitude" Name="ProjectMagnitude" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Discounted Revenue" Name="DiscountedRevenue" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Discounted Bill Rate" Name="DiscountedBillRate" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Discounted Headcount" Name="DiscountedHeadcount" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                        <telerik:GridColumnGroup HeaderText="Flat Percentage" Name="FlatPercentage" HeaderStyle-HorizontalAlign="Center">
                        </telerik:GridColumnGroup>
                    </ColumnGroups>
 
                    <Columns>
                      <%--  <telerik:GridBoundColumn DataField="requirement_id"
                            FilterControlAltText="Filter requirement_id column" HeaderText="requirement_id"
                            UniqueName="requirement_id" Display="False" ReadOnly="True">
                            <HeaderStyle Width="0px"/>
                            <ItemStyle Width="0px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn DataField="Client_Id" DecimalDigits="2"
                            FilterControlAltText="Filter Client_Id column" HeaderText="ClientId"
                            UniqueName="Client_Id" Display="False" ReadOnly="True">
                            <HeaderStyle Width="0px"/>
                            <ItemStyle Width="0px" />
                        </telerik:GridNumericColumn>
                        <telerik:GridNumericColumn DataField="Project_Id" DecimalDigits="2"
                            FilterControlAltText="Filter Project_Id column" HeaderText="PrjId"
                            UniqueName="Project_Id" Display="False" ReadOnly="True">
                            <HeaderStyle Width="0px"/>
                            <ItemStyle Width="0px" />
                        </telerik:GridNumericColumn>--%>                    
                        <telerik:GridBoundColumn DataField="client_project_name" HeaderText="Account" UniqueName="client_project_name" Display="False" >
                            <HeaderStyle Width="200px"/>
                            <ItemStyle Width="200px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="reqIdentity" HeaderText="RP ID" ReadOnly="True" Display="False"
                            UniqueName="reqIdentity">
                            <HeaderStyle Width="50px" />
                            <ItemStyle Width="50px" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="geography_name" UniqueName="geography_name" HeaderText="Geography" Display="False">
                            <HeaderStyle Width="120px"/>
                            <ItemStyle Width="120px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="AE_lastname" UniqueName="AE_lastname" HeaderText="AE" Display="False">
                            <HeaderStyle Width="90px"/>
                            <ItemStyle Width="90px" Wrap="false" />
                        </telerik:GridBoundColumn
                        <telerik:GridNumericColumn DataField="probability_of_closure" UniqueName="probability_of_closure" HeaderText="Prob %" Display="False"
                            DataFormatString="{0:P0}">
                            <HeaderStyle Width="60px"/>
                            <ItemStyle Width="60px" Wrap="false"/>
                        </telerik:GridNumericColumn>
                           
                        <telerik:GridBoundColumn DataField="location"
                            FilterControlAltText="Filter location column" HeaderText="Location"
                            UniqueName="location" AutoPostBackOnFilter="True"
                            CurrentFilterFunction="StartsWith" SortExpression="location">
                            <HeaderStyle Width="120"/>
                            <ItemStyle Width="120px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Offering"
                            HeaderText="Offering" ReadOnly="True" UniqueName="Offering">
                            <HeaderStyle Width="150"/>
                            <ItemStyle Width="150px" Wrap="false" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="division_name" UniqueName="division_name" HeaderText="Div">
                            <HeaderStyle Width="40px" />
                            <ItemStyle Width="40px" Wrap="false"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn DataField="bill_rate" UniqueName="bill_rate" HeaderText="Bill Rate"
                            DataFormatString="{0:C}">
                            <HeaderStyle Width="50px"/>
                            <ItemStyle Width="50px" Wrap="false"/>
                        </telerik:GridNumericColumn >
 
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month1" UniqueName="people_billing_month1"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreenLeftBorder" />                           
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month2" UniqueName="people_billing_month2"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month3" UniqueName="people_billing_month3"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month4" UniqueName="people_billing_month4"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month5" UniqueName="people_billing_month5"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="PeopleBilling" DataField="people_billing_month6" UniqueName="people_billing_month6"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
 
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month1" UniqueName="project_hours_month1"
                            DataFormatString="{0:F}" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreenLeftBorder" />
                        </telerik:GridNumericColumn >  
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month2" UniqueName="project_hours_month2"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >      
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month3" UniqueName="project_hours_month3"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month4" UniqueName="project_hours_month4"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month5" UniqueName="project_hours_month5"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectHours" DataField="project_hours_month6" UniqueName="project_hours_month6"
                            DataFormatString="{0:F}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >  
                         
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month1" UniqueName="undiscounted_revenue_month1"
                            DataFormatString="${0:#,0}" >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreenLeftBorder" />
                        </telerik:GridNumericColumn >  
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month2" UniqueName="undiscounted_revenue_month2"
                            DataFormatString="${0:#,0}"  >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >      
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month3" UniqueName="undiscounted_revenue_month3"
                            DataFormatString="${0:#,0}"  >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month4" UniqueName="undiscounted_revenue_month4"
                            DataFormatString="${0:#,0}"  >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month5" UniqueName="undiscounted_revenue_month5"
                            DataFormatString="${0:#,0}"  >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="ProjectMagnitude" DataField="undiscounted_revenue_month6" UniqueName="undiscounted_revenue_month6"
                            DataFormatString="${0:#,0}"  >
                            <HeaderStyle Width="65px" />
                            <ItemStyle Width="65px" Wrap="false" CssClass="ColumnGreen" />
                        </telerik:GridNumericColumn
                                  
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month1" UniqueName="discounted_revenue_month1"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false" CssClass="ColumnWhiteLeftBorder" />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >  
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month2" UniqueName="discounted_revenue_month2"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false"  />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >      
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month3" UniqueName="discounted_revenue_month3"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false"  />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month4" UniqueName="discounted_revenue_month4"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false"  />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month5" UniqueName="discounted_revenue_month5"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false"  />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedRevenue" DataField="discounted_revenue_month6" UniqueName="discounted_revenue_month6"
                            DataFormatString="${0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="80px" />
                            <ItemStyle Width="80px" Wrap="false"  />
                            <FooterStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >                               
                        <telerik:GridCalculatedColumn ColumnGroupName="DiscountedRevenue" HeaderText="6 month total" UniqueName="discounted_revenue_6monthTotal" DataType="System.Decimal"
                            DataFields="discounted_revenue_month1, discounted_revenue_month2, discounted_revenue_month3, discounted_revenue_month4, discounted_revenue_month5, discounted_revenue_month6"
                            Expression="{0}+{1}+{2}+{3}+{4}+{5}" DataFormatString="${0:#,0}"
                            Aggregate="Sum">
                                <HeaderStyle Width="100px" />
                                <ItemStyle Width="100px" Wrap="false" />
                            <FooterStyle Width="100px" Wrap="false" />
                        </telerik:GridCalculatedColumn>
                                          
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month1" UniqueName="discounted_billrate_month1"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnWhiteLeftBorder" />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >  
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month2" UniqueName="discounted_billrate_month2"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >      
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month3" UniqueName="discounted_billrate_month3"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month4" UniqueName="discounted_billrate_month4"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month5" UniqueName="discounted_billrate_month5"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedBillRate" DataField="discounted_billrate_month6" UniqueName="discounted_billrate_month6"
                            DataFormatString="{0:C}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn >                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
 
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month1" UniqueName="discounted_headcount_month1"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" CssClass="ColumnWhiteLeftBorder" />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month2" UniqueName="discounted_headcount_month2"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month3" UniqueName="discounted_headcount_month3"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month4" UniqueName="discounted_headcount_month4"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month5" UniqueName="discounted_headcount_month5"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="DiscountedHeadcount" DataField="discounted_headcount_month6" UniqueName="discounted_headcount_month6"
                            DataFormatString="{0:#,0}" Aggregate="Sum" >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" />
                            <FooterStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
 
                        <telerik:GridBoundColumn DataField="product_line" HeaderText="Product Line" UniqueName="product_line" >
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" Wrap="false" CssClass="ColumnWhiteLeftBorder"/>
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="revenue_type_desc" HeaderText="Revenue Type" UniqueName="revenue_type_desc" >
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" Wrap="false" />
                        </telerik:GridBoundColumn>
                        <telerik:GridNumericColumn DataField="FlatRevenue" UniqueName="FlatRevenue" HeaderText="Flat $"
                            DataFormatString="{0:C}">
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" Wrap="false" />
                        </telerik:GridNumericColumn >
                        <telerik:GridNumericColumn DataField="FlatPercentageOver6Months" UniqueName="FlatPercentageOver6Months" HeaderText="% of flat over these 6 months"
                            DataFormatString="{0:P2}">
                            <HeaderStyle Width="160px"/>
                            <ItemStyle Width="160px" Wrap="false" HorizontalAlign="Center"/>
                        </telerik:GridNumericColumn>
 
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month1" UniqueName="flat_percentage_month1"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month2" UniqueName="flat_percentage_month2"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month3" UniqueName="flat_percentage_month3"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month4" UniqueName="flat_percentage_month4"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month5" UniqueName="flat_percentage_month5"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false"  />
                        </telerik:GridNumericColumn
                        <telerik:GridNumericColumn ColumnGroupName="FlatPercentage" DataField="flat_percentage_month6" UniqueName="flat_percentage_month6"
                            DataFormatString="{0:P2}"  >
                            <HeaderStyle Width="55px" />
                            <ItemStyle Width="55px" Wrap="false" />
                        </telerik:GridNumericColumn
 
                        <telerik:GridBoundColumn DataField="staffing_type" HeaderText="Staffing Type" UniqueName="staffing_type" >
                            <HeaderStyle Width="80px"/>
                            <ItemStyle Width="80px" Wrap="false" CssClass="ColumnWhiteLeftBorder"/>
                        </telerik:GridBoundColumn>
 
                    </Columns>
 
                </MasterTableView>               
 
        </telerik:RadGrid>
 
        </telerik:RadPane>
    </telerik:RadSplitter>
 
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  
<script type="text/javascript">
 
    Sys.Application.add_load(attachScrollHandlers);
     
    var RadGrid1;
    var RadGrid2;
     
    function attachScrollHandlers() {
 
        RadGrid1 = $find("<%= RadGridLeft_Pipeline.ClientID %>");
        RadGrid2 = $find("<%= RadGridRight_Pipeline.ClientID %>");
        $addHandler(RadGrid1.GridDataDiv, "scroll", sync12);
        $addHandler(RadGrid2.GridDataDiv, "scroll", sync21);
    }
     
    function sync12(e) {
        RadGrid2.GridDataDiv.scrollTop = RadGrid1.GridDataDiv.scrollTop;
    }
 
    function sync21(e) {
        RadGrid1.GridDataDiv.scrollTop = RadGrid2.GridDataDiv.scrollTop;
    }
    ;
 
 
</script>
  
</telerik:RadCodeBlock>
0
Ed
Top achievements
Rank 1
answered on 28 Jan 2013, 07:37 PM
David,

Thanks for the post. You have obviously spent a good deal of time resolving this. I may give it a try.

One point: these issues do not arise when the grid is in RadWindow. Of course, there I have a rigidly-sized page.

Ed
Tags
Grid
Asked by
Ed
Top achievements
Rank 1
Answers by
David
Top achievements
Rank 1
Ed
Top achievements
Rank 1
Share this question
or