Showing sorting direction up/down image arrow in GridView clickable header
|
Id:
|
18
|
|
Type:
|
Articles
|
|
Category:
|
GridView
|
|
Page Views:
|
1972
|
|
Posted Date:
|
16/Jul/2010
|
Assuming that GridView Sorting is manually implemented. In this article we will
learn, how to efficiently display Up or Down arrow image in GridView column's header
on sorting. According to my findings, GridView column sorting direction images in
header cells can be displayed using GridView's RowCreated event.
You could just filter the header row and depending on the SortExpression property
of GridView put up or down arrow image to header cells. This approach is not suitable
as the RowCreated event will have to fire for each and every row. Also, if you have
implemented sorting manually without using SqlDataSource etc, you will always find
SortExpression property of GridView either null or empty in RowCreated and Sorting
events.
Please refer to
Implement data sorting in GridView without using DataSources
and modify the Sorting event as below to show sorting direction images:
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
string order = SortingOrder;
DataBindGrid(e.SortExpression, order);
GridViewRow gridViewHeaderRow = GridView1.HeaderRow;
foreach (TableCell headerCell in gridViewHeaderRow.Cells)
{
if (headerCell.HasControls())
{
LinkButton headerButton = headerCell.Controls[0] as LinkButton;
if (headerButton != null)
{
HtmlGenericControl div = new HtmlGenericControl("div");
Label headerText = new Label();
headerText.Text = headerButton.Text;
div.Controls.Add(headerText);
if (e.SortExpression == headerButton.CommandArgument)
{
Image headerImage = new Image();
if (order == "asc")
headerImage.ImageUrl = "~/Images/down_arrow.png";
else
headerImage.ImageUrl = "~/Images/up_arrow.png";
div.Controls.Add(headerImage);
}
headerButton.Controls.Add(div);
}
}
}
}
Obviously, showing sorting direction images using this way certainly reduces server
side trips and brings all the desired functionality in Sorting event.
That's all, I hope you have got an idea of
- How to add up down arrow images in GridView header columns on sorting
- How to show GridView sorting direction image
- ASP.Net GridView sorting arrow
- How to display ASP.Net GridView sort icon
Let me know if you have any comments or questions, also don't forget to rate this
Resource.