KaushaL.NET

(CheckBox in HeaderTemplate to) Select All CheckBoxes inside a GridView using JavaScript

Posted by: Kaushal on: July 16, 2008

In one of my previous blog post, I Described about Mutually Exclusive CheckBox inside GridView.

In this example, there is a “Select All” checkbox in header to select/deselect all the checkboxes inside GridView. MoreOver, if user select all the checkboxes manually one by one, then header checkbox should automatically be selected and vice versa.

Here is the Scenario; There is one TemplateColumn in GridView which is used to Select Row within GridView. So, There will be CheckBox inside ItemTemplate of that TemplateColumn. User would be able to select more than one CheckBox in that Column. And to Select All the CheckBoxes of that colum, There will be a “Select All” CheckBox in HeaderTemplate of that GridView. When user check “Select All” CheckBox in Header, all the checkboxes should be selected and vice versa.

Read More…

2 Responses to "(CheckBox in HeaderTemplate to) Select All CheckBoxes inside a GridView using JavaScript"

hi Kaushal, i have gone through your blog of select header checkbox in grid when checkboxes in each of the row is selected, Its a Great stuff , Helped me when i stuked in it. but there is one problem it is not working when there is only one row is in the grid… when we select checkbox in first row headrer checkbox is not getting selected . . .
can you help me out????
- Dhwanil

Hi.
Thanks for the article.

I am having a problem with implementing the code on my side. My page is contained in a Master Page.

The Javascript generated on the page
//<![CDATA[
function SelectAll(Rows,GridName,SelectAll)
{
TotalChkBx = parseInt(Rows);
var TargetBaseControl = document.getElementById(GridName);
var TargetChildControl = "chkSelect";
var Inputs = TargetBaseControl.getElementsByTagName("input");
for(var iCount = 0; iCount = 0)
Inputs[iCount].checked = document.getElementById(SelectAll).checked;
}
}
//]]>

and the grid part that makes use of the script is:

And the code behind is:

protected void Page_Load(object sender, EventArgs e)
{
            if (!Page.IsPostBack)
            {
                LoadMandatesList();
            }
            if (!Page.ClientScript.IsClientScriptBlockRegistered("MandateSelectAll"))
            {
                string strScript = Global.GetSelectAllScript();
                Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "MandateSelectAll", strScript, true);
            } //I have also tried it by putting this in the code-behind of the master page
}
protected void LoadMandatesList()
{
            BindMandateList(0);
}
private void BindMandateList(int intNewPageIndex)
        {
            g_dtMandatesList = (GlobalVariables.g_AccessLevel == 1 || GlobalVariables.g_AccessLevel == 2) ?
                Mandate.GetMandatesList(g_AgencyID) : Mandate.GetMandatesList(g_AgencyID, g_AgentID);
            Global.BindGridView(ref grdMandatesList, g_dtMandatesList, intNewPageIndex);
        }

protected void grdMandatesList_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            if (e.Row.RowType == DataControlRowType.Header)
            {
                string strGridName = grdMandatesList.ClientID, strSelectAll = ((CheckBox)e.Row.FindControl("chkSelectAll")).ClientID;
                string strJavascript = "javascript:SelectAll(" + g_dtMandatesList.Rows.Count + "," + strGridName + "," + strSelectAll + ")";
                ((CheckBox)e.Row.FindControl("chkSelectAll")).Attributes.Add("onclick", strJavascript);
            }
}

public static string GetSelectAllScript(int intRows)
        {
            StringBuilder strRefreshScript = new StringBuilder();
            strRefreshScript.Append("function SelectAll(Rows,GridName,SelectAll)\n");
            strRefreshScript.Append("{\n");
            strRefreshScript.Append("\t TotalChkBx = parseInt(Rows);\n");
            strRefreshScript.Append("\t var TargetBaseControl = document.getElementById(GridName);\n");
            strRefreshScript.Append("\t var TargetChildControl = \"chkSelect\"; \n");
            strRefreshScript.Append("\t var Inputs = TargetBaseControl.getElementsByTagName(\"input\");\n");
            strRefreshScript.Append("\t for(var iCount = 0; iCount = 0)\n");
            strRefreshScript.Append("\t\t\t Inputs[iCount].checked = document.getElementById(SelectAll).checked;\n");
            strRefreshScript.Append("\t }\n");
            strRefreshScript.Append("}\n");
            return strRefreshScript.ToString();
        }

Please help me figure out what could be wrong with my code.

Thanks a stack.

Leave a Reply

You must be logged in to post a comment.

Victims

  • 38,598 Hits

Calendar

July 2008
M T W T F S S
« Jun   Aug »
 123456
78910111213
14151617181920
21222324252627
28293031  

Archives

KaushaL Parik (Microsoft MVP – ASP.NET)