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
|
PROJECT DESCRIPTION
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:
- Allows the user to click on the row to select it (no button columns)
- Uses AJAX to get the selected row index and update a DetailsView based on the grid's key value
- 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.
Thanks~