Enable the back button in ASPxGridView – Experimental

First the disclaimers/warnings. The following uses preview technology. It requires VS2008 and the ASP.NET AJAX Extensions 3.5 Preview.

You asked in the forums about using the back button with the ASPxGridView in CallBack/AJAX mode. Since AJAX doesn’t reload the page, the back button doesn’t usually work. There are methods to work around that, but Microsoft hasn’t added them to ASP.NET yet.

Your questions made me wonder if I could get some back button functionality into an ASPxGridView page. So I did some research and I found a way to do it. Sort of. Experimentally. With some preview tech.

image

Ok, it’s cutting edge, but it’s a step in the right direction. In the screencast, Bertrand uses the index property from a Wizard control to show how history is managed with the ScriptManager control. The approach uses the EnableHistory parameter of the ScriptManager to create "History Points" for the ScriptManager to navigate to when the back/forward buttons are clicked. This got me thinking that it’s possible to use the same approach with the ASPxGridView. Therefore have the ability to use the back button while still using AJAX callbacks. A history point is needed and a common history point in web grids are page numbers. With the ASPxGridView, the PageIndex property would be the specific history point.

So exactly how’s it done? I recommend watching Bertrand’s screencast for a good overview of the approach. When the ASPxGridView’s page is changed then a "History Point" is created in the ScriptManager. These points are then retrieved/used in the ScriptManager’s Navigate method. The navigate is called when the back/forward button is clicked:

 
   protected void ASPxGridView1_PageIndexChanged(object sender, EventArgs e)
   {
      if ((ScriptManager1.IsInAsyncPostBack) && (!ScriptManager1.IsNavigating))
      {
         ScriptManager1.AddHistoryPoint("pageIndex", ASPxGridView1.PageIndex.ToString(),
            "Page #: " + ASPxGridView1.PageIndex.ToString());
      }
   }
   protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)
   {
      string pageIndexStr = e.State["pageIndex"];
      if (String.IsNullOrEmpty(pageIndexStr))
      {
         ASPxGridView1.PageIndex = 0;
      }
      else
      {
         int pageIndex = Convert.ToInt32(pageIndexStr);
         ASPxGridView1.PageIndex = pageIndex;
         pageIndexStr = Convert.ToString(pageIndex + 1);
      }
      Page.Title = pageIndexStr;
   }
 

You can try the attached project for yourself but as I mentioned above, you will need the ASP.NET AJAX Extensions 3.5. Since this approach uses the ScriptManager then ASPxGridView is placed inside of an UpdatePanel. Whenever you place the ASPxGridView inside an UpdatePanel, you must set the EnableCallBacks to false because the callbacks are now handled by the ScriptManager/UpdatePanel.

More disclaimers: This works only for paging. It doesn’t keep track of other operations like grouping, sorting, etc. It’ll be interesting to see how this feature evolves.

Download the code here: AGVHistoryTest.zip AGVHistoryTest.zip

Thanks!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s