.net Clickable Table Header Cell
One of my tasks at Mersoft was to update a .net web site. In the website, there was a data table that needed to be sortable. However, the .net’s TableHeaderCell did not have a clickable feature, and I couldn’t find any equivalent that was clickable. So, I created my own. Â Here’s how I did it…
Code for the Clickable Table Header Cell control:
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
namespace ClickableWebControl
{
/// <summary>
/// Summary description for ClickableTableHeaderCell
/// </summary>
public class ClickableTableHeaderCell : TableHeaderCell, IPostBackEventHandler
{
public ClickableTableHeaderCell()
{
//
// TODO: Add constructor logic here
//
}
protected override void Render(HtmlTextWriter writer)
{
this.Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(this, "", true));
base.Render(writer);
}
/// <summary>
/// Event raised when a text box click event takes place
/// </summary>
public event EventHandler TableHeaderCellClicked;
/// <summary>
/// Handler for the text box event
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void TableHeaderCell_Click(object sender, EventArgs e)
{
if (TableHeaderCellClicked != null) {
TableHeaderCellClicked(sender, e);
}
}
#region IPostBackEventHandler Members
void IPostBackEventHandler.RaisePostBackEvent(string eventArgument)
{
if (TableHeaderCellClicked != null)
{
TableHeaderCellClicked(this, new EventArgs());
}
}
#endregion
}
}
Code on the .aspx page:
<asp:Table ID="myTable" runat="server" Width="930px">
<asp:TableHeaderRow ID="headerRow">
<clkweb:ClickableTableHeaderCell Text="Name" OnTableHeaderCellClicked="SortName" id="sortName"/>
</asp:TableHeaderRow>
</asp:Table>
In the .cs file, add the function to be performed when the header is clicked:
{
//Code goes here to handle event when it’s clicked
}
