Invoke javascript on page change event in a Gridview

Posted on 2009-04-23
Last Modified: 2012-05-06
Is it possible to fire off a javascript event on a Gridview when the user changes the page index that they want to look at?

I know with buttons and some other controls, you can add attributes for things like "onclick" or "onchange".   Is it possible to do something similiar for a gridview on a page change?

Basically what I'm trying to do is execute javascript to take the user to the top of the page (window.scrollTo(0,0);)   I am using MaintainScrollPositionOnPostback="true" for this page which is why I need to somehow override that.   Currently, if they change the page number of a grid that they are on, it doesn't really make sense to still be looking at the bottom of the results after the page loads.   I'd like to force the page back to the top when the page index changes.
Question by:amb1313
    LVL 12

    Expert Comment

    I've done it like this. Capture the row data bound event, and loop through the page cells that contain the link buttons
            protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
                if (e.Row.RowType == DataControlRowType.Pager)
                    // make sure the PagerTableExists
                    TableRow tr = (TableRow)e.Row.Controls[0].Controls[0].Controls[0];
                    foreach (TableCell td in tr.Cells)
                        foreach (Control c in td.Controls)
                            if (c.GetType().ToString().Equals("System.Web.UI.WebControls.DataControlPagerLinkButton"))
                                LinkButton lb = (LinkButton)c;
                                lb.OnClientClick = "return confirm('Do you really wish to change the page?');";

    Open in new window

    LVL 12

    Accepted Solution

    sorry in your example change the onclientclick of my example to

    lb.OnClientClick = "window.scrollTo(0,0);";

    Author Closing Comment

    Thanks.  That was exactly what I needed.

    Author Comment

    Thanks. That was exactly what I needed.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    758 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now