Sorting the datagrid
This weekend I worked on implementing sort logic in the datagrid. I wanted to use the built in sorting that the datagrid provided and was a little dissapointed. I will post the code below but I was suprised by two things:
- No indication of which direction the sort should be
- No easy way to get to the column header the sort came from
Not that these two were show stoppers or anything, but I guess I was just expecting those two things to be there.
But anway, I have posted the code below that I came up with to implement bi-directional sorting in my datagrid. This code will perform the sort on my dataview plus attempt to add an image to the column header. If anyone has some feedback on an easier way to do this in case I missed something, please share.
Here is the code behind code, and these are just the routines that are involved in my sort logic:
private void grdContacts_SortCommand(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
String sort = e.SortExpression;
String vsort = GetSortViewState();
// If the current sort expression is the same as the one in view state that means they are resorting
// the same column and we need to sort in the opposite direction. Once we add the DESC flag to the sort, if
// the user clicks on the same column again, it won't won't match and the sort expression will be reset to
// the same column but with ASC order.
if(sort==vsort)
{
SetColumnSortIcon(sort,false);
sort = String.Concat(sort," Desc");
}
else
{
SetColumnSortIcon(sort,true);
}
// Save off our sort so that on a post back we can determine what direction the sort should be if they click the same column
SetSortViewState(sort);
BindPageData(sort);
}
private void SetColumnSortIcon(String sortExpression, bool ascending)
{
String imgAsc = String.Concat(" ","<img border=0 src=",Request.ApplicationPath,"/images/sortasc.gif",">");
String imgDesc = String.Concat(" ","<img border=0 src=",Request.ApplicationPath,"/images/sortdesc.gif",">");
// Loop through all of the columns in the datagrid and compare the sort expressions to find a column match.
// Once the column match has been found, lets add our image HTML to the header to show which column is being sorted on.
foreach(DataGridColumn col in grdContacts.Columns)
{
if(col.SortExpression==sortExpression)
{
String text = col.HeaderText;
// The is an indicator to know if we have already added an image tag. If it exists in the header that means
// we already have an icon in the header and the current column was previously sorted and the direction of the sort
// has changed. This could cause a problem if we use the text in our header to force a space
int pos = col.HeaderText.IndexOf(" ");
if(pos>-1) text = col.HeaderText.Substring(0,pos);
if(ascending)
col.HeaderText = String.Concat(text,imgAsc);
else
col.HeaderText = String.Concat(text,imgDesc);
break;
}
}
}
#endregion
#region Private methods
private String GetSortViewState()
{
object obj = ViewState["sortexpression"];
return (obj==null) ? String.Empty : (string)obj;
}
private void SetSortViewState(String sort)
{
ViewState.Add("sortexpression",sort);
}
private void ClearSortViewState()
{
ViewState.Remove("sortexpression");
}
#endregion