Merhaba arkadaşlar bu makalemizde GridView nesnesinde checkbox kullanarak tüm veya istediğimiz satırları seçeceğiz. Seçili satırın arka plan rengini değiştireceğiz. Ayrıca satırın fontunu değiştireceğiz. Seçili satırın yazı karakterini italik yapacağız. Bunun için jquery.min.js javascriptini kullanacağız.
Şekil 1
Şekil 2
WebForm1.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
namespace gridview_highlight_checkbox
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
bindData();
}
}
private void bindData()
{
SqlConnection con = new SqlConnection("Data Source=sirius\\SQLEXPRESS;Initial Catalog=master;User ID=sa;Password=1234;Integrated Security=true");
con.Open();
SqlCommand cmd = new SqlCommand("Select * From dbo.person ", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
}
WebForm1.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="gridview_highlight_checkbox.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.highlight {
width: 100%;
background-color: #00ffff;
font-style:italic;
font-size: 16px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="javascript/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var chkAll = $('#chkHeader').click(function () {
//Check header and gridview checkboxes on click of header checkbox
//Sutundaki checkbox a tiklanildiginde baslik ve gridviewdaki //checkbox lar secilir.
chkItem.prop('checked', $(this).is(':checked'));
});
var chkItem = $('[id*=chkItems]').click(function () {
//If any of the gridview checkbox is unchecked then uncheck header's checkbox also
//Herhangi bir gridview daki checkbox secilmemisse o zaman basliktaki checkbox ta secili degil
chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
});
});
$(document).on('click', '#chkHeader', function () {
if ($(this).is(":checked")) {
//If header checkbox is checked then
//add class 'highlight' to each row of table
//Basliktaki checkbox secili ise o zaman tablonun her bir //satiri icin higlight sinifi eklenir.
$('#GridView1 tr').addClass('highlight');
}
else {
$('#GridView1 tr').removeClass('highlight');
}
});
$(document).on('click', '#chkItems', function () {
if ($(this).is(":checked")) {
//If checkbox is checked then add
//class 'highlight' to the row where checkbox was checked
//checkbox secili ise o zaman checkbox ın secilmis oldugu yerde //ki satira highlight sinifi eklenir.
$(this).closest('tr').addClass('highlight');
}
else {
$(this).closest('tr').removeClass('highlight');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" Height="531px" Width="684px" >
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkHeader" class="header" />
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" id="chkItems" class="item" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="First Name" DataField="Name" />
<asp:BoundField HeaderText="Last Name" DataField="Surname" />
<asp:BoundField HeaderText="Mail" DataField="Contact" />
</Columns>
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
</div>
</form>
</body>
</html>
Bir makalenin daha sonuna geldik. Bir sonraki makalede görüşmek üzere. Bahadır ŞAHİN
0 comments:
Yorum Gönder