RadGrid with StaticHeaders rendering problem

[Lorenzo]

Hi,

I have the following RadGrid:

<telerik:RadGrid ID="m_gvwUpdate_ScenariosMarketInputData" runat="server" DataSourceID="m_gvwUpdate_ScenariosMarketInputDataDataSource" AllowPaging="false" AllowSorting="false" OnItemCommand="m_gvwUpdate_ScenariosMarketInputData_OnItemCommand">
                        <MasterTableView AutoGenerateColumns="False" DataKeyNames="ScenarioID" ClientDataKeyNames="ScenarioID"
                           TableLayout="Fixed" DataSourceID="m_gvwUpdate_ScenariosMarketInputDataDataSource">
                           <PagerStyle Mode="NextPrevAndNumeric" Visible="true" AlwaysVisible="true" />
                           <NoRecordsTemplate>
                              <div style="padding: 5px;">
                                 <asp:Label ID="m_lbl_NoData" runat="server" Text="No data on database" />
                              </div>
                           </NoRecordsTemplate>
                           <Columns>
                              <telerik:GridBoundColumn DataField="ScenarioName" HeaderText="Name" SortExpression="ScenarioName"
                                 UniqueName="ScenarioName">
                                 <ItemStyle Wrap="True" />
                              </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="StrategicPeriodName" HeaderText="Strategic Period"
                                 SortExpression="StrategicPeriodName" UniqueName="StrategicPeriodName">
                                 <ItemStyle Wrap="True" />
                              </telerik:GridBoundColumn>
                              <telerik:GridTemplateColumn UniqueName="Official" HeaderText="Official" ItemStyle-HorizontalAlign="Center">
                                 <HeaderStyle Width="50px" />
                                 <ItemTemplate>
                                    <asp:Image runat="server" ID="m_img_Official" Visible='<% #Eval("Official") %>' ImageUrl="~/Images/ok.png"
                                       AlternateText="Official" SkinID="Grid" />
                                 </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn UniqueName="IsReadOnly" HeaderText="Locked" ItemStyle-HorizontalAlign="Center">
                                 <HeaderStyle Width="50px" />
                                 <ItemTemplate>
                                    <asp:Image runat="server" ID="m_img_IsReadOnly" Visible='<% #Eval("IsReadOnly") %>'
                                       ImageUrl="~/Images/ok.png" AlternateText="Locked" SkinID="Grid" />
                                 </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridBoundColumn DataField="Created" HeaderText="Created By" UniqueName="Created"
                                 SortExpression="Created">
                                 <ItemStyle Wrap="True" />
                                 <HeaderStyle Width="120px" />
                              </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="CreationDate" HeaderText="Creation Date" UniqueName="CreationDate"
                                 SortExpression="CreationDate" DataFormatString="{0:dd-MM-yyyy &nbsp;&nbsp; HH:mm}">
                                 <ItemStyle Wrap="True" />
                                 <HeaderStyle Width="120px" />
                              </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="Modified" HeaderText="Modified By" UniqueName="Modified"
                                 SortExpression="Modified">
                                 <ItemStyle Wrap="True" />
                                 <HeaderStyle Width="120px" />
                              </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="LastModify" HeaderText="Last Modify" UniqueName="LastModify"
                                 SortExpression="LastModify" DataFormatString="{0:dd-MM-yyyy &nbsp;&nbsp; HH:mm}">
                                 <ItemStyle Wrap="True" />
                                 <HeaderStyle Width="120px" />
                              </telerik:GridBoundColumn>
                              <telerik:GridTemplateColumn UniqueName="CopyColumn" ItemStyle-HorizontalAlign="Center">
                                 <HeaderStyle Width="30px" />
                                 <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="m_img_Copy" ImageUrl="~/Images/copySmall.png"
                                       AlternateText="Copy" SkinID="Grid" ToolTip="Copy" OnClientClick='<% # "openWinCopyScenariosMarketInputData(" + (int)Eval("ScenarioID") + "); return false;" %>' />
                                 </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn UniqueName="UpdateColumn" ItemStyle-HorizontalAlign="Center">
                                 <HeaderStyle Width="30px" />
                                 <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="m_img_Update" ImageUrl="~/Images/editSmall.png"
                                       AlternateText="Update" SkinID="Grid" ToolTip="Update" OnClientClick='<% # "openWinUpdateScenariosMarketInputData(" + (int)Eval("ScenarioID") + "); return false;" %>'
                                       Visible='<% # (Zelando.SEM.BLL.ScenariosMarketInputDataManager.CanUnlockMarketScenario((int)Eval("ScenarioID")) && (bool)Eval("IsReadOnly")) || !(bool)Eval("IsReadOnly") %>' />
                                 </ItemTemplate>
                              </telerik:GridTemplateColumn>
                              <telerik:GridTemplateColumn UniqueName="DeleteColumn" ItemStyle-HorizontalAlign="Center">
                                 <HeaderStyle Width="30px" />
                                 <ItemTemplate>
                                    <asp:ImageButton runat="server" ID="m_img_Delte" ImageUrl="~/Images/deleteSmall.png"
                                       AlternateText="Delete" SkinID="Grid" ToolTip="Delete" CommandName="Delete" OnClientClick="return confirm('Are you sure you want to delete the item?');"
                                       Visible='<% # Zelando.SEM.BLL.ScenariosMarketInputDataManager.CanDeleteMarketScenario((int)Eval("ScenarioID")) && !(bool)Eval("IsReadOnly") %>' />
                                 </ItemTemplate>
                              </telerik:GridTemplateColumn>
                           </Columns>
                        </MasterTableView>
                        <ClientSettings>
                           <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100px" />
                           <Selecting AllowRowSelect="True" />
                           <KeyboardNavigationSettings EnableKeyboardShortcuts="false" />
                           <ClientEvents OnRowSelected="RowSelected" />
                        </ClientSettings>
                     </telerik:RadGrid>

