[Solved] Remove scroll header/column

[Kjell]

When i sort a column in IE 11 i get a extra column in the header. How do i remove that?

[Pavlina]

Hello Kjell,

Did you manage to reproduce the described problem in any of our demos? If not please share your code with us, so we can test it locally and advice you further.

Regards,
Pavlina
Telerik

[Kjell]

<telerik:RadGrid ID="RadGrid1" runat="server"
  AllowSorting="True"
  AllowPaging="True"
  AllowFilteringByColumn="False"
  AutoGenerateColumns="False"
  BackColor="White"
  CellSpacing="0"
  Culture="sv"
  OnItemDataBound="RadGrid1_ItemDataBound"
  OnItemCreated="RadGrid1_ItemCreated"
  GridLines="None"
  PageSize="20"
  ShowStatusBar="True"
  Width="900">
  <MasterTableView TableLayout="Fixed" EditMode="InPlace" HeaderStyle-Wrap="false" CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnFirstPage">
    <EditFormSettings FormStyle-BackColor="#ebebeb" EditColumn-ButtonType="ImageButton" EditColumn-UpdateImageUrl="../images/rtGrid/update.gif" EditColumn-CancelImageUrl="../images/rtGrid/cancel.gif" EditColumn-InsertImageUrl="../images/rtGrid/update.gif" />
    <PagerStyle Mode="NextPrevAndNumeric" PagerTextFormat="{4} Sida {0} av {1} ({5} användare)" />
    <Columns>
      <telerik:GridBoundColumn DataField="id" EditFormHeaderTextFormat="" Display="false" />
      <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" InsertImageUrl="../images/rtGrid/spara.gif" EditImageUrl="../images/rtGrid/andra.gif" UpdateImageUrl="../images/rtGrid/spara.gif" CancelImageUrl="../images/rtGrid/avbryt.gif" HeaderStyle-Width="60px" />
      <telerik:GridBoundColumn DataField="namn" HeaderText="Namn" ItemStyle-Wrap="false"  />
      <telerik:GridBoundColumn DataField="anvandare" HeaderText="Användarnamn" HeaderStyle-Width="110px" />
      <telerik:GridBoundColumn DataField="psw" HeaderText="Lösenord" HeaderStyle-Width="80px" />
      <telerik:GridCheckBoxColumn DataField="admin" DataType="System.Boolean" HeaderText="Administratör" HeaderStyle-Width="100px" ItemStyle-HorizontalAlign="center" />
      <telerik:GridCheckBoxColumn DataField="writer" DataType="System.Boolean" HeaderText="Skribent" HeaderStyle-Width="74px" ItemStyle-HorizontalAlign="center" />
      <telerik:GridTemplateColumn DataField="access" DataType="System.Boolean" SortExpression="access" UniqueName="access" HeaderText="Åtkomst" HeaderButtonType="TextButton" HeaderStyle-Width="74px" ItemStyle-HorizontalAlign="center">
          <ItemTemplate>
               <asp:HiddenField ID="hfAccess" Value='<%# DataBinder.Eval(Container.DataItem, "id")%>' runat="server" />
               <asp:HiddenField ID="hfAnvandare" Value='<%# DataBinder.Eval(Container.DataItem, "anvandare")%>' runat="server" />
               <asp:CheckBox ID="cbAccess" AutoPostBack="true" OnCheckedChanged="Access_CheckedChanged" Checked='<%# IIF(Convert.tostring(Eval("access"))="",false, Eval("access")) %>' runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridTemplateColumn DataField="fs" SortExpression="fs" UniqueName="fs" HeaderText="FS" HeaderButtonType="TextButton" HeaderStyle-Width="60px" ItemStyle-HorizontalAlign="center">
          <ItemTemplate>
               <asp:HiddenField ID="hfFs" Value='<%# DataBinder.Eval(Container.DataItem, "id")%>' runat="server" />
               <asp:HiddenField ID="hfFsAnvandare" Value='<%# DataBinder.Eval(Container.DataItem, "anvandare")%>' runat="server" />
               <asp:CheckBox ID="cbFs" AutoPostBack="true" OnCheckedChanged="Fs_CheckedChanged" Checked='<%# IIf(Convert.ToString(Eval("fs")) = "", False, Eval("fs"))%>' runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridTemplateColumn DataField="skvaller" SortExpression="skvaller" UniqueName="skvaller" HeaderText="Skvaller" HeaderButtonType="TextButton" HeaderStyle-Width="80px" ItemStyle-HorizontalAlign="center">
          <ItemTemplate>
               <asp:HiddenField ID="hfSkvaller" Value='<%# DataBinder.Eval(Container.DataItem, "id")%>' runat="server" />
               <asp:HiddenField ID="hfSkvallerAnvandare" Value='<%# DataBinder.Eval(Container.DataItem, "anvandare")%>' runat="server" />
               <asp:CheckBox ID="cbSkvaller" AutoPostBack="true" OnCheckedChanged="Skvaller_CheckedChanged" Checked='<%# IIf(Convert.ToString(Eval("skvaller")) = "", False, Eval("skvaller"))%>' runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridTemplateColumn DataField="kapten" SortExpression="kapten" UniqueName="kapten" HeaderText="Kapten" HeaderButtonType="TextButton" HeaderStyle-Width="70px" ItemStyle-HorizontalAlign="center">
          <ItemTemplate>
               <asp:HiddenField ID="hfKapten" Value='<%# DataBinder.Eval(Container.DataItem, "id")%>' runat="server" />
               <asp:HiddenField ID="hfKaptenAnvandare" Value='<%# DataBinder.Eval(Container.DataItem, "anvandare")%>' runat="server" />
               <asp:CheckBox ID="cbKapten" AutoPostBack="true" OnCheckedChanged="Kapten_CheckedChanged" Checked='<%# IIF(Convert.tostring(Eval("kapten"))="",false, Eval("kapten")) %>' runat="server" />
          </ItemTemplate>
      </telerik:GridTemplateColumn>
      <telerik:GridButtonColumn ButtonType="ImageButton" UniqueName="DeleteColumn" ConfirmText="Radera denna användare?" ConfirmDialogType="RadWindow" HeaderStyle-Width="34px" ConfirmTitle="Delete" CommandName="Delete" />
      </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="True">
        <ClientEvents OnRowDblClick="RowDblClick"  />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="560px" />
    </ClientSettings>
  </telerik:RadGrid>

