GridView da Mouse İmleci Üzerindeki Satırın Stilini Değiştirmek
Merhaba arkadaşlar bu makalemizde GridView nesnesinde Mouse imlecinin üzerine geldiği satırın font özelliklerini, satırın arka plan rengini değiştireceğiz. Bun un için javascript kullanacağız. jquery.min.js javascript dosyasını projenizin bulunduğu klasöre ekleyin.
Screenshot
Şekil 1
Default.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindList();
}
}
protected void bindList()
{
SqlConnection con = new SqlConnection("Data Source=(LocalDB)\\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\\kategori.mdf;Integrated Security=True");
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from [dbo].[Table]", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>,
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1] td").hover(function () {
$("td", $(this).closest("tr")).addClass("change_rows");
}, function () {
$("td", $(this).closest("tr")).removeClass("change_rows");
});
});
</script>
<style type="text/css">
td
{
cursor: pointer;
}
.change_rows
{
background-color: red;
color: white;
font-size: 26px;
font-style:italic;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" HeaderStyle-BackColor="Orangered" HeaderStyle-ForeColor="White" runat="server" Height="292px" Width="786px">
<HeaderStyle BackColor="OrangeRed" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
Bir makalenin daha sonuna geldik. Bir sonraki makalede
görüşmek üzere. Bahadır ŞAHİN