RadGrid vertical scrollbar is resetting to top when rows are clicked in Internet Explorer

3 posts, 0 answers
  1. Pallav
    Pallav avatar
    4 posts
    Member since:
    Jul 2018

    Posted 18 Feb 2019 Link to this post

    I have a RadGrid control in my web page(.aspx). It is displaying a list of data. First column of this grid is a link and when link is clicked a scheduler at the last side is updated. When the vertical scrollbar is at the middle or at the end and if a row is clicked the scrollbar is resetting to top, although the particular row is selected and the scheduler is updated as well. This issue is happening only in Internet Explorer. In Google Chrome the scrollbar is working properly. I have set the property SaveScrollPosition to True. Can anyone help me on this.

    <telerik:RadGrid ID="RadGridRequests" runat="server" 
                AutoGenerateColumns="False" GridLines="None" 
                Height="520px"
                onitemdatabound="RadGridRequests_ItemDataBound" 
                    onselectedindexchanged="RadGridRequests_SelectedIndexChanged"
                     EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="true">

                <ClientSettings EnablePostBackOnRowClick="True">
                     <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True">
                    </Scrolling>
                </ClientSettings>

  2. Eyup
    Admin
    Eyup avatar
    4073 posts

    Posted 21 Feb 2019 Link to this post

    Hello Pallav,

    The scrolling resets since the action makes a postback or AJAX request. You can resolve this issue using the suggestions in these links:
    https://www.telerik.com/forums/radgrid-jumps-to-first-line-when-selecting-row#oMKrk-s78UiZ5ik2B22pow
    https://www.telerik.com/support/kb/aspnet-ajax/grid/details/persist-scroll-position-of-grid-with-100-height-after-ajax-request

    I hope this will prove helpful.

    Regards,
    Eyup
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Pallav
    Pallav avatar
    4 posts
    Member since:
    Jul 2018

    Posted 22 Feb 2019 in reply to Eyup Link to this post

    Thanks Eyup.

    I tried the following solution and it worked for me.

    1. Put the following code inside <ClientSetting> tag of RadGrid

    <ClientEvents OnGridCreated="gridCreated" />

    2. Below is the java script function 

    function gridCreated(sender, args) {
                    var scrollArea = document.getElementById(sender.get_id() + "_GridData");
                    var row = sender.get_masterTableView().get_selectedItems()[0];

                    if (row) {
                        setTimeout(function () {
                            var rowEl = row.get_element();
                            scrollArea.scrollTop = rowEl.offsetTop - parseFloat(scrollArea.style.height) + (rowEl.style.height == '' ? 0 : parseFloat(rowEl.style.height)) + 100;
                        }, 20);
                    }
              }

     

    Regards,

    Pallav Santra

Back to Top