Grid Jumps or Scrolls to Top on Row Click

26 posts, 0 answers
  1. Brent Hetland
    Brent Hetland avatar
    61 posts
    Member since:
    Aug 2009

    Posted 21 Nov 2012 Link to this post

    Hi,

    I just upgraded to version 2012.3.1016.35 of the ASP.NET for AJAX controls, and the problem I'm facing was caused by the upgrade (I upgraded from version  2011.3.1305.35),

    I use RadGrids with a GridClientSelectColumn and the following client settings:

                <ClientSettings AllowDragToGroup="false" AllowRowsDragDrop="false">
                    <Selecting AllowRowSelect="true" />
                </ClientSettings>

    PROBLEM:
    When the browser window has a scrollbar (content is extending beyond the bottom of the window) and when a grid extends down into the scrollable area (it extends beyond the bottom of the screen), when I click on a row in the grid, the browser window is scrolled up and the row in the grid is NOT selected.  In other words, the first click in a row in the grid, acts like a bookmark and "jumps" the page so that the grid is moved up higher...

    When I click the row again (or even a different row), the row is then selected as expected.

    However, if I then scroll the browser window back to the top (so that the grid again moves down) and click a row again, I get the same behavior.  The row isn't selected, and instead the grid is scrolled / jumped up.

    QUESTION:  What has changed, and what can I do to resolve this?

    Another big problem this causes is that I actually have a column in the grid that I use for navigation (clicking the name of an item navigates the user to other pages).  With this bad behavior, the first click on my link simply moves the grid up and the user has to click the link again in order to navigate...

    MORE INFO:
    - This is happening to ALL of my RadGrids that have AllowRowSelect=true and have a GridClientSelectColumn.
    - If I set AllowRowSelect=false and remove the GridClientSelectColumn, the problem doesn't occur.
    - This NEVER happened until I upgraded to the most recent version (we've used ASP.NET for AJAX for 4+ years).  I still have the 2011.3.1305.35 version in our production environment, and the problem does NOT occur.
    - It happens on all browsers

    - I actually also use the setting below, but it doesn't change the behavior.  In fact, the first time you click a row, the CancelNonInputSelect function isn't even called!  I know that, because I put a debugger statement in it.  When I click the row the second time, it is then called.

                      <ClientEvents OnRowSelecting="CancelNonInputSelect" OnRowDeselecting="CancelNonInputSelect" />

    Where my CancelNonInputSelect function is:

    function CancelNonInputSelect(sender, args) {
    var e = args.get_domEvent();
    //IE - srcElement, Others - target   
    var targetElement = e.srcElement || e.target;
    //this condition is needed if multi row selection is enabled for the grid   
    if (typeof (targetElement) != "undefined") {
    //is the clicked element an input checkbox? <input type="checkbox"...>   
    if (targetElement.tagName.toLowerCase() != "input" &&
                                (!targetElement.type || targetElement.type.toLowerCase() != "checkbox"))// && currentClickEvent)   
    {
    //cancel the event   
    args.set_cancel(true);
    }
    }
    else
    args.set_cancel(true);
    return false;
    }

    PLEASE HELP!  This functionality alone, would prevent us from upgrading to your most recent version.
    Brent
  2. Brent Hetland
    Brent Hetland avatar
    61 posts
    Member since:
    Aug 2009

    Posted 21 Nov 2012 Link to this post

    I've solved this.

    Adding the following to the <ClientSettings> <Selecting> section fixed this:

        UseClientSelectColumnOnly="true"

    The browser window no longer jumps / scrolls when a grid row is clicked.
  3. Lohith
    Lohith avatar
    7 posts
    Member since:
    Oct 2012

    Posted 14 Dec 2012 Link to this post

    Hi,

    Thanks a lot for the post here.  I too faced the same issue when we are trying to migrate to new telerik controls and was able to rectify the behavior where in it let me click on the button in the grid even after scrolling.  But I lost the functionality where in I could choose multiple rows by Click Drag and Release mechanism

    FYI:  I have also set the property  EnableDragToSelectRows="true"
    But the multiselect functionality stops working as soon as I set the property UseClientSelectColumnOnly="true"

    I need both the functionility in my grid.
    1. I need to be able to click button in the grid to navigate to other webpage.
    2. I also need to be able to multiselect rows(Click Drag and Release).
    I have tried all combination unable to get it to work, not sure what I am doing wrong.

    IE version: 8.0
    Telerik version: 2012.3.1016.40

    Please also be informed we have initiated the procurement of new version of telerik and we are using trial version to start off with migration and hence we would really appreciate if you could help though the 30 day trail period is over.
    Thanks in advance.

    Regards,
    Lohitha
  4. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 18 Dec 2012 Link to this post

    Hi Lohith,

    We are aware of the issue and have already provided a fix for it which is included in our latest Service Pack release. In order to resolve your issue you could download or latest Service Pack.

    Regards,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  5. kurt place
    kurt place avatar
    9 posts
    Member since:
    Aug 2012

    Posted 14 Feb 2013 Link to this post

    Can you tell me if this was updated with the last release?  I don't see a note about it in the release notes.
  6. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 19 Feb 2013 Link to this post

    Hi Kurt,

    The issue is fixed and is available in the latest release.

    Greetings,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  7. Jagdish
    Jagdish avatar
    1 posts
    Member since:
    May 2013

    Posted 12 May 2013 Link to this post

    <telerik:RadGrid ID="GroupContactGrid" runat="server" AllowFilteringByColumn="False"
                                                AllowMultiRowSelection="true" Skin="MyCustomSkin" EnableEmbeddedSkins="False"
                                                BackColor="White" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
                                                GridLines="None" DataSourceID="SqlDataSource1" PageSize="20" ShowStatusBar="false"
                                                AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                                                Width="99.7%" HorizontalAlign="Center" OnItemCreated="GroupContactGrid_ItemCreated"
                                                OnItemCommand="GroupContactGrid_ItemCommand" OnDeleteCommand="GroupContactGrid_DeleteCommand"
                                                OnLoad="GroupContactGrid_Load">
                                                <HeaderContextMenu EnableEmbeddedSkins="False">
                                                </HeaderContextMenu>
                                                <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" PrevPageToolTip="Previous"
                                                    NextPagesToolTip="Next" />
                                                <MasterTableView CommandItemDisplay="Top" InsertItemPageIndexAction="ShowItemOnFirstPage"
                                                    DataSourceID="SqlDataSource1" DataKeyNames="intRefGroupID,GroupName" Width="100%"
                                                    ItemStyle-HorizontalAlign="Left" AlternatingItemStyle-HorizontalAlign="Left"
                                                    HierarchyLoadMode="Client" EditMode="EditForms" ShowHeader="true" HierarchyDefaultExpanded="false"
                                                    Name="Group">
                                                    <DetailTables>
                                                        <telerik:GridTableView AutoGenerateColumns="false" DataKeyNames="intRefGroupID,intContactID"
                                                            DataSourceID="SqlDataSource2" Width="100%" HierarchyLoadMode="Client" Name="Contact"
                                                            CommandItemDisplay="Top">
                                                            <ParentTableRelation>
                                                                <telerik:GridRelationFields DetailKeyField="intRefGroupID" MasterKeyField="intRefGroupID" />
                                                            </ParentTableRelation>
                                                            <Columns>
                                                                <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn">
                                                                    <HeaderStyle Width="40px" />
                                                                </telerik:GridClientSelectColumn>
                                                                <telerik:GridBoundColumn UniqueName="ContactName" HeaderText="Contact Name" DataField="ContactName"
                                                                    SortExpression="ContactName">
                                                                </telerik:GridBoundColumn>
                                                            </Columns>
                                                            <CommandItemTemplate>
                                                                <div style="padding: 5px 5px;">
                                                                    <span style="float: left;"><span id="spanAdd" runat="server" style="margin-left: 5px;
                                                                        margin-top: 5px; margin-bottom: 5px; margin-right: 10px;">
                                                                        <asp:LinkButton ID="btnInitInsert" runat="server" CommandName="InitInsert" CausesValidation="false">
                                                                            <img id="imgAdd" runat="server" style="border: 0px; vertical-align: top;" alt=""
                                                                                src="~/images/telerik/AddRecord.png" />
                                                                            Add contact</asp:LinkButton>
                                                                    </span><span id="spanDelete" runat="server" style="margin-left: 5px; margin-top: 5px;
                                                                        margin-bottom: 5px; margin-right: 10px;">
                                                                        <asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" OnClientClick="return ContactDelete();"
                                                                            CausesValidation="false">
                                                                            <img id="imgDelete" runat="server" style="border: 0px; vertical-align: top;" alt=""
                                                                                src="~/images/telerik/Delete.png" />
                                                                            Delete contact</asp:LinkButton>
                                                                    </span></span>
                                                                </div>
                                                            </CommandItemTemplate>
                                                        </telerik:GridTableView>
                                                    </DetailTables>
                                                    <FilterItemStyle HorizontalAlign="Left" />
                                                    <ExpandCollapseColumn Visible="True">
                                                    </ExpandCollapseColumn>
                                                    <Columns>
                                                        <telerik:GridClientSelectColumn UniqueName="CheckboxSelectColumn">
                                                            <HeaderStyle Width="40px" />
                                                            <ItemStyle Width="40px" />
                                                        </telerik:GridClientSelectColumn>
                                                        <telerik:GridEditCommandColumn EditImageUrl="~/images/telerik/Edit.gif" ButtonType="ImageButton"
                                                            UniqueName="EditCommandColumn">
                                                            <HeaderStyle Width="40px" />
                                                            <ItemStyle Width="40px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridEditCommandColumn>
                                                        <telerik:GridImageColumn ImageUrl="~/images/telerik/meetings.gif" UniqueName="listGroup"
                                                            HeaderText="Module Permission" AlternateText="Module Permission">
                                                            <HeaderStyle Width="90px" />
                                                            <ItemStyle Width="90px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridImageColumn>
                                                        <telerik:GridImageColumn ImageUrl="~/images/telerik/meetings.gif" UniqueName="listField"
                                                            HeaderText="Field Permission" AlternateText="Field Permission">
                                                            <HeaderStyle Width="90px" />
                                                            <ItemStyle Width="90px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridImageColumn>
                                                        <telerik:GridImageColumn ImageUrl="~/images/telerik/meetings.gif" UniqueName="listRow"
                                                            HeaderText="Row Permission" AlternateText="Row Permission">
                                                            <HeaderStyle Width="90px" />
                                                            <ItemStyle Width="90px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridImageColumn>
                                                        <telerik:GridImageColumn ImageUrl="~/images/telerik/meetings.gif" UniqueName="SpecialPermField"
                                                            HeaderText="Special Permission" AlternateText="Special Permission">
                                                            <HeaderStyle Width="90px" />
                                                            <ItemStyle Width="90px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridImageColumn>
                                                        <telerik:GridBoundColumn DataField="GroupName" HeaderText="Group Name" SortExpression="GroupName"
                                                            UniqueName="GroupName">
                                                        </telerik:GridBoundColumn>
                                                        <telerik:GridImageColumn ImageUrl="~/images/telerik/Copy.png" UniqueName="copyPerm"
                                                            HeaderText="Copy Permission" AlternateText="Copy Permission">
                                                            <HeaderStyle Width="90px" />
                                                            <ItemStyle Width="90px" />
                                                            <ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />
                                                        </telerik:GridImageColumn>
                                                    </Columns>
                                                    <ItemStyle HorizontalAlign="Left"></ItemStyle>
                                                    <AlternatingItemStyle HorizontalAlign="Left"></AlternatingItemStyle>
                                                    <EditFormSettings EditFormType="Template" ColumnNumber="3">
                                                        <FormTemplate>
                                                            <table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none"
                                                                style="border-collapse: collapse; background: white;">
                                                                <tr>
                                                                    <td style="width: 100px;">
                                                                        Group Name:
                                                                    </td>
                                                                    <td>
                                                                        <telerik:RadTextBox ID="txtGroupName" Text='<%# Bind( "GroupName") %>' runat="server"
                                                                            Width="270px">
                                                                        </telerik:RadTextBox>
                                                                        <asp:RequiredFieldValidator ID="rfvGroupName" runat="server" ControlToValidate="txtGroupName"
                                                                            ErrorMessage="*" Display="Dynamic" CssClass="errorFont"></asp:RequiredFieldValidator>
                                                                        <asp:RegularExpressionValidator ID="revGroupName" runat="server" ControlToValidate="txtGroupName"
                                                                            ValidationExpression="^[0-9a-zA-Z' ']+$" ErrorMessage="Special characters are not allowed. Enter only numbers and alphabets"></asp:RegularExpressionValidator>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td colspan="3" align="left">
                                                                        <asp:ImageButton ImageUrl="~/images/tick.gif" ID="btnInsert" CausesValidation="true"
                                                                            runat="server" CommandName='<%# (Container as GridItem).OwnerTableView.IsItemInserted ? "PerformInsert" : "Update" %>'>
                                                                        </asp:ImageButton
                                                                        <asp:ImageButton ID="btnCancel" ImageUrl="~/images/cancel.gif" runat="server" CausesValidation="False"
                                                                            CommandName="Cancel"></asp:ImageButton>
                                                                    </td>
                                                                </tr>
                                                            </table>
                                                        </FormTemplate>
                                                    </EditFormSettings>
                                                    <CommandItemTemplate>
                                                        <div style="padding: 5px 5px;">
                                                            <span style="float: left;"><span id="spanAdd" runat="server" style="margin-left: 5px;
                                                                margin-top: 5px; margin-bottom: 5px; margin-right: 10px;">
                                                                <asp:LinkButton ID="btnInitInsert" runat="server" CommandName="InitInsert" ToolTip="Add Group"
                                                                    CausesValidation="false">
                                                                    <img id="imgAdd" runat="server" style="border: 0px; vertical-align: top;" alt="Add group"
                                                                        src="~/images/telerik/AddRecord.png" />
                                                                    Add group</asp:LinkButton>
                                                            </span><span id="spanDelete" runat="server" style="margin-left: 5px; margin-top: 5px;
                                                                margin-bottom: 5px; margin-right: 10px;">
                                                                <asp:LinkButton ID="btnDelete" runat="server" CommandName="Delete" OnClientClick="return GroupDelete();"
                                                                    CausesValidation="false">
                                                                    <img id="imgDelete" runat="server" style="border: 0px; vertical-align: top;" alt="Delete group"
                                                                        src="~/images/telerik/Delete.png" />
                                                                    Delete group</asp:LinkButton>
                                                            </span></span><span><span style="margin-left: 5px; margin-top: 5px; margin-bottom: 5px;
                                                                margin-right: 10px;">
                                                                <asp:LinkButton ID="btnRefresh" runat="server" CommandName="RebindGrid">
                                                                    <img id="imgRefresh" runat="server" style="border: 0px; vertical-align: top;" alt=""
                                                                        src="~/images/telerik/Refresh.png" />
                                                                    Refresh</asp:LinkButton>
                                                            </span></span>
                                                        </div>
                                                    </CommandItemTemplate>
                                                </MasterTableView>
                                                <ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" ReorderColumnsOnClient="True"
                                                    EnableRowHoverStyle="true">
                                                    <Selecting AllowRowSelect="True" />
                                                </ClientSettings>
                                                <FilterMenu EnableEmbeddedSkins="False">
                                                </FilterMenu>
                                  
            
    </telerik:RadGrid>

    I used above for display multiple permission records. Now everything is working fine but when I change my paging (10 default) to 50 problem arise. Problem is I scroll grid and select last checkbox so checkbox has been clicked but grid scroll up automatically at first row. Yes checkbox selected but client getting confuse and shouting me please help me as soon as you can. Need urgent,

    I am using below version of telerik dll
    Telerik.Web.Design - 2012.3.1016.35
    Telerik.Web.UI - 2012.3.1016.35
    Telerik.Web.UI.Skins - 2012.3.1016.35

    Hope it will give you batter understanding. Let me know if any more require.

    Regards,
    Jagdish
  8. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 15 May 2013 Link to this post

    Hi Jagdish,

    In order to resolve your issue you should update your version to the latest (2013.1.417) where the bug have been resolved as mentioned in the previous post.

    Regards,
    Antonio Stoilkov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  9. Bosko Maksimovic
    Bosko Maksimovic avatar
    13 posts
    Member since:
    Oct 2012

    Posted 05 Jul 2013 Link to this post

    Hi Antonio,

    This still seems to be an issue with 2013.2.611.4.  The page scrolls to the top any time the GridClientSelectColumn checkbox is clicked. 

    Is there an ETA on the resolution?

    Thank you,
    Bosko
  10. Bosko Maksimovic
    Bosko Maksimovic avatar
    13 posts
    Member since:
    Oct 2012

    Posted 05 Jul 2013 Link to this post

    I think I found the problem.  The scroll issue is due to the entire grid getting selected when ClientSettings-AllowKeyboardNavigation is turned on.  Turning off the AllowKeyboardNavigation resolved the issue for now, but it would be useful to have the row selection not scroll the page when the keyboard navigation was turned on.

    Bosko
  11. Somyata
    Somyata avatar
    2 posts
    Member since:
    Feb 2014

    Posted 20 Feb 2014 Link to this post

    Is this issue resolved for Version "2013.3.1015.40" ? If yes, please help me with the same.
  12. Somyata
    Somyata avatar
    2 posts
    Member since:
    Feb 2014

    Posted 20 Feb 2014 in reply to Somyata Link to this post

    Previous posts say that the issue was resolved in version "2013.1.417" . Was that done using "AllowKeyboardNavigation=False"? 
  13. kurt place
    kurt place avatar
    9 posts
    Member since:
    Aug 2012

    Posted 20 Feb 2014 in reply to Somyata Link to this post

    The fix around the issue for us was 
    <telerik:RadGrid runat="server" ID="RG">
        <ClientSettings>
            <Selecting UseClientSelectColumnOnly="true" />
        </ClientSettings>
       <MasterTableView>
     ...
     But since February of 2013 we were able to take the UseClientSelectColumnOnly out as the problem was fixed.
  14. Tommy
    Tommy avatar
    6 posts
    Member since:
    Apr 2012

    Posted 20 Nov 2014 in reply to kurt place Link to this post

    The problem is still there as of  version  2014.3.1024.40 ,  if you use static headers.  I was hoping the latest version would fix this, but it didn't.  My stack holders require both static headers and the ability to select rows without the grid scrolling back to the top.  Help!
  15. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 24 Nov 2014 Link to this post

    Hi Tommy,

    Could you please elaborate more on your scenario? Could you send us your RadGrid declaration so we could replicate the problem on our end and advice you with the best possible solution.

    Regards,
    Antonio Stoilkov
    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.

     
  16. Manoj
    Manoj avatar
    4 posts
    Member since:
    Sep 2015

    Posted 15 Oct 2015 Link to this post

    I am using Radgrid in my application with client setting as AllowKeyboardNavigation-true.So When I am accessing grid cell of  row in scrolling of grid ,it is jumping to top of Page(Total Grid focus is set to screen).
    The scroll issue is due to the entire grid getting selected when ClientSettings-AllowKeyboardNavigation is turned on.  Turning off the AllowKeyboardNavigation resolved the issue for now, but it would be useful to have the row selection not scroll the page when the keyboard navigation was turned on.

    Any Suggestions ?


    Thanks & Regards,
    Manoj Rayilla

  17. shankar
    shankar avatar
    6 posts
    Member since:
    Feb 2015

    Posted 16 Oct 2015 in reply to Manoj Link to this post

    Dear Telerik Team,

     

    This issue able to reproduce in IE browsers only.

    Telerik demo grid have the same issue in IE browser.

    please do the needful.

     

     

    Regards

    Shankar Naspuri

  18. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 19 Oct 2015 Link to this post

    Hi,

    Could you specify which is the grid demo where the problem in IE can be observed. You can record a video where the exact problem can be observed so we can provide more to the point answer.

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  19. shankar
    shankar avatar
    6 posts
    Member since:
    Feb 2015

    Posted 26 Oct 2015 in reply to Pavlina Link to this post

    Dear Team,

    I am unable to upload the .webm format files.

    This forum is allowing only image files(please find the attached file)

     how can i upload the video formatted files in this forum?

    please do the needful .

     

    Regards

    Shankar Naspuri

     

  20. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 27 Oct 2015 Link to this post

    Hello,

    You can capture video with Jing and share it with us as explained here:
    https://www.techsmith.com/tutorial-jing-record-video.html

    Regards,
    Pavlina
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  21. shankar
    shankar avatar
    6 posts
    Member since:
    Feb 2015

    Posted 29 Oct 2015 in reply to Pavlina Link to this post

    Dear Team,

     

    Please find the below video path of grid jumping issue:

    1. http://screencast.com/t/4KPQpgcdia

    2. http://screencast.com/t/bssgkilv

     

    Please do the needful. 

     

    Regards,

    Shankar Naspuri

  22. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Oct 2015 Link to this post

    Hello Shankar,

    Can you please check if you have RadFormDecorator on the page and try to remove it if yes. We have a bug logged for such a behavior when an Ajax request is performed and FormDecorator is added on the page.
    Give this a try and see if it helps.

    Regards,
    Maria Ilieva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  23. shankar
    shankar avatar
    6 posts
    Member since:
    Feb 2015

    Posted 05 Nov 2015 in reply to Maria Ilieva Link to this post

    Dear Maria Ilieva,

    Thank you for your reply,

    But we are not using any “RadFormDecorator” in a page and entire solution also.

    Please do the needful.

     

    Regards

    Shankar Naspuri

  24. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 10 Nov 2015 Link to this post

    Hello Shankar,

    In this case it will be bets f you can send isolated version of your page markup as well as the related code behind so that we can try to replicate the issue and advise you further.

    Regards,
    Maria Ilieva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  25. shankar
    shankar avatar
    6 posts
    Member since:
    Feb 2015

    Posted 19 Nov 2015 in reply to Maria Ilieva Link to this post

    Hi Maria Ilieva,

     

    Please find the below code for

    ASPX

    ***********

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AppWeb.WebForm1" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server" style="background-color: #ecf2f9;">
        <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <table>
            <p> style="font-family: verdana; text-align: center; font-size: 100%; color: Maroon;
                font-weight: bold">
                Telerik Grid jumping issue in IE browsers, Grid Jumps or Scrolls to Top on bottom
                cell Click</p>
            <tr>
                <td width="125px" >               
                </td>
                <td width="750px">
                    <asp:Panel ID="grdPanel" runat="server">
                        <telerik:RadGrid ID="RadGrid1" runat="server" ShowStatusBar="true" AutoGenerateColumns="False"
                            Width="90%" PageSize="100" AllowSorting="True" AllowPaging="True" OnNeedDataSource="RadGrid1_NeedDataSource">
                            <PagerStyle Mode="NumericPages"></PagerStyle>
                            <MasterTableView DataKeyNames="JoId" AllowMultiColumnSorting="True">
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="JoId" HeaderText="JoId" HeaderButtonType="TextButton"
                                        DataField="JoId">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="SbcType" HeaderText="SbcType" HeaderButtonType="TextButton"
                                        DataField="SbcType">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="JobOrderType" HeaderText="JobOrderType"
                                        HeaderButtonType="TextButton" DataField="JobOrderType">
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="ApprovedBy" HeaderText="ApprovedBy" HeaderButtonType="TextButton"
                                        DataField="ApprovedBy">
                                    </telerik:GridBoundColumn>
                                </Columns>
                            </MasterTableView>
                            <ClientSettings AllowKeyboardNavigation="true">
                                <Selecting CellSelectionMode="MultiCell"></Selecting>
                            </ClientSettings>
                        </telerik:RadGrid>
                    </asp:Panel>
                </td>
                <td width="15px;" valign="bottom" nowrap="nowrap">
                    <span style="font-family: verdana; text-align: center; font-size: 90%; color: Maroon;
                        font-weight: bold">This bottom space of the page, If you click any cell of the grid,
                        it will jumping to top</span>
                </td>
                <td valign="top">
                    <p style="font-family: verdana; text-align: p center; font-size: 80%; color: Maroon;
                        font-weight: bold; writing-mode: tb-rl;">
                        Please scroll down to bottom.
                    </p>
                    <p style="font-family: verdana; text-align: center; font-size: 80%; color: #3300CC;
                        font-weight: bold; writing-mode: tb-rl;">
                        Please scroll down to bottom.
                    </p>
                </td>
            </tr>
        </table>
        </form>
    </body>
    </html>
    ==========================================================

    ASPX.CS

    **************

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    using Telerik.Web.UI;

    namespace AppWeb
    {
        public partial class WebForm1 : System.Web.UI.Page
        {
            DataTable dtJO;     
          
            protected void Page_Load(object sender, EventArgs e)
            {
                CreateTempDT();  
            }
            public void CreateTempDT()
            {
                dtJO = new DataTable();
                dtJO.Columns.AddRange(new DataColumn[5] { new DataColumn("JoId", typeof(int)),
                                new DataColumn("SbcType", typeof(string)),
                                new DataColumn("JobOrderType",typeof(string)),
                                new DataColumn("ApprovedBy",typeof(string)),
                                new DataColumn("Status",typeof(string))});


                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");
                dtJO.Rows.Add(6, "MNO", "JO90", "TP", "CN");
                dtJO.Rows.Add(7, "PQR", "JO32", "SP", "AA");
                dtJO.Rows.Add(1, "ABC", "JO12", "JK", "CN");
                dtJO.Rows.Add(2, "DEF", "JO23", "SN", "AA");
                dtJO.Rows.Add(3, "GHI", "JO40", "BR", "WC");
                dtJO.Rows.Add(5, "JKL", "JO86", "NN", "WP");            

            }       

            protected void RadGrid1_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
            {
                if (!e.IsFromDetailTable)
                {
                    RadGrid1.DataSource = dtJO;
                }
            }
        }
    }

    ===============================================

    Please do the needful.

     

    Regards,

    Shankar Naspuri

  26. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Nov 2015 Link to this post

    Hello,

    Try to ajaxify the container asp Panel like this:
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
           <AjaxSettings>
               <telerik:AjaxSetting AjaxControlID="grdPanel">
                   <UpdatedControls>
                       <telerik:AjaxUpdatedControl ControlID="grdPanel"></telerik:AjaxUpdatedControl>
                   </UpdatedControls>
               </telerik:AjaxSetting>
           </AjaxSettings>
       </telerik:RadAjaxManager>
     and see how it goes.

    Regards,
    Maria Ilieva
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top