Friday 2 August 2013

ASP.Net GridView Highlight Row or Change Rows Color on CheckBox Checked and MouseOver in Asp.Net




Description:-
           
                        In this Example we Explain that How to change BackGround-Color of Row when  checkbox is checked or mouse is over to paticular row  in Gridview. When user Checkmark the CheckBox then its color are set as Yellow.

you can easily do this facility by using javascript and reduced the load on the webserver.

In which User can Select Multiple Row or Record by using CheckBox Selection. You can also Select All Row or Deselect All Row By Using Header CheckBox Define in Gridview.

this facility is very useful when user have to select only those row based on criteria at that time user select multiple row from All row and after selection user can see all selected row with easily because of the color chane in background of the row so user can easily work with data in gridview. 

Here is a code that How to Display CheckBox in Gridview Header Template like

<asp:TemplateField HeaderText="Delete All">
       <HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server"
              AutoPostBack="true" OnCheckedChanged="c1"
              />
</HeaderTemplate>

       <ItemTemplate>
           <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="c2" />
       </ItemTemplate>
       </asp:TemplateField>

Here we Define CheckBox Selection Changed Event in which we Check All the Row is Checked or not  CheckBox are Selected by user so we can set BackGround Color easily.

to show Example of How to Sorting Data or row based on Coloum name in gridview Sorting Data in Gridview

to show Example of How to Dynamically create row and bind to gridview DataTable Example for create and bind to gridview

to show Example of How to Rotate the Ads without refresh the page Rotate Advertise in Asp.Net



GridView:-



<asp:GridView ID="GridView1" runat="server" CellPadding="4" Font-Bold="True"
        Font-Size="Large" ForeColor="#333333" GridLines="None"
        AutoGenerateColumns="False">
        <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
    <Columns>
   
     <asp:TemplateField HeaderText="Delete All">
       <HeaderTemplate>
<asp:CheckBox ID="chkSelectAll" runat="server"
              AutoPostBack="true" OnCheckedChanged="c1"
              />
</HeaderTemplate>

       <ItemTemplate>
           <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="c2" />
       </ItemTemplate>
       </asp:TemplateField>

    <asp:TemplateField Visible="false">
    <ItemTemplate>
     <asp:Label ID="Label2" runat="server" Text='<%# Eval("id") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    <asp:TemplateField HeaderText="List of Collages">
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
        <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
        <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
        <EditRowStyle BackColor="#999999" />
        <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>



Code Behind:-



using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class selection : System.Web.UI.Page
{
    DataTable ds;
    DataTable dt,dt1;
    protected void Page_Load(object sender, EventArgs e)
    {
       
    
        if (!Page.IsPostBack)
        {
            Session["dtd"] = null;
        ds = new DataTable();

        string con = @"Data Source=SQLDB;Initial Catalog=Demo;User ID=Demoh;Password=Demo1@";

            string q = "select * from collage";
                      SqlConnection conn = new SqlConnection(con);

            SqlCommand cmd = new SqlCommand(q, conn);
          

            SqlDataAdapter sa = new SqlDataAdapter();
            conn.Open();
           
                cmd.ExecuteNonQuery();
                sa.SelectCommand = cmd;
                sa.Fill(ds);
                GridView1.DataSource = ds;
                GridView1.DataBind();
                Session["dtd"] = ds;

        }
       
    }
  
 
  protected void c1(object sender, EventArgs e)
    {
        dt = Session["dtd"] as DataTable;
        CheckBox chkAll =
   (CheckBox)GridView1.HeaderRow.FindControl("chkSelectAll");
        if (chkAll.Checked == true)
            for (int i = 0; i < dt.Rows.Count; i++)
            {

                CheckBox c = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
                c.Checked = true;
                GridView1.Rows[i].Style.Add("BackGround-Color", "yellow");
            }
        else
        {
            for (int i = 0; i < dt.Rows.Count; i++)
            {

                CheckBox c = (CheckBox)GridView1.Rows[i].FindControl("CheckBox1");
                c.Checked = false;
                GridView1.Rows[i].Style.Add("BackGround-Color", "white");
            }
        }



    }
  
    protected void c2(object sender, EventArgs e)
    {
        CheckBox btndetails = sender as CheckBox;
        GridViewRow row = (GridViewRow)btndetails.NamingContainer;
        CheckBox l1 = (CheckBox)row.FindControl("CheckBox1");
        if (l1.Checked)
            row.Style.Add("BackGround-Color", "yellow");
        else
            row.Style.Add("BackGround-Color", "white");
       
    }
  
}

 

2 comments:

  1. You can select row while mouse over...

    e.Row.Attributes["onmouseover"] = "this.style.backgroundColor='aquamarine';";

    full source :

    GridView Select Row


    asp.net tutorial


    ReplyDelete