I'm trying to add an Ascending and Descending sort direction Icon Image next to the header text of my ASP.NET 2.0 Gridview Columns.
I've searched and found some examples that seem to do this but have had difficult time recoding them from C# to VB or some just seemed overly complex for what I want to do.
Does anyone have a simple VB solution for sort icons?
After a bit of monkeying around with the translated code I had this Sub.
<script runat="server"> Sub GridView1_RowCreated(ByVal sender
As Object, ByVal e
As GridViewRowEventArgs) If Not (e.Row Is Nothing)
AndAlso e.Row.RowType = DataControlRowType.Header
Then
For Each cell As TableCell
In e.Row.Cells If cell.HasControls Then
Dim button As LinkButton =
DirectCast(cell.Controls(0), LinkButton) If Not (button Is Nothing)
Then
Dim image As Image =
New Image
image.ImageUrl = "images/default.gif" If GridView1.SortExpression = button.CommandArgument
Then
If GridView1.SortDirection = SortDirection.Ascending
Then
image.ImageUrl = "images/uarrow.gif" Else
image.ImageUrl = "images/darrow.gif" End If
End If
cell.Controls.Add(image) End If
End If
Next
End If
End Sub
</script>
Added "OnRowCreated" and the Sub "GridView1_RowCreated" to the gridview and bam I have sorting arrows for my gridview.
Also if your gridview ID is named something other that GridView1 you'll need to change the few references to GridView1 in the sub.
I hope this save as much hair as I have pulled out looking for an sorting image solution. :P
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
I know this thread is a little old, but I stumbled across it and it works wonderfully, but I have a little problem I can't seem to work out.
My Gridview has a "Filter" dropdown list associated with it, meaning that the user can select an item from the DDL and the GridView will "Filter", showing only the items relevent to the user's selection (For instance, if "Cars" is selected, only items under
a "Cars" category will display).
This is the problem: If the GridView is "filtered", and then a SORT is performed (header clicked), the arrow images show up perfectly, but the GridView reverts back to the original Full List (not the "Filtered" list). Everything was working fine prior
to adding this new code for the arrows.
Does anyone have any ideas how I can force the gridview to remain filtered??
This is a really simple solution and its works like a bomb. Theres a bunch of other solutions on the net for this same problem but they are really over engineered and toooooo complex.
ethanmcdonal...
Member
10 Points
2 Posts
Up Down GridView Icon Image for Column Sorting
Oct 06, 2006 09:31 PM|LINK
I'm trying to add an Ascending and Descending sort direction Icon Image next to the header text of my ASP.NET 2.0 Gridview Columns.
I've searched and found some examples that seem to do this but have had difficult time recoding them from C# to VB or some just seemed overly complex for what I want to do.
Does anyone have a simple VB solution for sort icons?
Thanks,
Ethan
rexlin
Star
9403 Points
1751 Posts
Re: Up Down GridView Icon Image for Column Sorting
Oct 09, 2006 07:52 AM|LINK
Hi,ethanmcdonald:
You can put your code in this site to convert to vb.
http://www.developerfusion.co.uk/utilities/convertcsharptovb.aspx
Best Regards,
__________________________________________________
Sincerely,
Rex Lin
Microsoft Online Community Support
This posting is provided "AS IS" with on warranties, and confers no rights.
ethanmcdonal...
Member
10 Points
2 Posts
Re: Up Down GridView Icon Image for Column Sorting
Oct 10, 2006 05:06 PM|LINK
Thanks for the link I translated the C# code from this site to VB.
http://fredrik.nsquared2.com/viewpost.aspx?PostID=185
After a bit of monkeying around with the translated code I had this Sub.
<script runat="server">
Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
If Not (e.Row Is Nothing) AndAlso e.Row.RowType = DataControlRowType.Header Then
For Each cell As TableCell In e.Row.Cells
If cell.HasControls Then
Dim button As LinkButton = DirectCast(cell.Controls(0), LinkButton)
If Not (button Is Nothing) Then
Dim image As Image = New Image
image.ImageUrl = "images/default.gif"
If GridView1.SortExpression = button.CommandArgument Then
If GridView1.SortDirection = SortDirection.Ascending Then
image.ImageUrl = "images/uarrow.gif"
Else
image.ImageUrl = "images/darrow.gif"
End If
End If
cell.Controls.Add(image)
End If
End If
Next
End If
End Sub
</script>
<asp: code stuff... Blah! />
<asp:GridView OnRowCreated="GridView1_RowCreated" ID="GridView1" runat="server" AllowSorting="True" >
Added "OnRowCreated" and the Sub "GridView1_RowCreated" to the gridview and bam I have sorting arrows for my gridview.
Also if your gridview ID is named something other that GridView1 you'll need to change the few references to GridView1 in the sub.
I hope this save as much hair as I have pulled out looking for an sorting image solution. :P
-Ethan
GridView GridView Sorting GridView editing sorting sort icons
atomiton
Member
111 Points
39 Posts
Re: Up Down GridView Icon Image for Column Sorting
Feb 20, 2007 09:13 PM|LINK
Thanks for your post[:D] and thanks for updating the link to the code in c# and writing it in vb too!
I'm doing a C# project, but my co-workers use VB.
gridView sorting triangles
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 SubPunkcrib
Member
34 Points
41 Posts
Re: Up Down GridView Icon Image for Column Sorting
Sep 11, 2007 04:34 PM|LINK
I know this thread is a little old, but I stumbled across it and it works wonderfully, but I have a little problem I can't seem to work out.
My Gridview has a "Filter" dropdown list associated with it, meaning that the user can select an item from the DDL and the GridView will "Filter", showing only the items relevent to the user's selection (For instance, if "Cars" is selected, only items under a "Cars" category will display).
This is the problem: If the GridView is "filtered", and then a SORT is performed (header clicked), the arrow images show up perfectly, but the GridView reverts back to the original Full List (not the "Filtered" list). Everything was working fine prior to adding this new code for the arrows.
Does anyone have any ideas how I can force the gridview to remain filtered??
Thanks!
Anmol_Kumar
Member
2 Points
4 Posts
Re: Up Down GridView Icon Image for Column Sorting
Oct 29, 2008 08:26 AM|LINK
hhilzinger
Member
17 Points
12 Posts
Re: Up Down GridView Icon Image for Column Sorting
Apr 06, 2009 12:30 PM|LINK
This is a really simple solution and its works like a bomb. Theres a bunch of other solutions on the net for this same problem but they are really over engineered and toooooo complex.
Much appreciated
Hans
mumerdraz@gm...
Member
2 Points
1 Post
Re: Up Down GridView Icon Image for Column Sorting
Jun 01, 2009 10:03 AM|LINK
Another simple solution to enable images as Link for sorting.
protected void gvPatientList_RowCreated(object sender, GridViewRowEventArgs e){
if (e.Row != null && e.Row.RowType == DataControlRowType.Header){
foreach (TableCell cell in e.Row.Cells){
if (cell.HasControls()){
LinkButton button = cell.Controls[0] as LinkButton; HtmlGenericControl gv = new HtmlGenericControl("div"); Label lnkName = new Label();lnkName.Text = button.Text;
if (button != null){
Image imageSort = new Image();imageSort.ImageUrl = "~/Images/V10Icons/Sort_Up.gif";
if (gvPatientList.SortExpression == button.CommandArgument){
if (gvPatientList.SortDirection == SortDirection.Ascending) imageSort.ImageUrl = "~/Images/V10Icons/Sort_Down.gif"; else imageSort.ImageUrl = "~/Images/V10Icons/Sort_Up.gif";}
gv.Controls.Add(lnkName);
gv.Controls.Add(imageSort);
button.Controls.Add(gv);
//cell.Controls.Add(imageSort);}
}
}
}
}
CTO CIAExperts