The following code will allow you to have two clickable images within your column header. One indicating ascending and the other indicating descending. A click event on either of the images will reload the page and have it sorted accordingly!
'--adds a clickable image to indicate the sort direction for sortable columns
'--gridview sorting should be enabled for this to work correctly
'--within the the GridView_RowCreated Event put the following
' If (e.Row.RowType = DataControlRowType.Header) Then
' AddClickableSortImage(GridView1, e.Row)
' End If
'
'
'--create a click event handler for the images
'Sub SortImageClick(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)
' If Request.QueryString("col") > "" Then
' If Request.QueryString("sort") = "asc" Then
' GridView1.Sort(Request.QueryString("col"), SortDirection.Ascending)
' Else
' GridView1.Sort(Request.QueryString("col"), SortDirection.Descending)
' End If
' End If
'End Sub
Protected Sub AddClickableSortImage(ByVal grid As GridView, ByVal item As GridViewRow)
Dim i As Integer '--counter
Dim col As String '--column name for sorting
For i = 0 To grid.Columns.Count - 1 '--iterate through the columns
col = grid.Columns(i).SortExpression
'--check to make sure this is a sortable column
If col > "" Then
'--create new image buttons and labels for the header
Dim HeaderLabel As New Label
Dim BlankLabel As New Label
Dim imgBtnUp As New ImageButton
Dim imgBtnDown As New ImageButton
'--set the properties
HeaderLabel.Text = grid.Columns(i).HeaderText & " "
BlankLabel.Text = " " '--create a "gap" between sorting images
imgBtnUp.PostBackUrl = Request.Path & "?LocID=" & Request.QueryString("LocID") & "&col=" & col & "&sort=asc"
imgBtnUp.ImageUrl = "~/images/TriangleUp.gif"
AddHandler imgBtnUp.Click, AddressOf SortImageClick
imgBtnDown.PostBackUrl = Request.Path & "?LocID=" & Request.QueryString("LocID") & "&col=" & col & "&sort=desc"
imgBtnDown.ImageUrl = "~/images/TriangleDown.gif"
AddHandler imgBtnDown.Click, AddressOf SortImageClick
'--this will remove the clickable column header link button that is automatically created
'--when adding sorting capabilities to a gridview
item.Cells(i).Controls.RemoveAt(0)
'--add the new controls to the column header
item.Cells(i).Controls.Add(HeaderLabel)
item.Cells(i).Controls.Add(imgBtnUp)
item.Cells(i).Controls.Add(BlankLabel)
item.Cells(i).Controls.Add(imgBtnDown)
End If
Next
End Sub
'--click event handler for the image buttons for gridview sorting
Sub SortImageClick(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs)
If Request.QueryString("col") > "" Then
If Request.QueryString("sort") = "asc" Then
GridView1.Sort(Request.QueryString("col"), SortDirection.Ascending)
Else
GridView1.Sort(Request.QueryString("col"), SortDirection.Descending)
End If
End If
End Sub
dibtastic
Member
4 Points
3 Posts
Re: Up Down GridView Icon Image for Column Sorting
May 15, 2007 06:49 PM|LINK
The following code will allow you to have two clickable images within your column header. One indicating ascending and the other indicating descending. A click event on either of the images will reload the page and have it sorted accordingly!
'--adds a clickable image to indicate the sort direction for sortable columns '--gridview sorting should be enabled for this to work correctly '--within the the GridView_RowCreated Event put the following ' If (e.Row.RowType = DataControlRowType.Header) Then ' AddClickableSortImage(GridView1, e.Row) ' End If ' ' '--create a click event handler for the images 'Sub SortImageClick(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) ' If Request.QueryString("col") > "" Then ' If Request.QueryString("sort") = "asc" Then ' GridView1.Sort(Request.QueryString("col"), SortDirection.Ascending) ' Else ' GridView1.Sort(Request.QueryString("col"), SortDirection.Descending) ' End If ' End If 'End Sub Protected Sub AddClickableSortImage(ByVal grid As GridView, ByVal item As GridViewRow) Dim i As Integer '--counter Dim col As String '--column name for sorting For i = 0 To grid.Columns.Count - 1 '--iterate through the columns col = grid.Columns(i).SortExpression '--check to make sure this is a sortable column If col > "" Then '--create new image buttons and labels for the header Dim HeaderLabel As New Label Dim BlankLabel As New Label Dim imgBtnUp As New ImageButton Dim imgBtnDown As New ImageButton '--set the properties HeaderLabel.Text = grid.Columns(i).HeaderText & " " BlankLabel.Text = " " '--create a "gap" between sorting images imgBtnUp.PostBackUrl = Request.Path & "?LocID=" & Request.QueryString("LocID") & "&col=" & col & "&sort=asc" imgBtnUp.ImageUrl = "~/images/TriangleUp.gif" AddHandler imgBtnUp.Click, AddressOf SortImageClick imgBtnDown.PostBackUrl = Request.Path & "?LocID=" & Request.QueryString("LocID") & "&col=" & col & "&sort=desc" imgBtnDown.ImageUrl = "~/images/TriangleDown.gif" AddHandler imgBtnDown.Click, AddressOf SortImageClick '--this will remove the clickable column header link button that is automatically created '--when adding sorting capabilities to a gridview item.Cells(i).Controls.RemoveAt(0) '--add the new controls to the column header item.Cells(i).Controls.Add(HeaderLabel) item.Cells(i).Controls.Add(imgBtnUp) item.Cells(i).Controls.Add(BlankLabel) item.Cells(i).Controls.Add(imgBtnDown) End If Next End Sub '--click event handler for the image buttons for gridview sorting Sub SortImageClick(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) If Request.QueryString("col") > "" Then If Request.QueryString("sort") = "asc" Then GridView1.Sort(Request.QueryString("col"), SortDirection.Ascending) Else GridView1.Sort(Request.QueryString("col"), SortDirection.Descending) End If End If End Sub