Recently I was working on development of an ActiveX control that mimics the behavior of Windows Explorer's list view where the sorted column appears with a slightly grey background. Then I thought why not use the flexible architecture of ASP.Net DataGrid server control to create a similar view. This article is all about how you can create a DataGrid that changes the background color of the grid column that is curently being sorted. In our previous article Conditional Formatting Of ASP.Net DataGrid Columns we demonstrated how a cell in the grid item can be formatted. This article extends the same technique. The only difference is that instead of changing background color of selective cells, we change the background color of all cells in the sorted column of the grid.

Apart from handling ItemCreated event of ASP.Net DataGrid control, the attached project also demostrates how to make use of ViewState to persist SortExpression and SortOrder of the grid. This way after every post back event, the grid is sorted based on your previous selection. The technique also demostrates that if a header is multiple time, the sorting order is reversed on every click. The following code snippet from the project demonstrates the implementation of sort order toggling.

private void OnSortView(object source, System.Web.UI.WebControls.DataGridSortCommandEventArgs e)
{
	m_strSortExpr = e.SortExpression;
	ViewState["SortExpr"] = m_strSortExpr;
	if (0 == m_strSortOrder.Length)
	{
		m_strSortOrder = "ASC";
	}
	else if (m_strSortOrder.CompareTo("ASC") == 0)
	{
		m_strSortOrder = "DESC";
	}
	else
	{
		m_strSortOrder = "ASC";
	}
	ViewState["SortOrder"] = m_strSortOrder;
	// find the column index of clicked header.
	m_iSortColumnIdx = Convert.ToInt32(this.colHeaderMap[m_strSortExpr]);
	BindGridToView();
}						
						

In ItemCreated event handler, the background color of the sorted column is assigned new color.

private void OnItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
{
	if (e.Item.ItemType == ListItemType.Item ||
		e.Item.ItemType == ListItemType.AlternatingItem)
	{
		if (-1 != m_iSortColumnIdx)
		{
			e.Item.Cells[m_iSortColumnIdx].BackColor = GetSortColumnColor();
		}
	}
}						
						

The real problem in this whole implementation was to figure out index of the column that has been clicked by user for sorting. To get to this information, we have a method that loops through each DataGridColumn of the grid and stores the SortExpresion in a Hashtable. Later on, in the SortCommand event handler, we get the index from the Hashtable by comparing SortExpression value.

private void PrepareColumnHeaderMap()
{
	colHeaderMap = new Hashtable();
	int idx = 0;
	foreach (DataGridColumn col in WinExplorerView_DataGrid.Columns)
	{
		colHeaderMap[col.SortExpression] = idx++;
	}
}						
						

Limitations of this technique

• All columns should be bound because auto generation of columns does not populate DataGridColumnCollection. This can make the column index determination a little clumsy.
• All columns in the data grid should have sort expression values set. This way the Hashtable containing the index-sortexpression value will be continous.