Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail & Yahoo)

Getting Started

Our fully-featured DataGrid

Selecting & deleting multiple items will definitely be set up quite differently than any other type of .NET DataGrid deleting you probably have seen. However, we'll still follow the same logical flow of deletion, and we'll still confirm any delete actions about to take place after we have selected all our items. Much of the magic in making this work is really going to come from client-side JavaScript, that is ultimately responsible for wiring up our main "select all" checkbox to handle the selecting and deselecting of our checkboxes. Also, included is our server-side delete method that erases our data, and a DataGrid refresher method to rebind our DataGrid after we have completed our data deletion.

Have a look at Figure 1 to get an idea of what your DataGrid will look like:

Figure 1

Here is the code to set up our DataGrid:

<form runat="server" ID="Form1">
    <h3>Selecting, Confirming &amp; Deleting Multiple Checkbox Items In A DataGrid
        (i.e. HotMail &amp; Yahoo)</h3>
    <br>
    <ASP:DataGrid id="MyDataGrid" runat="server" Width="700" BackColor="white" BorderColor="black"
        CellPadding="3" CellSpacing="0" Font-Size="9pt" AutoGenerateColumns="False" HeaderStyle-BackColor="darkred"
        HeaderStyle-ForeColor="white">
        <Columns>
<asp:TemplateColumn>
                <HeaderTemplate>
                    <asp:CheckBox ID="CheckAll" OnClick="javascript: return select_deselectAll (this.checked, this.id);"
                        runat="server" />
                    <font face="Webdings" color="white" size="4">a</font>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox ID="DeleteThis" OnClick="javascript: return select_deselectAll (this.checked, this.id);"
                        runat="server" />
                </ItemTemplate>
            </asp:TemplateColumn>
// ... Rest of our Custom Template & Bound Columns
</Columns>
</form>

The code listed above is what makes our DataGrid set up behave just like the grids on Hotmail and Yahoo. Our .NET DataGrid will have the same functionality and options available for selecting however many items, or perhaps all, that you'd like to delete, and once you do and submit, kiss them goodbye.

You might also like...

Comments

About the author

Dimitrios Markatos

Dimitrios Markatos United States

Dimitrios, or Jimmy as his friends call him, is a .NET developer/architect who specializes in Microsoft Technologies for creating high-performance and scalable data-driven enterprise Web and des...

Interested in writing for us? Find out more.

Contribute

Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“I invented the term Object-Oriented, and I can tell you I did not have C++ in mind.” - Alan Kay