Checkbox in GridView

How to Select Record(s) Using Checkboxes and Delete on Confirmation in GridView

Background

(Optional) Is there any background to this article that may be useful such as an introduction to the basic ideas presented?

Using the code

Use Following Code Step By Step.

Step 1 – Create User Interface

Let us drag and drop the GridView control. We will have the headerTemplate with checkbox to select or deselect all or no records respectively. In the ItemTemplate we will allow the user to select one or many records when he/she checks the checkbox(s).

To select or deselect the records we will use JavaScript.

Listing 1

<asp:GridView ID="GridView1" datakeyname="Employeeid" runat="server" DataSourceID="Sqldatasource1">

<Columns>

<asp:TemplateField>

<HeaderTemplate>

<asp:CheckBox ID="CheckAll" onclick="return check_uncheck (this );" runat="server" />

</HeaderTemplate>

<ItemTemplate>

<asp:Label ID="EmpID" Visible="false"

Text='<%# DataBinder.Eval (Container.DataItem, "employeeID") %>'

runat="server" />

<asp:CheckBox ID="deleteRec" onclick="return check_uncheck (this );"

runat="server" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

On the click of the button we will get the confirmation from the user which is as below:

Listing 2

<asp:Button ID="Button1" runat="server" OnClientClick="return confirmMsg(this.form)"

Text="Button" OnClick="Button1_Click" />

We will use the Employees table from Northwind database. We will set the SqlDataSource as below:

Listing 3

<asp:SqlDataSource ID="Sqldatasource1" runat="server"

SelectCommand="Select employeeid,firstname,lastname from Employees"

ConnectionString="Server=localhost;uid=sa;password=;database=Northwind">

</asp:SqlDataSource>

Step 2 – JavaScript

Let us move to the JavaScript part of the code.

We will see the code for the check_uncheck function given in the Checkbox that is in the <HeaderTemplate> and also the <ItemTemplate>. Explanation is given inline in the code.

Listing 4

Collapse

function check_uncheck(Val)

{

var ValChecked = Val.checked;

var ValId = Val.id;

var frm = document.forms[0];

// Loop through all elements

for (i = 0; i < frm.length; i++)

{

// Look for Header Template's Checkbox

//As we have not other control other than checkbox we just check following statement

if (this != null)

{

if (ValId.indexOf('CheckAll') != - 1)

{

// Check if main checkbox is checked,

// then select or deselect datagrid checkboxes

if (ValChecked)

frm.elements[i].checked = true;

else

frm.elements[i].checked = false;

}

else if (ValId.indexOf('deleteRec') != - 1)

{

// Check if any of the checkboxes are not checked, and then uncheck top select all checkbox

if (frm.elements[i].checked == false)

frm.elements[1].checked = false;

}

} // if

} // for

} // function

Now the Delete confirmation method:

Listing 5

function confirmMsg(frm)

{

// loop through all elements

for (i = 0; i < frm.length; i++)

{

// Look for our checkboxes only

if (frm.elements[i].name.indexOf("deleteRec") != - 1)

{

// If any are checked then confirm alert, otherwise nothing happens

if (frm.elements[i].checked)

return confirm('Are you sure you want to delete your selection(s)?')

}

}

}

Step 3- Code behind

In the code behind on the click of the button we can code as:

Listing 6

[Visual Basic 2005]

Collapse

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) _

Handles Button1.Click

Dim gvIDs As String = ""

Dim chkBox As Boolean = False

'Navigate through each row in the GridView for checkbox items

For Each gv As GridViewRow In GridView1.Rows

Dim deleteChkBxItem As CheckBox = CType(gv.FindControl("deleteRec"), CheckBox)

If deleteChkBxItem.Checked Then

chkBox = True

gvIDs + = CType(gv.FindControl("EmpID"), Label).Text.ToString + ","

End If

Next

Dim cn As SqlConnection = New SqlConnection(Sqldatasource1.ConnectionString)

If chkBox Then

Try

Dim deleteSQL As String = _

"DELETE from employees WHERE employeeid IN (" + _

gvIDs.Substring(0, gvIDs.LastIndexOf(",")) + ")"

Dim cmd As SqlCommand = New SqlCommand( deleteSQL, cn )

cn.Open()

cmd.ExecuteNonQuery()

GridView1.DataBind()

Catch Err As SqlException

Response.Write(Err.Message.ToString)

Finally

cn.Close()

End Try

End If

End Sub

[C#]

Collapse

protected void Button1_Click(object sender, EventArgs e)

{

string gvIDs = "";

bool chkBox = false;

//'Navigate through each row in the GridView for checkbox items

foreach (GridViewRow gv in GridView1.Rows)

{

CheckBox deleteChkBxItem = (CheckBox)gv.FindControl("deleteRec");

if (deleteChkBxItem.Checked)

{

chkBox = true;

// Concatenate GridView items with comma for SQL Delete

gvIDs += ((Label)gv.FindControl("EmpID")).Text.ToString() + ",";

}

}

SqlConnection cn = new SqlConnection(Sqldatasource1.ConnectionString);

if (chkBox)

{

// Execute SQL Query only if checkboxes are checked to avoid any error with initial null string

try

{

string deleteSQL = "DELETE from employees WHERE employeeid IN (" +

gvIDs.Substring(0, gvIDs.LastIndexOf(",")) + ")";

SqlCommand cmd = new SqlCommand(deleteSQL, cn);

cn.Open();

cmd.ExecuteNonQuery();

GridView1.DataBind();

}

catch (SqlException err)

{

Response.Write(err.Message.ToString());

}

finally

{

cn.Close();

}

}

}




Call friends with PC-to-PC calling -- FREE
Try it now!

No comments: