Grid Sort Image Ascending Descending Dynamically

Question

0.00/5 (No votes)

See more:

Hi,
I have a Grid which sorts data when clicked on the Header of the Column(anywhere in the Header Cell).
What I want to do is at a click when the Data is in Ascending Direction an upward Arrow should be visible and vice versa.
I have two arrow upwards and downwards imagebutton in the Header cell with the Header Text but then my clickevent in the Header cell does not work as

<HeaderTemplate>
<asp:Label ID="lblAD" runat="server" Text="AD"/>
<asp:ImageButton ID="ImgbtnA" ImageUrl="~/images/uparrow.jpg" runat="server" Visible="true" CommandName="Sort"/>
<asp:ImageButton ID="ImgbtnD" ImageUrl="~/images/downarrow.jpg" runat="server" Visible="true" CommandName="Sort"/>
</HeaderTemplate>
does not work in the TemplateField does not work.
I want the Header Text as well as the arrows(one at a time).

Thank You.

Posted 31-May-12 2:11am

A_S_A

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

db7uk · Accepted Answer · 2012-05-31T03:05:00

The way I do this is by adding the image on the pre-render of the grid like so:

create a private field:

VB

private property gvSortExpression as string

next on the GridView.Sorting event:

VB

    Protected Sub gv_Sorting(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewSortEventArgs) Handles gv.Sorting
        'Set the sort direction
        If gvSortExpression <> e.SortExpression Then
            gvSortDirection = "ASC"
        Else
            If gvSortDirection = "ASC" Then
                gvSortDirection = "DESC"
            Else
                gvSortDirection = "ASC"
            End If
        End If

        'Set the expression
        gvSortExpression = e.SortExpression

'bind the grid
        LoadGrid()
    End Sub

next in the gridview pre-render event add the image:

VB

Protected Sub gv_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles gv.PreRender
        If Not String.IsNullOrEmpty(gvSortExpression) Then
            Dim img As New Image
            Dim colIndex As Integer = 0

            'Get the column to sort by and add image to
            Dim dcf As DataControlField = Nothing
            For colIndex = 0 To gv.Columns.Count - 1
                dcf = gv.Columns(colIndex)
                If dcf.SortExpression = gvSortExpression Then
                    Exit For
                End If
            Next

            'Update current col flag
            gvCurrentColumn = colIndex

            'Set the image and sort direction
            img.Style.Add("padding-left", "10px")
            If gvCurrentColumn = colIndex Then
                If gvSortDirection.ToUpper = "ASC" Then
                    img.ImageUrl = "~/tblSortDesc.gif"
                Else
                    img.ImageUrl = "~/tblSortAsc.gif"
                End If
            Else
                img.ImageUrl = "~/tblSortAsc.gif"
            End If

            'Add the sort image
            gv.HeaderRow.Cells(colIndex).Controls.Add(img)
        End If
    End Sub

and your c# would be:

C#

private string gvSortExpression { get; set; }

C#

protected void gv_Sorting(object sender, System.Web.UI.WebControls.GridViewSortEventArgs e)
{
	//Set the sort direction
	if (gvSortExpression != e.SortExpression) {
		gvSortDirection = "ASC";
	} else {
		if (gvSortDirection == "ASC") {
			gvSortDirection = "DESC";
		} else {
			gvSortDirection = "ASC";
		}
	}

	//Set the expression
	gvSortExpression = e.SortExpression;

	//bind the grid
	LoadGrid();
}

C#

protected void gv_PreRender(object sender, System.EventArgs e)
{
	if (!string.IsNullOrEmpty(gvSortExpression)) {
		Image img = new Image();
		int colIndex = 0;

		//Get the column to sort by and add image to
		DataControlField dcf = null;
		for (colIndex = 0; colIndex <= gv.Columns.Count - 1; colIndex++) {
			dcf = gv.Columns(colIndex);
			if (dcf.SortExpression == gvSortExpression) {
				break; // TODO: might not be correct. Was : Exit For
			}
		}

		//Update current col flag
		gvCurrentColumn = colIndex;

		//Set the image and sort direction
		img.Style.Add("padding-left", "10px");
		if (gvCurrentColumn == colIndex) {
			if (gvSortDirection.ToUpper == "ASC") {
				img.ImageUrl = "~/tblSortDesc.gif";
			} else {
				img.ImageUrl = "~/tblSortAsc.gif";
			}
		} else {
			img.ImageUrl = "~/tblSortAsc.gif";
		}

		//Add the sort image
		gv.HeaderRow.Cells(colIndex).Controls.Add(img);
	}
}