ASP.Net GridView Highlight Row onmouseover
Highlight Row functionality of ASP.Net GridView Data Control can be developed by using the combination of CSS and Javascript. You can useonmouseover event for row item of GridView Control
In this sample code onmouseover attribute has been added to GridView row item to change the background color by specifying the CSS class name and onmmouseout event has been added to set back old color by removing the CSS class name of row item.
When row.Attributes.Add function is used inside the RowDataBound over each item of DataRow it adds the onmouseover and onmouseout attributes to the tr tag of HTML table with specified javascript methods. It generates the following HTML code to add the attributes:
Aspx Code As Follows:
<asp:GridView runat="server" ID="gvEmpdetails" DataKeyNames="EmpID" AllowPaging="True" OnRowDataBound="gvEmpdetails_RowDataBound"
AllowSorting="True" AutoGenerateColumns="False">
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox runat="server" ID="chkhead" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmpID" HeaderText="EmpID" SortExpression="EmpID" />
<asp:BoundField DataField="EmpName" HeaderText="EmpName" SortExpression="EmpName" />
<asp:BoundField DataField="EmpSal" HeaderText="EmpSal" SortExpression="EmpSal" />
<asp:BoundField DataField="EmpBranch" HeaderText="EmpBranch" SortExpression="EmpBranch" />
<asp:BoundField DataField="EmpCode" HeaderText="EmpCode" SortExpression="EmpCode" />
</Columns>
</asp:GridView>
Call the BindGridView Method in Page Load
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//Calling Bind Gridview..
BindGridView();
}
}
Bind Data to Gridview
//Bind Data From Data Base
private void BindGridView()
{
SqlConnection con = new SqlConnection("Data Source=TAPA-PC;user Id=sa;password=123;DataBase=Customer");
SqlDataAdapter mySqlAdapter = new SqlDataAdapter("select * from Employee", con);
DataSet myDataSet = new DataSet();
mySqlAdapter.Fill(myDataSet);
gvEmpdetails.DataSource = myDataSet;
gvEmpdetails.DataBind();
}
RowDataBound Event in Gridview
// RowDataBound Event in Gridview..
protected void gvEmpdetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
//This condition is used to check RowType is DataRow
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='orange'");
// This will be the back ground color of the GridView Control
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=''");
}
}
ScreenShots:
Subscribe to:
Post Comments (Atom)
0 Responses to “ASP.Net GridView Highlight Row onmouseover”
Post a Comment