How to call Javascript function when checkbox columns are checked

Question

Hi,

I am using Gridclientselectcoiumn in my radgrid. I have a label in my commanditemtemplate. When user checks checkbox i just want to show number of checkboxes selected in that label. Suppose If user selects 4 checkboxes i just want to show like Selected Records: 4. Here is my code for that......

commanditemtemplate

<td align="right" style="width: 20%">
                                        Selected Records:<asp:Label ID="lblselTsks" Width="20px" Font-Size="10pt" Font-Bold="true"
                                            runat="server" Text="0"></asp:Label>
                                    </td>

Grid client select column....

<telerik:GridClientSelectColumn UniqueName="ClientSelectColumn" HeaderStyle-Width="3%"
                                ItemStyle-Width="3%">
                                <HeaderStyle Width="3%"></HeaderStyle>
                                <ItemStyle Width="3%"></ItemStyle>
                            </telerik:GridClientSelectColumn>

codebehind and JS

protected void rg200_DataBound(object sender, EventArgs e)
{
    foreach (GridDataItem item in rg200.MasterTableView.Items)
    {
        CheckBox chkBoxOne = (CheckBox)item.FindControl("ClientSelectColumn");
        if (chkBoxOne != null)
            chkBoxOne.Attributes.Add("onclick", "javascript:return SelectOne('" + chkBoxOne.ClientID + "')");
    }
}


            function SelectOne(id) {
            var count = 0;
            count = Number(document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML);
            if (document.getElementById(id).checked == true) {
                if (!document.getElementById(id).disabled) {
                    count = count + 1;
                }
            }
            else if (document.getElementById(id).checked == false) {
                if (!document.getElementById(id).disabled) {
                    count = count - 1;
                }
            }
            document.getElementById('ctl00_PagePlaceholder_rg200_ctl00_ctl02_ctl00_lblselTsks').innerHTML = count;
        }

The problem is when i select checkbox like 1 or more, the selected checkboxes count is not displaying. Its always showing Selected Records: 0. Where am i doing wrong? How to resolve this issue. Any help should be appreciated.

Answer 1

Have you verified using a tool like Firebug that your SelectOne function is being called when the checkboxes are checked? That would be step one.

Step two, if the function is being called, step through your JS (again, with a tool like Firebug) and make sure your count is being incremented correctly.

There is nothing obviously wrong with your code. Have you considered using jQuery? That could simplify your code a bit and make it easier to ready. Instead of document.getElementById(id) you can simply use $(id).

And unless you're doing something with your label server-side, you can replace the asp:Label with a simple HTML <span> or <div> and then set a much cleaner client ID. For example:

<span id="spanCounter" style="width:20px;font-weight:bold;"></span>

And then in code you can reduce "ctl00_PagePlaceholder..." to:

$("#spanCounter").html(counter); //Sets the HTML content using jQuery

Hope that helps.