RadGrid filter input position messed up when using column groups and horizontal scroll

[Liam]

I have a telerik RadGrid which has filtering on the first few columns, These columns have fixed position so that they dont scroll horizontally when the rest of the the grid scrolls. on a number of other columns I have column groups. My problem is that when I scroll horizontally the layout of the filter inputs seems to get messed up (see attached images). Any help would be greatly appreciated.


<telerik:RadGrid ID="NaturalPerilsRatesGrid" runat="server" CssClass="RadGrid" AllowSorting="True" AllowPaging="True" AllowCustomPaging="True" 
        PageSize="25" AllowFilteringByColumn="True" OnNeedDataSource="GetNaturalPerilsRates" Width="890px"
        OnItemDataBound="NaturalPerilsRatesGridItemDataBound" ShowFooter="True">
        
        <GroupingSettings CaseSensitive="False" />
        <MasterTableView  AutoGenerateColumns="False" EditMode="PopUp" DataKeyNames="LocationId">
            
             <ColumnGroups>
                <telerik:GridColumnGroup HeaderText="EQ EML" Name="EqEml"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="WS EML" Name="WsEml"></telerik:GridColumnGroup>
                <telerik:GridColumnGroup HeaderText="FL EML" Name="FlEml"></telerik:GridColumnGroup>
    
            </ColumnGroups>

            <Columns>
                <telerik:GridEditCommandColumn UniqueName="ViewNaturalPerilsRatesLink" ButtonType="ImageButton" EditImageUrl="~/images/More_16_Hover.png"/>
                <telerik:GridBoundColumn HeaderText="Id"  DataField="LocationId" UniqueName="LocationId" ShowFilterIcon="False" FilterDelay="500" CurrentFilterFunction="EqualTo" FilterControlWidth="50px"/>
                <telerik:GridBoundColumn HeaderText="Location Name" DataField="LocationName" UniqueName="LocationName" ShowFilterIcon="False" FilterDelay="500" CurrentFilterFunction="Contains"/>
                <telerik:GridBoundColumn HeaderText="Country" FooterText="Totals" DataField="LocationCountry" UniqueName="LocationCountry" ShowFilterIcon="False" FilterDelay="500" CurrentFilterFunction="Contains" />
                <telerik:GridBoundColumn HeaderText="PD TIV" FooterText=" " DataField="InsuredValuesPdRounded" UniqueName="InsuredValuesPd" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False"/>
                <telerik:GridBoundColumn HeaderText="BI RV" FooterText=" " DataField="InsuredValuesBiRounded" UniqueName="InsuredValuesBi" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False"/> 
                <telerik:GridBoundColumn HeaderText="Total TIV" FooterText=" " DataField="InsuredValuesTotalRounded" UniqueName="InsuredValuesTotal" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False"/>
                <telerik:GridBoundColumn HeaderText="MR EQ Zone" DataField="QuakeZone" UniqueName="QuakeZone" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False"/> 
               
                <telerik:GridBoundColumn HeaderText="PD" ColumnGroupName="EqEml"  DataField="QuakeEmlPd" UniqueName="QuakeEmlPd" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                <telerik:GridBoundColumn HeaderText="BI" ColumnGroupName="EqEml"  DataField="QuakeEmlBi" UniqueName="QuakeEmlBi" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                <telerik:GridBoundColumn HeaderText="Total" ColumnGroupName="EqEml"  DataField="QuakeEmlTotal" UniqueName="QuakeEmlTotal" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                
                <telerik:GridBoundColumn HeaderText="EQ Rate" DataField="QuakeRate" UniqueName="QuakeRate" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                <telerik:GridBoundColumn HeaderText="EQ Premium" FooterText=" " DataField="QuakePremium" UniqueName="QuakePremium" FilterDelay="500" AllowFiltering="False" />                               
                <telerik:GridBoundColumn HeaderText="MR WS Zone" DataField="WindZone" UniqueName="WindZone" FilterDelay="500" AllowFiltering="False" />
                
                <telerik:GridBoundColumn HeaderText="PD" ColumnGroupName="WsEml" DataField="WindEmlPd" UniqueName="WindEmlPd" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />              
                <telerik:GridBoundColumn HeaderText="BI" ColumnGroupName="WsEml" DataField="WindEmlBi" UniqueName="WindEmlBi" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                <telerik:GridBoundColumn HeaderText="Total" ColumnGroupName="WsEml" DataField="WindEmlTotal" UniqueName="WindEmlTotal" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" /> 
                
                <telerik:GridBoundColumn HeaderText="WS Rate" DataField="WindRate" UniqueName="WindRate" DataFormatString="<nobr>{0}</nobr>" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />             
                <telerik:GridBoundColumn HeaderText="WS Premium" FooterText=" " DataField="WindPremium" DataFormatString="{0:N2}" UniqueName="WindPremium" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />            
                <telerik:GridBoundColumn HeaderText="FEMA FL Zone" DataField="FloodZone" UniqueName="FloodZone" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />            
                

                <telerik:GridBoundColumn HeaderText="FL Rate" DataField="FloodRate" UniqueName="FloodRate" DataFormatString="<nobr>{0}</nobr>" AllowFiltering="False" />   
                <telerik:GridBoundColumn HeaderText="FL Premium" FooterText=" " DataField="FloodPremium" UniqueName="FloodPremium" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />
                <telerik:GridBoundColumn HeaderText="Total Rate x Exposure" FooterText=" " DataField="TotalRateXExposure" UniqueName="TotalRateXExposure" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />                                             
                <telerik:GridBoundColumn HeaderText="AAL Allocation" FooterText=" " DataField="AalAllocation" UniqueName="AalAllocation" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />
                <telerik:GridBoundColumn HeaderText="TOTAL CAT Premium" FooterText=" " DataField="TotalCatPremium" UniqueName="TotalCatPremium" ShowFilterIcon="False" FilterDelay="500" AllowFiltering="False" />

            </Columns>

            <EditFormSettings EditFormType="Template" CaptionFormatString="Natural Perils - Rates" >
                <PopUpSettings Modal="True" Width="720px" Height="750px" ShowCaptionInEditForm="true"/>
                <FormTemplate>
                    <div style="width: 650px; padding-left: 15px;">
                        <label class="popUpLabelTitle" style="width: 600px;">Location Information</label>
                        <div>
                            <div>
                                <asp:Label ID="lblLocationName" runat="server" CssClass="standardLabel200" Text="Location name: "></asp:Label>
                                <asp:Label ID="lblLocationNameValue" runat="server" Text='<%# Bind("LocationName") %>'></asp:Label>
                            </div>

                            <div>
                                <asp:Label ID="lblLocationCountry" runat="server" CssClass="standardLabel200" Text="Country: "></asp:Label>
                                <asp:Label ID="lblLocationCountryValue" runat="server" Text='<%# Bind("LocationCountry") %>'></asp:Label>
                            </div>

                        </div>
                    </div>
                    
                    <div style="width: 650px; padding-left: 15px;">
                        <label class="popUpLabelTitle" style="width: 675px;">Insured Values</label>
                        
                            <div class="left"><div><asp:Label ID="lblInsuredPd" runat="server" CssClass="standardLabel100" Text="PD: "></asp:Label>
                                              <asp:Label ID="lblInsuredPdValue" runat="server" CssClass="autoFormat" Text='<%# Bind("InsuredValuesPd") %>'></asp:Label></div>
                                                </div>
                            <div class="middle"><div><asp:Label ID="lblInsuredBi" runat="server" CssClass="standardLabel100" Text="BI: "></asp:Label>
                                                <asp:Label ID="lblInsuredBiValue" runat="server" CssClass="autoFormat" Text='<%# Bind("InsuredValuesBi") %>'></asp:Label></div>
                                                </div>
                            <div class="right"><div><asp:Label ID="lblTotalInsured" runat="server" CssClass="standardLabel100" Text="Total: "></asp:Label>
                                               <asp:Label ID="lblTotalInsuredValue" runat="server" CssClass="autoFormat" Text='<%# Bind("InsuredValuesTotal") %>'></asp:Label></div>
                                                </div>
                    </div>
                    <div style="width: 650px; padding-left: 15px;">
                        <label class="popUpLabelTitle" style="width: 675px;">Cat Zones</label>
                        
                            <div class="left"><asp:Label ID="lblCatZoneQuake" runat="server" CssClass="standardLabel100" Text="Quake "></asp:Label>
                                              <asp:Label ID="lblCatZoneQuakeValue" runat="server" CssClass="quakeFormatter" Text='<%# Bind("QuakeZone") %>'></asp:Label></div>

                            <div class="middle"><asp:Label ID="lblCatZoneWind" runat="server" CssClass="standardLabel100" Text="Wind "></asp:Label>
                                                <asp:Label ID="lblCatZoneWindValue" runat="server" CssClass="autoFormat" Text='<%# Bind("WindZone") %>'></asp:Label></div>
                            
                            <div class="right"><asp:Label ID="lblCatZoneFlood" runat="server" CssClass="standardLabel100" Text="Flood "></asp:Label>
                                               <asp:Label ID="lblCatZoneFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("FloodZone") %>'></asp:Label></div>

                        
                    </div>
                    
                    <div style="width: 650px; padding-left: 15px;">
                        <label class="popUpLabelTitle" style="width: 675px;">Total Base Rates (GU)</label>
                       
                            <div class="left"><asp:Label ID="lblTotalBaseRatesQuake" runat="server" CssClass="standardLabel100" Text="Quake "></asp:Label>
                                              <asp:Label ID="lblTotalBaseRatesQuakeValue" runat="server" CssClass="autoFormat" Text='<%# Bind("QuakeRate") %>'></asp:Label></div>

                            <div class="middle"><asp:Label ID="lblTotalBaseRatesWind" runat="server" CssClass="standardLabel100" Text="Wind "></asp:Label>
                                                <asp:Label ID="lblTotalBaseRatesWindValue" runat="server" CssClass="autoFormat" Text='<%# Bind("WindRate") %>'></asp:Label></div>
                            
                            <div class="right"><asp:Label ID="lblTotalBaseRatesFlood" runat="server" CssClass="standardLabel100" Text="Flood "></asp:Label>
                                               <asp:Label ID="lblTotalBaseRatesFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("FloodRate") %>'></asp:Label></div>

                       
                    </div>
                    
                    <fieldset style="width: 650px; padding-left: 10px; padding-right: 10px; padding-top: 20px;">
                        <legend style="width: 210px;">Model Modifiers</legend>
                        <div class="natPerilsRow">
                            <div class="natPerilsGrouping"><asp:Label ID="lblDeductibles" runat="server" Text="Deductibles"/></div>                  
                        </div>
                        <div>
                            <div class="left"><asp:Label ID="lblDeductiblesQuake" runat="server" CssClass="standardLabel100" Text="Quake"/>
                                              <asp:Label ID="lblDeductiblesQuakeValue" runat="server" CssClass="autoFormat" Text='<%# Bind("DeductiblesQuakeValue") %>'/></div>    
                            
                            <div class="middle"><asp:Label ID="lblDeductiblesWind" runat="server" CssClass="standardLabel100" Text="Wind"></asp:Label>
                                                <asp:Label runat="server" ID="lblDeductiblesWindValue" CssClass="autoFormat" Text='<%# Bind("DeductiblesWindValue") %>'></asp:Label></div> 
                            
                            <div class="right"><asp:Label ID="lblDeductiblesFlood" runat="server" CssClass="standardLabel100" Text="Flood"/>
                                               <asp:Label ID="lblDeductiblesFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("DeductiblesFloodValue") %>'/></div>
                        </div>

                        <div class="natPerilsRow">
                            <div class="natPerilsGrouping"><asp:Label ID="lblIndemnityPeriod" runat="server" Text="Indemnity Period"/></div>
                        </div>              
                        <div>
                            <div class="left"><asp:Label ID="lblIndemnityQuake" runat="server" CssClass="standardLabel100" Text="Quake"/>
                                              <asp:Label ID="lblIndemnityQuakeValue" runat="server" CssClass="autoFormat" Text='<%# Bind("IndemnityQuakeValue") %>'/></div>    
                            
                            <div class="middle"><asp:Label ID="lblIndemnityWind" runat="server" CssClass="standardLabel100" Text="Wind"></asp:Label>  
                                                <asp:Label runat="server" ID="lblIndemnityWindValue" CssClass="autoFormat" Text='<%# Bind("IndemnityWindValue") %>'></asp:Label></div> 
                            
                            <div class="right"><asp:Label ID="lblIndemnityFlood" runat="server" CssClass="standardLabel100" Text="Flood"/>
                                               <asp:Label ID="lblIndemnityFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("IndemnityFloodValue") %>'/></div>
                        </div>
                            
                        <div class="natPerilsRow">
                            <div class="natPerilsGrouping"><asp:Label ID="lblSubLimits" runat="server" Text="Sub-Limits"/></div>
                        </div>              
                        <div>
                            <div class="left"><asp:Label ID="lblSubLimitsQuake" runat="server" CssClass="standardLabel100" Text="Quake"/>
                                              <asp:Label ID="lblSubLimitsQuakeValue" runat="server" CssClass="autoFormat" Text='<%# Bind("SubLimitsQuakeValue") %>'/></div>    
                            
                            <div class="middle"><asp:Label ID="lblSubLimitsWind" runat="server" CssClass="standardLabel100" Text="Wind"></asp:Label>
                                                <asp:Label runat="server" ID="lblSubLimitsWindValue" CssClass="autoFormat" Text='<%# Bind("SubLimitsWindValue") %>'></asp:Label></div> 
                            
                            <div class="right"><asp:Label ID="lblSubLimitsFlood" runat="server" CssClass="standardLabel100" Text="Flood"/>
                                               <asp:Label ID="lblSubLimitsFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("SubLimitsFloodValue") %>'/></div>
                        </div>

                    </fieldset>
                    
                    <div style="width: 650px; padding-left: 15px;">
                        <label class="popUpLabelTitle" style="width: 675px;">Rate on Exposure</label>
                        <div>
                            
                            <div class="left">
                                <asp:Label ID="lblExposureRateQuake" runat="server" CssClass="standardLabel100" Text="Quake"></asp:Label>
                                <asp:Label ID="lblExposureRateQuakeValue" runat="server" CssClass="autoFormat" Text='<%# Bind("ExposureRateQuakeValue") %>'></asp:Label>
                            </div>
                            
                            <div class="middle">
                                <asp:Label ID="lblExposureRateWind" runat="server" CssClass="standardLabel100" Text="Wind"></asp:Label>
                                <asp:Label ID="lblExposureRateWindValue" runat="server" CssClass="autoFormat" Text='<%# Bind("ExposureRateWindValue") %>'></asp:Label> 
                            </div>
                            
                            <div class="right">
                                <asp:Label ID="lblExposureRateFlood" runat="server" CssClass="standardLabel100" Text="Flood"></asp:Label>
                                <asp:Label ID="lblExposureRateFloodValue" runat="server" CssClass="autoFormat" Text='<%# Bind("ExposureRateFloodValue") %>'></asp:Label>
                            </div>

                        </div>
                    </div>

                    <fieldset style="width: 320px; padding-left: 10px; padding-right: 10px; padding-top: 20px;">
                        <legend style="width: 210px;">Premium</legend>
                        <div>
                            <div>
                                <asp:Label ID="lblQuakePremium" runat="server" CssClass="standardLabel100" Text="Quake: "></asp:Label>
                                <asp:Label ID="lblQuakePremiumValue" runat="server" CssClass="autoFormat" Text='<%# Bind("QuakePremium") %>'></asp:Label>
                            </div>

                            <div>
                                <asp:Label ID="lblWindPremium" runat="server" CssClass="standardLabel100" Text="Wind: "></asp:Label>
                                <asp:Label ID="lblWindPremiumValue" runat="server" CssClass="autoFormat" Text='<%# Bind("WindPremium") %>'></asp:Label>
                            </div>
                            
                            <div>
                                <asp:Label ID="lblFloodPremium" runat="server" CssClass="standardLabel100" Text="Flood: "></asp:Label>
                                <asp:Label ID="lblFloodPremiumValue" runat="server" CssClass="autoFormat" Text='<%# Bind("FloodPremium") %>'></asp:Label>
                            </div>

                            <div>
                                <asp:Label ID="lblTotalPremium" runat="server" CssClass="standardLabel100" Text="Total: "></asp:Label>
                                <asp:Label ID="lblTotalPremiumValue" runat="server" CssClass="autoFormat" Text='<%# Bind("TotalCatPremium") %>'></asp:Label>
                            </div>
                        </div>
                    </fieldset>
                </FormTemplate>
            </EditFormSettings>
        </MasterTableView>   

         <PagerStyle AlwaysVisible="True" Mode="NextPrevAndNumeric"></PagerStyle>

    <FilterMenu OnClientShown="MenuShowing" />
   
    <ClientSettings>
        <ClientEvents OnFilterMenuShowing="filterMenuShowing" OnGridCreated="GridCreated" OnRowDblClick="RowDblClick" OnPopUpShowing="PopUpShowing">
            
        </ClientEvents>
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" FrozenColumnsCount="4" />
    </ClientSettings>

    </telerik:RadGrid>

[Galin]

Hi Liam,

I am afraid currently the frozen-column feature is not supported together with multicolumn headers. However our developer are working on this limitation and it will be improved as soon as possible.

Thank you for the cooperation.

Regards,
Galin
Telerik