Paging to the top of the grid

7 posts, 1 answers
  1. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 23 Mar 2013 Link to this post

    H, guys

    I have this nice piece of code that ensures that when the grid is paged it will jump back to the top of the grid. Useful for when the user is at the bottom of the grid.

    <script type="text/javascript" language="javascript">
        // Catches events fired by the RadGrid (paging) and jumps page to the top  
        var postbackElement;
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
        function beginRequest(sender, args) {
            postbackElement = args.get_postBackElement();
        }
        function pageLoaded(sender, args) {
            if (typeof (postbackElement) === "undefined") {
                return;
            }
            // Uses the MasterTable ClientID 
            if ((postbackElement.id) === "ctl00_CphJam_ctl00_RadGrid1_ctl00") {
                window.scrollTo(0, 160);
            }
        
    </script>

    However, it only works when a page 'number' is clicked - it does not work when any of the next, previous, first or last image buttons are clicked.

    Does anybody know please?

    Cheers,
    Jon
  2. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 28 Mar 2013 Link to this post

    Hi Jon,

    I suggest that you use RadAjax and intercept the OnRequestStart client-side event. From the event arguments you can extract the UniqueID of the control which initiated the request and determine whether it is a child control of the RadGrid(e.g. a button in the pager). If this requirement is met you can scroll to the position you desire. Please review the project attached which demonstrates this approach and tell us if it meets the requirements.

    All the best,
    Angel Petrov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 29 Mar 2013 Link to this post

    Hi Angel,

    Thank you very much for the reply.

    Your demo does indeed work but my grid is a little complex. I have other events in the grid that need to keep the grid scrolled where it is and not jump to the top.

    The original code I posted works great except for the paging image buttons - is there any other way the image button events could be captured the same as for the numerical paging links?

    Otherwise, I'll just have to use numerical paging, which would be a shame.

    Cheers,
    Jon

  5. Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 01 Apr 2013 Link to this post

    Hi Jon,

    The code which you previously posted works fine when ajaxification is done via RadAjax. When using regular update panels the postbackElement.id will not be set accordingly when paging via the next, previous, last or first button. In order to use the logic which you previously posted you will have to use RadAjax for ajaxification. In attachments you can find a sample project which demonstrates a possible resolution.

    Kind regards,
    Angel Petrov
    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.
  6. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 01 Apr 2013 Link to this post

    Hi Angel,

    I just realised that I didn't explain that I am using Ajax - in fact using the proxy.
    Either using the RadAjaxPanel or RadAjaxManagerProxy it gives the same result. The pager jumps back to the top as desired when clicking the numerical numbers but not when clicking the first, previous, next and last buttons.

    Your first solution worked for the first, previous, next and last buttons but in my grid I also have link buttons that pop up RadNotifications that need to stay where they are (not going to the top).
    I just need to isolate the pager and make only events from the pager scroll to the top.

    It seems strange that the numerical pager links work but not the image buttons.
    I would imaging most people would want the grid to scroll to the top when paged from the bottom of the grid, when the grid is long.

    Cheers,
    Jon





  7. Answer
    Angel Petrov
    Admin
    Angel Petrov avatar
    1006 posts

    Posted 04 Apr 2013 Link to this post

    Hello Jon,

    Since you are using a RadAjaxManagerProxy I suppose that you have a Master/Content page relation or you are using WebUserControls. Could you please explain in detail your scenario so we could advice you with the best possible option? As in the example I have attached in my previous post the logic uses RadAjaxPanel for ajaxification.

    All the best,
    Angel Petrov
    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.
  8. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 05 Apr 2013 Link to this post

    Hi Angel,

    Thank you for your persistence!
    It's taken me all day to unravel this one, but finally I now know what was wrong.
    For anyone else as careless as me, here is what was causing the problem.

    Protected Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid1.PreRender
     
           'used for page saving
           If Not Session("GridPage") Is Nothing Then
               RadGrid1.CurrentPageIndex = Convert.ToInt32(Session("GridPage"))
               ' THIS LINE WAS THE PROBLEM 'RadGrid1.MasterTableView.Rebind()
           End If
     
       End Sub

    Thanks for the great support!

    Jon
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017