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!

2 comment(s)

Your sample doesn't seem to handle the default state, so if you go back to the initial hit to the page, the state will be empty but your code won't set the index to zero.

9 January, 2008

Hey Bertrand,

Yes, thanks for catching that. I've updated the code to handle the default state and also set the EnableStateHash to false to show the pageindex in the URL. Though I think it's a nice feature to keep it encrypted for security.

Good screencast btw, look forward to more from your team.

9 January, 2008

Please login or register to post comments.