Select row with AjaxRequest and automatically scroll to DetailsView

4 posts, 0 answers
  1. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 14 Oct 2006 Link to this post


    RadGrid, RadAjax for ASP .NET version

    RadControls for ASP .NET AJAX version
    RadGrid 4.0.0 and later
    RadAjax 1.5.0 and later

    2008.1.415 and later
    .NET version

    2.0 and later
    Visual Studio version

    VS2005 and later
    Programming language

    Javascript, codeless binding
    Browser support

    all supported by RadGrid for ASP .NET

    all browsers supported by RadControls for ASP .NET AJAX

    The name of the demo isn't pretty, but it does summarize the behavior of the demo. The goal of the demo was to build a page that:
    1.  Allows the user to click on the row to select it (no button columns)
    2. Uses AJAX to get the selected row index and update a  DetailsView based on the grid's key value
    3. Starts with the DetailsView "below the fold" (or off screen) and scrolls it into view so the user is aware of the AJAX update
    To do this, we use ajax, grid, and a little JavaScript for the scrolling. When you click on a row in the grid, AJAX is used to load the company details in a DetailsView. Before the AJAX call is made, though, JavaScript is used to smoothly scroll the page to bring the DetailsView onto the screen.

    This demo demonstrates a solution to a significant UI problem caused by AJAX updates that occur outside of the user's visible screen. Since there is no page refresh with AJAX, the user could be completely unaware of an updated area of your page if it occurs off screen. Using JavaScript and Anchor tags to move the updated portion of the page into the user's view ensures that they recognize an update has occurred.

    To use the demo, simply open the web site in Visual Studio 2005 and browse the Default.aspx page in your favorite (ajax supporting) browser. Click on a row in the grid to see how the scrolling page makes it easy to see the AJAX update.

  2. Sebastian
    Sebastian avatar
    9934 posts

    Posted 17 Oct 2006 Link to this post

    Hi Todd,

    Superb demo! Thank you for the time dedicated to create it and upload it in our code library section. The animation effect on scrolling looks pretty slick both under IE and FireFox - nice job, I bet it requires some swift javascript knowledge :) The codeless approach is also impressive.
    Your involvement in various areas of the telerik community is really appreciated - feel free to post some more examples when you have the time and intention to do that.

    All the best,


    the telerik team | | | |



  3. jsouthron
    jsouthron avatar
    1 posts
    Member since:
    Oct 2006

    Posted 03 Dec 2006 Link to this post

    How come there are no directions or support for connecting to other data sources?  I have tried the demo with an ObjectDataSource but no luck.  Also if you place the Javascript in a different directory to share it the script stops working. 

    Some additional help for installing this in other scenarios would be great. 
  4. Meera
    Meera avatar
    5 posts
    Member since:
    May 2007

    Posted 09 Dec 2007 Link to this post


    Thanks a lot for the demo you provided.  I am able to bind a RadGrid with DetailsView control.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.