This is a migrated thread and some comments may be shown as answers.

Persisting the last page viewed in grid with historypoints

8 Answers 119 Views

Grid

This is a migrated thread and some comments may be shown as answers.

David Bryant asked on 21 Nov 2010, 09:13 PM

I have a radgrid with several pages, and on each page there are hyperlinked row values that navigate the user away from the grid to another page (like Google). What I would like to do is persist the last page viewed so that when the user clicks the back button, I return to the last page viewed and not the first page. Here's a sample page.

<%@ Page Language="vb" AutoEventWireup="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Dim table As New System.Data.DataTable

Dim i As Integer

table.Columns.Add("ContactID")

table.Columns.Add("FirstName")

table.Columns.Add("LastName")

table.Columns.Add("ContactType")

table.Columns.Add("PostedDate")

table.Columns.Add("Replied")

For i = 1 To 50

table.Rows.Add(i, i, i, i, DateTime.Now, i)

Next

RadGrid1.DataSource = table

End Sub

Protected Sub RadGrid1_PageIndexChanged(ByVal source As Object, ByVal e As Telerik.Web.UI.GridPageChangedEventArgs)

RadScriptManager1.AddHistoryPoint("p", e.NewPageIndex)

End Sub

Protected Sub ScriptManager_Navigate(ByVal sender As Object, ByVal e As System.Web.UI.HistoryEventArgs) Handles RadScriptManager1.Navigate

If e.State.Count <= 0 Then

' Default state

RadGrid1.CurrentPageIndex = 0

Else

Dim key As String = e.State.AllKeys(0)

If key = "p" Then

Dim state As String = e.State(key)

RadGrid1.CurrentPageIndex = CInt(state)

RadGrid1.Rebind()

End If

End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1" EnableAJAX="true"

runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" GridLines="None"

AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True"

AllowMultiRowSelection="true" PageSize="25" PagerStyle-Mode="NextPrevAndNumeric" EnableViewState="true">

<PagerStyle AlwaysVisible="True" Position="TopAndBottom" />

<ClientSettings>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<GroupingSettings CaseSensitive="false" />

<MasterTableView DataKeyNames="ContactID,Replied">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<HeaderStyle Font-Bold="true" />

<Columns>

<telerik:GridBoundColumn DataField="ContactID" HeaderText="ContactID" Visible="false"

UniqueName="ContactID">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName"

Visible="true">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="LastName" UniqueName="TemplateColumn">

<ItemTemplate>

<a href='http://www.google.com'>

<%#Eval("LastName")%></a>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="ContactType" HeaderText="Contact Type" Visible="true"

UniqueName="ContactType" AllowFiltering="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="PostedDate" HeaderText="Posted Date" Visible="true"

UniqueName="PostedDate" AllowFiltering="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Replied" HeaderText="Replied" Visible="true"

UniqueName="Replied">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Delete" UniqueName="Delete" AllowFiltering="false">

<ItemTemplate>

<asp:ImageButton ID="btnDelete" runat="server" ImageUrl="~/Images/deletes.gif" ToolTip="Delete"

CommandName="Deletes" Style="cursor: hand" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Reply/View" UniqueName="View" AllowFiltering="false">

<ItemTemplate>

<asp:ImageButton ID="btnView" runat="server" ImageUrl="~/Images/views.gif" ToolTip="Reply/View"

CommandName="Reply" Style="cursor: hand" />

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"></HeaderStyle>

<ItemStyle HorizontalAlign="Center"></ItemStyle>

</telerik:GridTemplateColumn>

<telerik:GridClientSelectColumn ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"

UniqueName="Chk_DeleteAll">

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

</telerik:GridClientSelectColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</form>

</body>

</html>

I've tried turning viewstate off on the grid but that doesn't seem to change the behavior. Rebinding in the Navigate event doesn't update the grid (because it's ajaxed). Maybe I'm overlooking something pretty simple and I'm open to alternative means of accomplishing the same behavior. If anyone has some suggestions, I'm grateful. Thanks.

8 Answers, 1 is accepted

answered on 24 Nov 2010, 03:53 PM

Hi David,

You can overcome the issue with the back browser button by implementing the browser history through the ScriptManager. You can use the below articles for a reference:

http://dotnetslackers.com/articles/aspnet/AFirstLookAtASPNETExtensions35HistoryPoints.aspx
http://msdn.microsoft.com/en-us/library/cc488548.aspx

The same approach can be used if you have RadScriptManager instead of ScriptManager.

Regards,
Pavlina
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 26 Nov 2010, 03:03 AM

Thanks for the reply. The history points are being set but what I'm not able to do is have the grid display the last page viewed when clicking the back button (load from cache). For example, there are 3 pages of records. I click the next button to display page 2. On page 2 there is a hyperlink that I click that navigates to a new page. When I click the "back" button, the grid displays page 1 (not page 2). Currently, the Navigate event fires, I detect that page 2 should be displayed, I set the CurrentPageIndex and rebind. But, no change occurs to the grid, which is ajax enabled. If anyone out there has figured out a means of accomplishing this, I would be most grateful for some suggestions.

answered on 30 Nov 2010, 03:56 PM

history.zip

Hello David,

I am sending you a simple example which demonstrates how to achieve your goal using the ScriptManager History. Please check it out and let me know if it helps you.

Best wishes,
Pavlina
the Telerik team

answered on 06 Dec 2010, 10:56 PM

