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

Selecting and De-Selecting our Checkboxes

Now that both checkboxes are wired to our multi-faceted JavaScript method, how is that one function going to determine the checkbox its dealing with, and the action it needs to carry out? Ah, here's how :-)

Our function select_deselectAll, listed below, accepts two arguments: the Checkbox's checked value, and its ID. Once this function is called, and its two arguments have been passed in, it'll begin looping through our form. Next, it begins performing some conditional checking utilizing JavaScript's indexOf method to locate the appropriate checkbox, and is based on both the values passed in, which it turn ultimately will give us one of several causes and effects:

  1. If the main "select all" checkbox is checked, it will select all of the DataGrid checkboxes
  2. If the main "select all" checkbox is unchecked, then all of the DataGrid checkboxes get unselected
  3. Finally, if after the main "select all" checkbox is selected and all of the DataGrid's checkboxes are all checked, any one of those checkboxes gets unchecked, then the main checkbox is also unchecked. This way we don't end up having our checkbox's logic behaving inconsistently or erratically.
function select_deselectAll (chkVal, idVal)
    var frm = document.forms[0];
    // Loop through all elements
    for (i=0; i<frm.length; i++)
        // Look for our Header Template's Checkbox
        if (idVal.indexOf ('CheckAll') != -1)
            // Check if main checkbox is checked, then select or deselect datagrid checkboxes
            if(chkVal == true)
                frm.elements[i].checked = true;
                frm.elements[i].checked = false;
            // Work here with the Item Template's multiple checkboxes
        else if (idVal.indexOf ('DeleteThis') != -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; //Uncheck main select all checkbox


Figure 2 shows you the effect of the JavaScript above interacting with the DataGrid when selecting the top main "select all" checkbox.

Figure 2

Now, aside from this function allowing a quick full selection, you also have the option of manually selecting as many checkbox items as you wish. Next comes the tricky part in how to determine which ones were selected, and how to confirm this the instant you submit the form, and prior to actual deletion.

You might also like...


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.


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.

“You can stand on the shoulders of giants OR a big enough pile of dwarfs, works either way.”