JAL Computing

Multi-Select Using Check Boxes

This is a standalone project that demonstrates how to add a Check Box column to a Datagrid. The code demonstrates how to extract the checked (selected) rows and display the row IDs in a message box. You could use this technique to do a multi-row delete or a multi-row insert into a shopping cart.

Download the Project Here

This is a 38K zip file that should download in less than one minute at 28.8. This is a sample C# ASP .NET project. Requires SQL7 or MSDE and the "Pubs" database. Tested on Windows XP Pro and VS .NET Pro against IE5.0 and NS4.7.

TestCB.zip

DISCLAIMER

TestCB is provided for educational use only and is distributed AS IS. No suggestion or promise of suitability, reliability or correctness of this software is expressed or implied for any purpose other than private non-commercial educational use. The user and or installer of this software assume(s) any and all responsibility for damages and or losses resulting from the installation and or use of this software. The installation and or use of this software shall signify consent with this disclaimer.

Add a Custom Column to a DataGrid

You can add a column containing a checkbox by manually editing the asp tags using the HTML view. Here is the code (in red) that actually creates the custom column. The TemplateColumn attribute is used to create a custom column and supports custom headers, items and footers. This snippet of code demonstrates how to add a custom header ("Select") using the HeaderTemplate tag and a Check Box using the ItemTemplate tag.

<asp:DataGrid id=DataGrid1 runat="server" DataSource="<%# dataSet11 %>" 
DataKeyField="au_id" AutoGenerateColumns="False">
	<Columns>
		<asp:TemplateColumn>
			<HeaderTemplate>
				<b>Select</b>
			</HeaderTemplate>
			<ItemTemplate>
				<asp:CheckBox ID="checkboxSelect" CommandName="CheckBoxItem" 
Runat="server"></asp:CheckBox>
			</ItemTemplate>
		</asp:TemplateColumn>
		<asp:BoundColumn DataField="au_lname" SortExpression="au_lname" 
HeaderText="au_lname"></asp:BoundColumn>
		<asp:BoundColumn DataField="au_fname" SortExpression="au_fname" 
HeaderText="au_fname"></asp:BoundColumn>
		<asp:BoundColumn DataField="phone" SortExpression="phone" 
HeaderText="phone"></asp:BoundColumn>
	</Columns>
</asp:DataGrid>

Create the Layout

Again, this project uses FlowLayout and nested tables to create a layout that works with both IE5.0 and Netscape 4.7 The layout simply includes a message box, a DataGrid and two buttons ("buttonClear" and "buttonSelected"). The message box is used to display the selected rows.

Implement the Page Load Method

Here is the page load method:

private void Page_Load(object sender, System.EventArgs e)
{
	// Put user code to initialize the page here
	textboxMessage.Text= "";
	sqlDataAdapter1.Fill(dataSet11);
	if (!IsPostBack) 
	{
		DataGrid1.DataBind();
	}
}

One every page load, the message box text is cleared and the DataSet is refreshed from the database by the call to Fill. However, the DataGrid is bound to the DataSet only on the initial page load, so any user changes are persisted on post back.

Create the Event Handlers

The button event handlers were added by double clicking on the buttons "Get Selected" and "Clear Selected". The IDE automatically generated the event handlers buttonSelect_ServerClick and buttonClear_ServerClick. The buttonClear event handler is rather straightforward:

protected void buttonClear_ServerClick(object sender, System.EventArgs e)
{
	DataGridItemCollection items=DataGrid1.Items;
	for (int i=0; i<items.Count; i++) 
	{
		CheckBox cb= (CheckBox)items[i].FindControl("checkboxSelect");
		if ((cb != null) && cb.Checked) 
		{
			cb.Checked= false;
		}
	}
}

You call DataGrid1.Items to return a collection of DataGrid items that make up the DataGrid. You then iterate over the collection using items.Count. You then use the overloaded FindControl method to return the check box in each item using the check box ID value "checkboxSelect". Finally, you clear any checked boxes.

The buttonSelect handler is very similar to the buttonClear handler:

protected void buttonSelect_ServerClick(object sender, System.EventArgs e)
{
	StringBuilder sb= new StringBuilder("Selected Items\r");
	DataGridItemCollection items=DataGrid1.Items;
	for (int i=0; i<items.Count; i++) 
	{
		CheckBox cb= (CheckBox)items[i].FindControl("checkboxSelect");
		if ((cb != null) && cb.Checked) 
		{
			sb.Append(DataGrid1.DataKeys[i].ToString()+"\r");
		}
	}
	string debug= sb.ToString();
	textboxMessage.Text= debug;
}

Not the use of the "mutable" StringBuilder class for more efficient string concatenation. Again, you iterate over the items in the DataGrid looking for rows with a "checked" check box. Instead of clearing the check box, you can extract the primary key of the selected row and add it to the StringBuilder using the DataGrids DataKeys collection. To get this to work, the primary key "au_id" must be declared as the DataGrid's DataKeyField. Here is the asp tag that sets the DataKey:

<asp:DataGrid id=DataGrid1 runat="server" DataSource="<%# dataSet11 %>" 
DataKeyField="au_id" AutoGenerateColumns="False">

Finally, the list of selected rows in the StringBuilder is written to the message box:

string debug= sb.ToString();
textboxMessage.Text= debug;

Thats it!

Have fun,
Jeff

Hosted by www.Geocities.ws