.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month
Sandeep Singh

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Sorting with sort direction images in ASP.NET Gridview

Posted By:Baimey Rajesh       Posted Date: August 15, 2012    Points: 200    Category: ASP.NET    URL: http://www.dotnetspark.com  

Let us see how to add an image in the sorted column so that the user understands the column that is sorted and the direction of sorting.

Sorting in ASP.NET Gridview

We have seen How easy sorting can be done, in my other post http://www.dotnetspark.com/kb/5182-sorting-asp-net-gridview.aspx


Now Let us add an image in the sorted column so that the user understands the column that is sorted and the direction of sorting.


For this

1.       Add two images in the image folder of the solution.

1.       Then in the Gridview_RowDataBound Event

a.       Get the header Row

b.      Add the image according to the sort Direction in an image control.


Now Lets see the code:

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
        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 imgTxt As Label = New Label
                        ' image.ImageUrl = "images/default.gif"
                        If strSortExpression = button.CommandArgument Then
                            If strSortingDirection = "Asc" Then
                                imgTxt.Text = "<img src='images/uparrow.png' alt='ASC' style='width:10px;height:10px;border:none;'>"
                            ElseIf strSortingDirection = "Desc" Then
                                imgTxt.Text = "<img src='images/downarrow.png' alt='ASC' style='width:10px;height:10px;border:none;'>"
                            End If
                        End If
                    End If
                End If
        End If
    End Sub

Then its done:


For C# users please visit http://www.developerfusion.com/tools/convert/csharp-to-vb/ so that you can get the code converted to C#.


Please see the attached Application .


Happy Coding J



 Subscribe to Articles


Further Readings:

Author: Ravi Ranjan Kumar         Company URL: http://www.dotnetspark.com
Posted Date: August 30, 2012

You should Post this code in Code Snippet. An article should be elaborating one.
Author: netgrid         Company URL: http://www.dotnetspark.com
Posted Date: October 06, 2012

If you want to create custom styles in CQWP then you have to play with code in style sheets while in DVWP SharePoint Designer is at your service and makes your work very easy.

Author: jamescmc         Company URL: http://www.dotnetspark.com
Posted Date: February 23, 2014

Thanks for you detailed instructions for adding image. I have also been testing image at:

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend