Up Down GridView Icon Image for Column Sorting

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

Re: Up Down GridView Icon Image for Column Sorting

Hi,ethanmcdonald:

You can put your code in this site to convert to vb.

http://www.developerfusion.co.uk/utilities/convertcsharptovb.aspx

Re: Up Down GridView Icon Image for Column Sorting

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.

<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

Re: Up Down GridView Icon Image for Column Sorting

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.

Re: Up Down GridView Icon Image for Column Sorting

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

Re: Up Down GridView Icon Image for Column Sorting

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!

Re: Up Down GridView Icon Image for Column Sorting

I am trying c# equivalent code, but this "if (GrideView1.SortExpression == button.CommandArgument)" condition always false because of GrideView1.SortExpression does not have any value. Can you please suggest? protected void GridView1_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 = (LinkButton)cell.Controls[0]; if ((button != null)) { Image image = new Image(); image.ImageUrl = "images/upArrow1.jpg"; if (GrideView1.SortExpression == button.CommandArgument) { if (GrideView1.SortDirection == SortDirection.Ascending) { image.ImageUrl = "images/upArrow1.jpg"; } else { image.ImageUrl = "images/downArrow1.jpg"; } } cell.Controls.Add(image); } } } } }

Re: Up Down GridView Icon Image for Column Sorting

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

Re: Up Down GridView Icon Image for Column Sorting

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);

}