This is a migrated thread and some comments may be shown as answers.

How to call Javascript function when checkbox columns are checked

1 Answer 181 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Raj
Top achievements
Rank 1
Raj asked on 14 Jul 2010, 02:19 AM
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.

1 Answer, 1 is accepted

Sort by
0
Accepted
Princy
Top achievements
Rank 2
answered on 14 Jul 2010, 06:17 AM
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.
Tags
Grid
Asked by
Raj
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or