Members

Technology Zones

IBM Learning Center

Articles

Hosted By

MaximumASP

Info
Rated
Read 193,151 times
5 comments

Contents

Related Categories

Selecting, Confirming & Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail & Yahoo) - Selecting and De-Selecting our Checkboxes

DMarko1

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;
            }
            else
            {
                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.

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 desktop applications. Till now Jimmy has authored nearly two dozen .NET articles, published on Dot Net Junkies, 4 Guys From Rolla, Sitepoint, MSDN Academic Alliance, Developers.NET, The Official Microsoft ASP.NET Site, and here on Developer Fusion, covering various unique and advanced techniques on .NET.

Comments

Read Comments | Post Comment

  • Re: datagrid having multiple checkboxes with confirm d

    Posted by suhasini51 on 05 Dec 2006

    Hi,


      I required the same concept as in yahoomail.i am getting checkall and uncheckall in the grid.if all the items in the grid manually is checked then automatically the header c...

  • Re: [4632] Selecting, Confirming &amp; Deleting Multiple Checkbox Items In A DataGrid (i.e. HotMail &amp; Yahoo)

    Posted by Shafiqm on 25 Apr 2006

    I like your article regarding checkboxes. I have very interesting situation, can you please help me how I can solve this.


    My Gridview contains a template column which contains a checkboxlis...

  • Posted by ttvan01 on 03 Nov 2005

    Holly10sun,

    Can i ask what you did to get the selecting of each box to work? I also removed the Select All option, by removing the onclick/OnCheckedChanged from the HTML, but that alone didn't do...

  • multi check box in VB

    Posted by holly10sun on 03 Nov 2005

    I don't know if anyone got through this error. I was not able to fix the issue with the regiis suggestion either. I just took out the ability to click on box to select all and made the user select e...

  • javascript not a member of...

    Posted by ttvan01 on 02 Nov 2005

    I get the same javascript error. Tried running aspnet_regiis -i, but that didn't do the trick. did anyone else get this same error, if so how did you resolve it?