and allowing UseStaticHeaders I have a big rendering problem with all browser.

What can I do?


Thanks in advance!

Francesco Balatti
zelando.com

[Princy]

Hello Lorenzo,

Check the following forum thread which explains about the do's and dont's with RadGrid using StaticHeaders.
Best Practice for Grid and Column widths

Thanks,
Princy.

[Lorenzo]

I red the article but I haven't find the solution.

Someone can help me?



Thanks  a lot!


Francesco Balatti
[e-mail]

[Pavlina]

Hi Lorenzo,

I tried to replicate the described problem, but to no avail. Please find attached my test project based on the provided code. Give it a try and see if it helps to resolve the issue or you need additional assistance.

All the best,
Pavlina
the Telerik team

[Lorenzo]

Hi!

I have tried without using MasterPage and I resolve it but now the problem is that I need to use the MasterPage file.

This is the code of my MasterPage:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
   </telerik:RadScriptManager>
   <telerik:RadFormDecorator ID="FormDecorator" runat="server" />
   <div>
      <div class="header">
         <div class="headerContent">
            <div class="headerLogo">
            </div>
            <div class="headerRepowerLogo">
            </div>
         </div>
      </div>
      <div class="headerClose">
      </div>
      <div id="m_div_Bg" runat="server">
         <div class="content">
            <div class="menu">
               <telerik:RadMenu ID="m_rmn_Menu" runat="server" Flow="Horizontal" Style="z-index: 2900" />
               <span class="logout">
                  <asp:HyperLink ID="m_lnk_Logout" runat="server" NavigateUrl="~/Logout.aspx" ToolTip="Logout" Text="Logout" />
               </span>
            </div>
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
         </div>
      </div>
      <div class="headerClose">
      </div>
      <div class="footer">
         <div class="footerContent">
            <div class="footerText">
               <asp:Label ID="m_lbl_Version" runat="server" />
               <br />
               <br />
               © 2011 – Powered by
            </div>
         </div>
      </div>
   </div>

[Lorenzo]

I solved it!

My problem is about this directive in MasterPage file:

Page.ClientTarget = "uplevel";

I canceled it and I solve the problem!



Thanks to all


Francesco Balatti
zelando.com

[Pavlina]

Hello Lorenzo,

I am glad to hear that you were able to solve the problem. Please do not hesitate to contact us if other questions or problems arise.

Greetings,
Pavlina
the Telerik team