Retain selection on Sorting or Filtering Wijmo GridView

Many customers face a situation where they want to retain the row selected by the end user after Sorting/Filtering is applied. Normally, when we apply sorting or filtering after selecting any row then selection is lost after the postback . This blog discuss the approach we need to use for having the selected row even after sorting or filtering.

Step 1: Bind the GridView to a datatable

Firstly, we need to bind the gridview with a data table say Categories table from Northwind database. Since, we are using server side selection, we need to set the AutoGenerateSelectButton property to ‘True’ and thereby, should set the ClientSelectionMode property to ’None’. Else, we will have both server side and client side selection at the same time. Also, we have to set the AllowSorting and ShowFilter property to ‘True’ in order to enable sorting/filtering on the gridview. Here is the source code of .aspx page:

<wijmo:C1GridView ID="C1GridView1" runat="server" AllowSorting="True" ClientSelectionMode="None"  
 AutogenerateColumns="False" AutoGenerateSelectButton="True"  
 DataKeyNames="CategoryID" DataSourceID="AccessDataSource1"  
 ShowFooter="False" ShowFilter="True">  

 <Columns>  
 <wijmo:C1BoundField DataField="CategoryID" HeaderText="CategoryID"  
 ReadOnly="True" SortExpression="CategoryID">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="CategoryName" HeaderText="CategoryName"  
 SortExpression="CategoryName">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="Description" HeaderText="Description"  
 SortExpression="Description">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="Picture" HeaderText="Picture"  
 SortExpression="Picture">  
 </wijmo:C1BoundField>  
 <wijmo:C1BoundField DataField="UserName" HeaderText="UserName"  
 SortExpression="UserName">  
 </wijmo:C1BoundField>  
 </Columns>  
 </wijmo:C1GridView>  
 <asp:AccessDataSource ID="AccessDataSource1" runat="server"  
 DataFile="~/App_Data/C1NWind.mdb"  
 SelectCommand="SELECT * FROM [Categories]">  
 </asp:AccessDataSource>  

Step 2: Save the Selected row

We need to save the data key value of the selected row in a ViewState object so that we can use it for settting the selection again and hence, we should handle the SelectedIndexChanged event. The code snippet used in this event is as follows:

 Protected Sub C1GridView1_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles C1GridView1.SelectedIndexChanged  
 ' Save data key value of selected row  
 If (Not C1GridView1.SelectedIndex = -1) Then  
 ViewState("SelectedValue") = C1GridView1.SelectedValue  
 End If  
 End Sub  

Step 3: Reset the selected index

We should reset the SelectedIndex property of the gridview before re-selecting the row after sorting or filtering. This can be done in the Sorting event and Filtering event with the help of below code:

Protected Sub C1GridView1_Sorting(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewSortEventArgs) Handles C1GridView1.Sorting  
 ' Reset selected index  
 C1GridView1.SelectedIndex = -1  
 End Sub  

 Protected Sub C1GridView1_Filtering(sender As Object, e As C1.Web.Wijmo.Controls.C1GridView.C1GridViewFilterEventArgs) Handles C1GridView1.Filtering  
 ' Reset selected index  
 C1GridView1.SelectedIndex = -1  
 End Sub  

Step 4: Re-select the row

Since the gridview is re-binded on postback( which occurs due to sorting or filtering), we need to handle the DataBound event to set the selection again. In this, we should check if the selected row is visible or not and then, re-select it using the ViewState object. Here is the code for same:

 Protected Sub C1GridView1_DataBound(sender As Object, e As System.EventArgs) Handles C1GridView1.DataBound  
 Dim Row As C1GridViewRow  
 Dim SelectedValue As String = ViewState("SelectedValue")  
 If SelectedValue Is Nothing Then  
 Return  
 End If  

 ' Determine if the selected row is visible and re-select it  
 For Each Row In C1GridView1.Rows  
 Dim KeyValue As String = C1GridView1.DataKeys(Row.RowIndex).Value  
 If (KeyValue = SelectedValue) Then  
 C1GridView1.SelectedIndex = Row.RowIndex  
 End If  
 Next  
 End Sub  

Please refer to the attached sample for complete implementation. Download Sample