2009-01-06
I wanted to select multiple rows of the grid view using check boxes to select each row.
In this post I will discus how and what I did to achieve this goal…
I used a template column which holds a check box to select or de-select a row in the grid view.
Adding a Template Column:
There are several simple ways to add a template column/field to your grid view:
- Select your grid view and then click on the small task button (the small square button located to the top right corner of the grid view control) and select “Add New Column…” from the “GridView Tasks” box.
- Use “TemplateField” as the field type
- Provide a header text
- click ok
- Or… Select “Edit Columns…” from the “GridView Tasks” box and
- Select “TemplateField” from the “Available fields: ” section
- Click “Add” button
- Provide a header text in the “TemplateField properties: ” section
- click ok
- Or… Select “Columns” from the grid view properties and follow the steps described in the earlier method (2nd one)
Adding a Checkbox to the Template Column:
- Select “Edit Templates” from the “GridView Tasks” box. Then it will show you the inside of the template.
- Select “Item Template” from the “Display: ” drop down list.
- Drag and drop a check box in the item template area.
- Give an id as “chkid” for the check box – You can use a different name if you want but make sure you don’t confuse when I use this name in later parts of this article.
- Click “End Template Editing” from the “GridView Tasks” box.
If you have completed the above steps correctly, you should see the expected checkbox column added in to the grid view.
As you can see in the image above, in my example I use a Name column along with the check box column to make this clearer.
How to Databind the Template Field:
I use a datatable to populate the gridview so we have to databind our two columns.
The second column name is a “BoundField” so to databind it simply specify the name of the data table column you want to bind to this column in “DataField” property under “Data” property set in the fields dialog box you get when adding the second column (use one of the ways I described above to add a column).
Databinding the template field is a bit tricky, but not hard.
- Click “Edit Templates” from the “GridView Tasks” box so that you will see the check box.
- Click on the small button with a triangle in the upper right corner of the check box which is similar to the one we clicked on the grid view to get the “Checkbox Tasks” box and then click on the “Edit Databindings…” link inside that box.
You can use this dialog box to bind any property of the control to a data source column
In this example we will bind the “Checked” property of our check box to a Boolean column called “Selected” of the data source.
For that:
- Select “Checked” from the Bindable Properties section and enter following in the Custom Binding section:
- DataBinder.Eval(Container, “DataItem.Selected“)
- Note: the word “Selected” (in red color) refers to the “Selected” field of the data source.
Populating the GridView:
As I described earlier I create a simple data table in the page load, populate it with some dummy data and then bind the grid view with it.
Note: I have used several methods to add data to a table to illustrate those to you.
The Code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("Selected", System.Type.GetType("System.Boolean")));
dt.Columns.Add(new DataColumn("Name", System.Type.GetType("System.String")));
DataRow dr = dt.NewRow();
dr.ItemArray = new object[] { false, "Cassian" };
dt.Rows.Add(dr);
dt.Rows.Add(new object[] { false, "Menol" });
dt.Rows.Add(new object[] { false, "Razeek" });
this.GridView1.DataSource = dt;
this.GridView1.DataBind();
}
}
There are several things that I’d like to bring to your notice:
- I have checked for postback to make sure this data population is not occurred in general post backs. The reason is the framework refreshes when the grid view is re-bound.
- So if we don’t do this check, whenever we click on a check box, a postback occurs, the grid gets refreshed, the check boxes get cleared, we cannot keep track of what check boxes are selected…!
- As illustrate in my code, you can either first populate a datarow and then add it to the datatable
- Or you can directly add the items using only one line of code.
Retrieving the Status of Checkboxes:
Now we have completed the interface and the user now can select several rows of the grid view using the appropriate check box.
The next step is to capture the rows that the user has selected.
In my example, I have used a button, once clicked; it will display the list of names of the selected people.
I will introduce the code first and then explain it to you.
protected void Button1_Click(object sender, EventArgs e)
{
ArrayList names = new ArrayList();
foreach (GridViewRow gvr in this.GridView1.Rows)
{
if (((CheckBox)gvr.FindControl("chkid")).Checked == true)
{
names.Add(gvr.Cells[1].Text);
}
}
this.Label1.Text = string.Empty;
foreach (object itm in names)
{
this.Label1.Text += " " + itm.ToString();
}
}
Note following:
- The code iterates through each row of the grid view using a for each loop, takes the Name field from the selected rows and then adds those names into a arraylist
- The GridViewRow refers to a single row in a grid view
- Control Control.FindControl(string controlID) – GridViewRow class provides this method to find a specific control within a grid view row. This method becomes very handy in situations like this where we cannot directly access the control from the code because those are generated at run time
- FindControl returns a control so you have to explicitly cast the returned control to the type of it
Screen Shot:
Conclusion:
We can use a template field with a checkbox to allow user to select multiple rows using checkboxes associated to each row. When the button is clicked, checkbox of each row is checked for its status and the row is selected if the user has chosen it.
Was this post helpful to you? How can I improve? – Your comment is highly appreciated!
Cassian Menol Razeek