Thanks for this sample. The issue that I have with the Navigate event is that it fires very late in the page process -- after page 1 (or whatever page is cached) is displayed to the user. Ultimately, I did create a hack to get around the issue without using history points.

1. Turn page cache off so that Page Load occurs on "back".
2. In page load, create grid in code, setting the CurrentPageIndex to desired page to display (as stored in variable). Assign to AjaxManager.
3. On the grid's page changed event, update a session variable to store the new page.

Now when the user clicks the browser back button (or breadcrumbs) to return to the page that contains the grid, the grid is built and displays the page last viewed. It's not loading from cache so the page is slower to load but acceptable.

I can put together a sample page with working logic if anyone is interested. Thanks for your help and suggestions.

answered on 07 Dec 2010, 09:33 AM

Hello David,

Feel free to post your solution (code snippets) in this forum post - it can be helpful to other Telerik community members who are searching for a similar implementation. We will add some Telerik points to you account for sharing your code - those points can be used as a discount for future upgrades/purchases of our components.

Best regards,
Sebastian
the Telerik team

answered on 08 Dec 2010, 03:56 AM

Here it is, all on one page. I've also included a simple template column created programmatically for those that are interested. I spent many hours fiddling with this logic and it may not be the best approach -- but it does work for me.

<%@ Page Language="vb" AutoEventWireup="false" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

Dim WithEvents RadGrid1 As RadGrid

Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Init

RadGrid1 = New RadGrid

RadGrid1.Width = Unit.Percentage(98)

RadGrid1.PageSize = 15

RadGrid1.AllowPaging = True

RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrevAndNumeric

RadGrid1.AutoGenerateColumns = False

RadGrid1.ShowStatusBar = True

Dim column1 As New GridBoundColumn

column1.DataField = "ContactID"

column1.HeaderText = "ContactID"

RadGrid1.MasterTableView.Columns.Add(column1)

column1 = New GridBoundColumn

column1.DataField = "FirstName"

column1.HeaderText = "First Name"

RadGrid1.MasterTableView.Columns.Add(column1)

Dim templateColumnName As String = "LastName"

Dim templateColumn As New GridTemplateColumn()

templateColumn.ItemTemplate = New MyTemplate(templateColumnName)

templateColumn.HeaderText = "Last Name"

RadGrid1.MasterTableView.Columns.Add(templateColumn)

column1 = New GridBoundColumn

column1.DataField = "ContactType"

column1.HeaderText = "Contact Type"

RadGrid1.MasterTableView.Columns.Add(column1)

column1 = New GridBoundColumn

column1.DataField = "PostedDate"

column1.HeaderText = "Posted Date"

RadGrid1.MasterTableView.Columns.Add(column1)

column1 = New GridBoundColumn

column1.DataField = "Replied"

column1.HeaderText = "Replied"

RadGrid1.MasterTableView.Columns.Add(column1)

Me.PlaceHolder1.Controls.Add(RadGrid1)

End Sub

Private Class MyTemplate

Implements ITemplate

Protected lControl As LiteralControl

Protected validatorTextBox As RequiredFieldValidator

Protected searchGoogle As HyperLink

Protected textBox As TextBox

Protected boolValue As CheckBox

Private colname As String

Public Sub New(ByVal cName As String)

colname = cName

End Sub

Public Sub InstantiateIn(ByVal container As System.Web.UI.Control) Implements ITemplate.InstantiateIn

lControl = New LiteralControl()

lControl.ID = "lControl"

AddHandler lControl.DataBinding, AddressOf lControl_DataBinding

container.Controls.Add(lControl)

End Sub

Public Sub lControl_DataBinding(ByVal sender As Object, ByVal e As EventArgs)

Dim l As LiteralControl = DirectCast(sender, LiteralControl)

Dim container As GridDataItem = DirectCast(l.NamingContainer, GridDataItem)

' This is simply an example of using a coded template column in the grid definition

' The link below doesn't go to a particular page but shows how to pass the IDs in the querystring

l.Text = "<a href='http://www.google.com?id=" & (DirectCast(container.DataItem, System.Data.DataRowView))(colname).ToString() & "'>" & _

(DirectCast(container.DataItem, System.Data.DataRowView))(colname).ToString() & "</a>"

End Sub

End Class

Private Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

If Not IsPostBack Then

' Disable cache so that page loads on "back"

Response.Cache.SetCacheability(HttpCacheability.NoCache)

Response.Cache.SetNoStore()

' If we know what page to display, go there.

If Not Session("P") Is Nothing Then

RadGrid1.CurrentPageIndex = Session("P")

End If

RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadGrid1, RadGrid1)

End Sub

Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

Dim table As New System.Data.DataTable

Dim i As Integer

table.Columns.Add("ContactID")

table.Columns.Add("FirstName")

table.Columns.Add("LastName")

table.Columns.Add("ContactType")

table.Columns.Add("PostedDate")

table.Columns.Add("Replied")

For i = 1 To 50

table.Rows.Add(i, i, i, i, DateTime.Now, i)

Next

RadGrid1.DataSource = table

End Sub

Protected Sub RadGrid1_PageIndexChanged(ByVal source As Object, ByVal e As Telerik.Web.UI.GridPageChangedEventArgs) Handles RadGrid1.PageIndexChanged

Session("P") = e.NewPageIndex

End Sub

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title></title>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableHistory="true"></telerik:RadScriptManager>

<div>

<div style="width:1030px;">

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

</div>

</form>

</body>

</html>