AspAlliance.com LogoASPAlliance: Articles, reviews, and samples for .NET Developers
URL:
http://aspalliance.com/articleViewer.aspx?aId=427&pId=-1
Selecting, Confirming and Deleting Multiple DataGrid items in ASP.NET
page
by Sameer Lal
Feedback
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>

                                                <Columns>

                                                            <asp:TemplateColumn HeaderText="Select">

                                                                        <ItemTemplate>

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

                                                                        </ItemTemplate>

                                                            </asp:TemplateColumn>……

……………………………

………………………………………..

 

 

 

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

OleDbConnection1.Open()

OleDbCommand1.ExecuteNonQuery()

OleDbConnection1.Close()

 

                End If

            End If

 

        Next

        DataGrid1.EditItemIndex = -1

        DataBind1()

        Response.Redirect("webform1.aspx")

    End Sub

   

    Sub DataBind1()

        Dim adp As New OleDb.OleDbDataAdapter(OleDbCommand2)

        Dim ds As New DataSet

        adp.Fill(ds)

        DataGrid1.DataSource = ds

        DataGrid1.DataBind()

       

    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 ASPAlliance.com  |  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