<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<head>
<title>Enabling Multiple Item Deletions in a DataGrid</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="C#" runat="server" src="fetchData_sql.cs" />
<script language="C#" runat="server">
void Page_Load ( Object src, EventArgs e ) {
if ( !IsPostBack ) {
// fetch data
string query = "SELECT SupplierID, CompanyName, ContactName, Address FROM Suppliers";
DataTable myTable = ( fetchData ( query ) ).Tables [ 0 ];
// set primary key in data source
DataColumn [ ] keys = new DataColumn [ 1 ];
keys [ 0 ] = myTable.Columns [ "SupplierID" ];
myTable.PrimaryKey = keys;
// store data into Session
Session [ "myTable" ] = myTable;
// bind grid to Session data source
myGrid.DataSource = Session [ "myTable" ];
myGrid.DataBind ( );
// optional record count
msg.InnerText = "Current record count is " + myGrid.Items.Count;
}
}
void deleteItems ( Object src, EventArgs e ) {
// load data from Session
DataTable myTable = ( DataTable ) Session [ "myTable" ];
// initialize counter
int deleted = 0, knt = myGrid.Items.Count;
if ( ( ( HtmlInputCheckBox ) myGrid.Controls [ 0 ].Controls [ 0 ].FindControl ( "cbAll" ) ).Checked ) {
myTable.Clear ( );
deleted = knt;
}
else {
// get rows collection
DataRowCollection myRows = myTable.Rows;
// loop thru each datagrid item and see if item should be deleted.
foreach ( DataGridItem item in myGrid.Items ) {
HtmlInputCheckBox cbItem = ( HtmlInputCheckBox ) item.FindControl ( "cbItem" );
if ( cbItem.Checked ) {
// get key to find in data source
string supplierID = myGrid.DataKeys [ item.ItemIndex ].ToString ( );;
// get row to delete in data source
DataRow thisRow = myRows.Find ( supplierID );
// for demo purposes, the next statement removes the item
// only in the Session dataset bound to the grid, not in the database ...
// in actual practice, though, you can instead
// call a method to delete the rows in the database here ...
if ( thisRow != null ) myRows.Remove ( thisRow );
deleted ++;
}
}
}
// refresh data in Session
Session [ "myTable" ] = myTable;
// rebind grid to updated data in Session
myGrid.DataSource = Session [ "myTable" ];
myGrid.DataBind ( );
myGrid.Visible = ( myGrid.Items.Count > 0 );
// optional record count
msg.InnerText = deleted + " of " + knt +
( ( knt > 1 ) ? " records " : " record " ) +
"deleted. Current record count is " + myGrid.Items.Count;
}
</script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Enabling Multiple Item Deletions in a DataGrid</h2></div>
<hr size=1 width=92%>
<div align="center">
<form runat="server">
<p><div id="msg" runat="server" /></p>
<asp:datagrid id="myGrid" runat="server"
width=90% gridlines="both" cellpadding=3
datakeyfield="supplierid"
autogeneratecolumns=false
backcolor="ghostwhite">
<headerstyle backcolor="darkslategray" />
<itemstyle font-size="9pt" />
<columns>
<asp:templatecolumn>
<headertemplate>
<input type="checkbox" id="cbAll" runat="server"
onclick="setAll ( this )">
<span style="color:khaki; font-weight:bold"> Set All</span>
</headertemplate>
<itemtemplate>
<input type="checkbox" id="cbItem" runat="server"
onclick="setProps ( this )"
value='<%# Eval ( "CompanyName" ) %>'>
<%# Eval ( "CompanyName" ) %>
</itemtemplate>
</asp:templatecolumn>
<asp:boundcolumn
datafield="contactname" />
<asp:templatecolumn>
<headertemplate>
<div align="right"><input type="button" id="btnDelete"
runat="server" value="Delete" disabled
onServerClick="deleteItems"></div>
</headertemplate>
<itemtemplate>
<%# Eval ( "Address" ) %>
</itemtemplate>
</asp:templatecolumn>
</columns>
</asp:datagrid>
<script language="JScript">
var itemsKnt = <%= myGrid.Items.Count %>;
var form = document.forms [ 0 ];
function setAll ( e ) {
var eState = e.checked;
for ( i = 0; i < form.length; i++ ) {
e = form.elements [ i ];
if ( e.name.indexOf ( "btnDelete" ) > -1 ) e.disabled = ! ( eState );
if ( e.name.indexOf ( "cbItem" ) > -1 ) {
e.checked = eState;
e.parentElement.parentElement.style.backgroundColor =
( e.checked ? 'beige' : '' );
}
}
msg.innerText = eState ? itemsKnt + " of " + itemsKnt +
( ( itemsKnt > 1 ) ? " records " : " record " ) + "selected. " :
"No record selected. Current record count is " + itemsKnt;
}
function setProps ( e ) {
e.parentElement.parentElement.style.backgroundColor =
( e.checked ? 'beige' : '' );
var selKnt = 0;
for ( i = 0; i < form.length; i++ ) {
e = form.elements [ i ];
if ( e.name.indexOf ( "cbItem" ) > -1 ) {
if ( e.checked ) selKnt ++;
msg.innerText = ( selKnt > 0 ) ? selKnt + " of " + itemsKnt +
( ( itemsKnt > 1 ) ? " records " : " record " ) + "selected. " :
"No record selected. Current record count is " + itemsKnt;
}
}
for ( i = 0; i < form.length; i++ ) {
e = form.elements [ i ];
if ( e.name.indexOf ( "cbAll" ) > -1 ) {
e.checked = ( selKnt == itemsKnt );
break;
}
}
for ( i = 0; i < form.length; i++ ) {
e = form.elements [ i ];
if ( e.name.indexOf ( "btnDelete" ) > -1 ) {
e.disabled = ( selKnt == 0 );
break;
}
}
}
</script>
</form>
</div>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>