LogoASPAlliance: Articles, reviews, and samples for .NET Developers
Selecting, Confirming and Deleting Multiple DataGrid items in ASP.NET
by Sameer Lal
Average Rating: 
Views (Total / Last 10 Days): 21575/ 26

Selecting, Confirming and Deleting Multiple Data Grid items

Always wanted to build an easy solution to select multiple items from an ASP.NET DataGrid and delete them all at once like hotmail does?  Well, it is built in just a few simple steps.


To start with, I am assuming that you are using an Access database in the backend and know how to populate DataGrid from database in ASP.NET.  If not, look at my other article for beginners "Basics of Displaying Database Items on Web in ASP.NET" that will be published soon.


Now, to create a selection checkbox in your data grid, first set up your data grid as you would do it normally by dragging and dropping from toolbox in to your webForm1.aspx page. Then right click on data grid and select property builder. Go to column property tab and add a template column to the list of selected columns keeping it on the top of the list. Set the header text value as Select or whatever you wish. Click OK when you are done.






Once you are back on your design page, again right click on data grid and this time you will see another option of edit template column. Click on to edit template column and drag and drop checkbox control into ItemTemplate portion and change its ID to “cbSelect” or whatever name you wish to give it.






When done, right click on it and choose “End Template Editing”. Now, you will see the difference in your data grid, the first column will show up as header “Select” and a checkbox in front of each row.  Now drag and drop a “button” above or below the DataGrid, and add a click event to the button.. You may name the button “Delete Selected”.


Note: My database has key field as SlNo (Serial Number) in tblxyz which is an auto number field and my delete operation will be based on this field. You can have some other field as your key field and you need to modify the codes wherever required.


 Now is the important portion, go to html page mode from design mode and add DataKeyField="SlNo"  after <asp:DataGrid id="DataGrid1" and your code would look something like this:


<body MS_POSITIONING="GridLayout" bgColor="#ccffff">

                        <form id="Form1" method="post" runat="server">

                                    <asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 112px" DataKeyField="SlNo"

                                                runat="server" AutoGenerateColumns="False" Width="464px" Font-Size="X-Small">

                                                <AlternatingItemStyle BackColor="#99FFFF"></AlternatingItemStyle>

                                                <HeaderStyle HorizontalAlign="Center" ForeColor="White" BackColor="DarkBlue"></HeaderStyle>


                                                            <asp:TemplateColumn HeaderText="Select">


                                                                                    <asp:CheckBox id="cbSelected" runat="server"></asp:CheckBox>








Now, again back to design view, drag and drop two oledbCommand controls and type this query in the command text of oleDBCommand1:

DELETE * FROM tblxyz WHERE SlNo =[@SlNo];


In CommandType select Text and in parameters, add a parameter @SlNo



And for oleDBCommand2, type in Command Text as:

SELECT * FROM tblxyz ;



Now, to code behind page, i.e. in my case, it is webform1.aspx.vb, add the following code:


Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        Dim objItem As DataGridItem


        For Each objItem In DataGrid1.Items


            If objItem.ItemType <> ListItemType.Header And objItem.ItemType <> ListItemType.Footer And objItem.ItemType <> ListItemType.Pager Then

                Dim ChkSelected1 As Boolean

                ChkSelected1 = CType(objItem.Cells(0).FindControl("cbSelected"), CheckBox).Checked


                If ChkSelected1 = True Then


                    Dim SlNo As Integer

                    SlNo = DataGrid1.DataKeys(objItem.ItemIndex).ToString()


OleDbCommand1.Parameters("@SlNo").Value = SlNo





                End If

            End If



        DataGrid1.EditItemIndex = -1



    End Sub


    Sub DataBind1()

        Dim adp As New OleDb.OleDbDataAdapter(OleDbCommand2)

        Dim ds As New DataSet


        DataGrid1.DataSource = ds



    End Sub


Also, if you want to pop up a confirmation message for deletion, like in hotmail, you can add the following codes to page_load sub:


Button3.Attributes("onclick") = "return confirm('Are you sure you _

wish to delete these records?');"



And, that is it. You now have a data grid with hotmail style checkboxes to select multiple records and delete them at once when you click Delete button.






Wait for my next article for beginners “Basics of Displaying Database Items on Web in ASP.Net”

Product Spotlight
Product Spotlight 

©Copyright 1998-2022  |  Page Processed at 2022-10-01 11:34:07 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search