How to call Javascript function when checkbox columns are checked

[Raj]

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......

Grid client select column....

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

commanditemtemplate

<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>
</CommandItemTemplate>

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 + "')");
        }
    }


JS


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.( See the image). Where am i doing wrong? How to resolve this issue. Any help should be appreciated.

[Princy]

Hello Raj,

You can easily achieve this by using 'OnRowSelected' client event of RadGrid. And use one HiddenField for storing the Id of Label which is placed inside CommandItemTemplate. In the event handler access the Label and set SelectedItems count. Check out the sample code below.

ASPX:

<ClientSettings Selecting-AllowRowSelect="true">
    <ClientEvents OnRowSelected="OnRowSelected" />
</ClientSettings>

<asp:HiddenField ID="HiddenField1" runat="server" />

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
   {
       if (e.Item is GridCommandItem)
       {
           GridCommandItem cmditem = (GridCommandItem)RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];
           Label lb = (Label)cmditem.FindControl("lblselTsks");
           HiddenField1.Value = lb.ClientID;
       }
    }

Java Script:

<script type="text/javascript">
     function OnRowSelected(sender, args)
     {
        var hf1 = document.getElementById("HiddenField1");
        var masterTable = sender.get_masterTableView();
        var count = masterTable.get_selectedItems().length;
        document.getElementById(hf1.value).innerText = count;
     }
</script>

Thanks,
Princy.