[Kjell]

Have you found a solution for this problem?

Seeing that there are more posts on that column and hedader missmatch...

http://www.telerik.com/community/forums/aspnet-ajax/grid/issue-with-header-and-item-column-alignment-while-scrolling.aspx

http://www.telerik.com/community/forums/aspnet-ajax/grid/version-2013-3-1015-45-bugg-allowscroll-true.aspx



And other posts......

[Pavlina]

Hello Kjell,

Indeed the misalignment problem mentioned in these forums persists in Q3 2013 version of the controls, however we managed to fixed it for the SP1 release. Can you please confirm that you managed to replicate this problem with the latest official version Telerik controls for ASP.NET AJAX.

Moreover, I took the provided code in order to replicate the problem with the extra column which appears after sort, but to no avail. I have attached my test project for your reference.

Regards,
Pavlina
Telerik

[Kjell]

I have found the bug / error
The problem occurs if I open the page / grid in a frameset.
Try your application "scroll.zip" here an open the page in a framset and sort a column....

[Pavlina]

Hello Kjell,

Thank you for the provided URL. We managed to observe the described problem and in order to fix it you can try to repaint() the grid on pageLoad and see if this will resolve the problem.

Meanwhile our developers will investigate the problem and once we come up with results we will get back to you with additional information / solution. I also updated your Telerik point for bringing this issue to our attention.
 
Regards,
Pavlina
Telerik

[Kjell]

I have already tried repaint(), and unfortunately there was no difference.  repaint() did not solve the problem ....

[Pavlina]

Hi Kjell,

You can try invoking the repaint() method with a small timeout and see if it helps. In case it not works on pageLoad you can try to repaint the grid inside OnGridCreated client side event as shown below:

<ClientSettings>
    <Scrolling AllowScroll="True" UseStaticHeaders="true" />
    <ClientEvents OnGridCreated="GridCreated" />
</ClientSettings>

function GridCreated(sender, args) {
    setTimeout(function () {
        sender.repaint();
    }, 15); //you can play with the timeout value if it does not work with a small one
}

Copy Code

Regards,
Pavlina
Telerik