How to remove underline in header text of gridview sorting?
In this article I am going to explain about how to remove header text underline when sorting is apply in gridview.
Description :
Whenever we use sorting in the gridview the header text is come with underline. We are not able to remove underline directly apply use like below code snippet to avoid underline in header text.Client side
I placed three text boxes to collect employee no, name, salary.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Grid View Sorting </title>
<style type="text/css">
.container
{
width: 500px;
height: 200px;
border: 2px solid #336699;
text-align: center;
vertical-align: middle;
position: relative;
}
.sub-container
{
position: absolute;
display: table;
width: 230px;
height: 100px;
left: 130px;
top: 70px;
}
.redlink
{
font-family: Segoe UI, Trebuchet MS, Verdana, Arial, sans-serif, Helvetica;
font-size: 12px;
color: #B00000;
font-weight: normal;
padding: 5px 10px 5px 10px;
text-decoration: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<asp:GridView ID="GridView1" runat="server" DataKeyNames="eno" PageSize="20" AllowPaging="True"
AllowSorting="True" OnSorting="GridView1_Sorting" CellPadding="4" ForeColor="#333333"
GridLines="None" AutoGenerateColumns="true" OnRowDataBound="GridView1_RowDataBound">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
<HeaderStyle CssClass="redlink" />
</asp:GridView>
<br />
</div>
</form>
</body>
</html>Server side
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.IO;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlcon = new SqlConnection(ConfigurationManager.ConnectionStrings["Con"].ConnectionString);
SqlCommand sqlcmd;
SqlDataAdapter da;
DataTable dt = new DataTable();
DataTable dt1 = new DataTable();
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
GridData();
}
}
void GridData()
{
sqlcmd = new SqlCommand("select * from emp", sqlcon);
sqlcon.Open();
da = new SqlDataAdapter(sqlcmd);
dt.Clear();
da.Fill(dt);
if (dt.Rows.Count > 0)
{
Session["dt"] = dt;
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
//Set & get sort state in viewstate
private string GVSortDirection
{
get { return ViewState["SortDirection"] as string ?? "DESC"; }
set { ViewState["SortDirection"] = value; }
}
private string GetSortDirection()
{
switch (GVSortDirection)
{
//If previous sort direction if ascending order then assign new direction as descending order
case "ASC":
GVSortDirection = "DESC";
break;
//If previous sort direction if descending order then assign new direction as ascending order
case "DESC":
GVSortDirection = "ASC";
break;
}
return GVSortDirection;
}
protected void GridView1_Sorting(object sender, GridViewSortEventArgs e)
{
DataTable dataTable = (DataTable)Session["dt"];
if (dataTable != null)
{
//Create new dataview instance and pass datatable
DataView dataView = new DataView(dataTable);
//get sort direction from the get sort direction method
string sortDirection = GetSortDirection();
//Sort dataview data based on the sort directin value
dataView.Sort = e.SortExpression + " " + sortDirection;
//Assign datasource and bind data to grid view
GridView1.DataSource = dataView;
GridView1.DataBind();
}
}
//here i apply that defined css in the gridview link button from code behind
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 0; i < e.Row.Cells.Count; i++)
{
if (e.Row.Cells[i].Controls.Count > 0)
{
LinkButton Link = (LinkButton)e.Row.Cells[i].Controls[0];
Link.Attributes.Add("style", "text-decoration:none;");
}
}
}
}
} Output :
Source code:
Client Side: ASP.NET
Code Behind: C#Conclusion
I hope this code snippet is help you to know about gridview sorting remove header underline.