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

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

1 Answer 26 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Liam
Top achievements
Rank 1
Liam asked on 01 Aug 2014, 08:10 AM
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>

1 Answer, 1 is accepted

Sort by
0
Galin
Telerik team
answered on 06 Aug 2014, 08:51 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Liam
Top achievements
Rank 1
Answers by
Galin
Telerik team
Share this question
or