Asp.Net Gridview Tıklanan Satırı Renklendirme

Bir önceki örneğimizde Asp.Net Gridview Seçili Satırı Renklendirme işleminden bahsetmiştik burada seçme işlemini kullanabilmek için Gridview içine Seçim için
< asp:ButtonField Text = "Seç" CommandName = "Select" /> eklemiştik, şimdi ise seçme işlemi için JQuery ve JavaScript kullanacağız Gridview üzerinde tıklanan bir satırı seçili hale getirmek veya renklendirmek için ilk olarak bir Gridview ekliyoruz

<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White" runat="server" >
</asp:GridView>

Gridview de tıklanan satırın rengini değiştirmek için kullanacağımız javascript kodları

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=GridView1] td").bind("click", function () {
            var row = $(this).parent();
            $("[id*=GridView1] tr").each(function () {
                if ($(this)[0] != row[0]) {
                    $("td", this).removeClass("selected_row");
                }
            });
            $("td", row).each(function () {
                if (!$(this).hasClass("selected_row")) {
                    $(this).addClass("selected_row");
                } else {
                    $(this).removeClass("selected_row");
                }
            });
        });
    });
</script>

Tıklanan gridview’in değişecek olan rengini belirlemek için kullanacağımız style kodlarımız

<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    td
    {
        cursor: pointer;
    }
    .selected_row
    {
        background-color: #A1DCF2;
    }
</style>

Son olarak da gridview içini veritabanı içindeki bilgilerimizle dolduruyoruz

protected void Page_Load(object sender, EventArgs e)
        {
            OleDbConnection baglanti = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/personel.accdb"));
            baglanti.Open();
            //www.aspnetornekleri.com
            OleDbCommand komut = new OleDbCommand("Select ADI,GOREVI,UCRET,GIRIS_TAR from personel", baglanti);
            GridView1.DataSource = komut.ExecuteReader();
            GridView1.DataBind();
            baglanti.Close();
        }