Click here to Skip to main content
15,917,997 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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

<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"/>
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.

1 solution

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

create a private field:

private property gvSortExpression as string

next on the GridView.Sorting event:
    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"
            If gvSortDirection = "ASC" Then
                gvSortDirection = "DESC"
                gvSortDirection = "ASC"
            End If
        End If

        'Set the expression
        gvSortExpression = e.SortExpression

'bind the grid
    End Sub

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

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

            '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"
                    img.ImageUrl = "~/tblSortAsc.gif"
                End If
                img.ImageUrl = "~/tblSortAsc.gif"
            End If

            'Add the sort image
        End If
    End Sub

and your c# would be:

private string gvSortExpression { get; set; }

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

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
Share this answer
db7uk 31-May-12 9:06am    
Sorry, thought it was vb.Net. Hang on....
Sandeep Mewara 31-May-12 16:18pm    
I will still vote 5 for the effort. :thumbsup:
db7uk 31-May-12 16:19pm    
thanks! :)
A_S_A 1-Jun-12 3:44am    
Thank You,
inspite I removed it from the header template and defined the images in RowDataBound in a loop.

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

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900