Question

This question is similar to this question, bit the big difference is that the CheckBoxList is in the FormTemplate of a Telerk’s RadGrid.

I tried this approaches, but they don’t work:

Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery

Java Script for checkbox list in grid’s editformsettings

Here’s my code:

<telerik:RadGrid ID="RadGrid1" runat="server" ... >
   ...
   <MasterTableView ...>
      ...
      <EditFormSettings EditFormType="Template">
         <EditColumn UniqueName="EditCommandColumn1"></EditColumn>
         <FormTemplate>
            <table class="edit-table-rad" cellspacing="2" cellpadding="1" width="100%" border="0">
               ...
               <tr>
                  <td align="left" width="200px">
                     <b>Languages:</b><br />
                     <asp:CheckBox ID="chbSelectAllLanguage" runat="server" 
                                   Text="Select All"
                                   ClientIDMode="Static"/>
                  </td>
                  <td>
                     <asp:CheckBoxList ID="cblLanguage" runat="server" 
                                       DataSourceID="entityDataSourceLanguage"
                                       DataTextField="LanguageName"
                                       DataValueField="LanguageID"
                                       RepeatColumns="4">
                     </asp:CheckBoxList>
                  </td>
               </tr>
               ...
            </table>
         </FormTemplate>
      </EditFormSettings>
   </MasterTableView>
</telerik:RadGrid>

The examples above use jQuery to get the CheckBox and add a click function. But I can’t get the CheckBox. I tried getting it by the ID and by a cssclass, but I think that the CheckBox in the RadGrid’s FormTemplate is not in the DOM at document.ready time.

Is there a way to select/deselect all CheckBoxList items by selecting/deselecting the single CheckBox?

EDIT AFTER COMMENT

I can’t find the HTML of the FormTemplate before I open the edit form. When the form is open, the HTML is this:

<tr>
<td width="200px" align="left">
    <b>Languages:</b>
    <br>
    <span class="chbSelectAllLanguage">
        <input id="chbSelectAllLanguage" type="checkbox" name="ctl00$MainContent$rgSurvey$ctl00$ctl02$ctl04$chbSelectAllLanguage">
        <label for="chbSelectAllLanguage">Select All</label>
    </span>
</td>
<td>
    <table id="ctl00_MainContent_rgSurvey_ctl00_ctl02_ctl04_cblLanguage" class="kipCheckBoxList">
        <tbody>
            <tr>
                //the CheckBoxList generated data, like this:
                <td>
                    <input id="ctl00_MainContent_rgSurvey_ctl00_ctl02_ctl04_cblLanguage_0" type="checkbox" value="1" name="ctl00$MainContent$rgSurvey$ctl00$ctl02$ctl04$cblLanguage$0">
                    <label for="ctl00_MainContent_rgSurvey_ctl00_ctl02_ctl04_cblLanguage_0">English</label>
                </td>
                ...
            </tr>
            ...
        </tbody>
    </table>
</td>

Answer 1

I found the answer! The trick was to put the <script> tag inside an <telerik:RadCodeBlock ID="RadCodeBlock" runat="server"> tag, and then add this code to the ItemDataBound event od the RadGrid:

if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
   GridEditableItem geiItem = e.Item as GridEditableItem;
   CheckBox chbSelectAllLanguage = geiItem.FindControl("chbSelectAllLanguage") as CheckBox;
   CheckBoxList cblLanguage = geiItem.FindControl("cblLanguage") as CheckBoxList;
   chbSelectAllLanguage.Attributes.Add("onclick", "javascript:SelectDeselect('" + chbSelectAllLanguage.ClientID + "','" + cblLanguage.ClientID + "')");
}

Then the function for selectin/deselecting is like this:

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
   <script type="text/javascript">
      function SelectDeselect(chk, chklst) {
         var isChecked = $('#' + chk).is(':checked');
         $("[id^=" + chklst + "]").each(function () {
             $(this).attr("checked", isChecked);
         });
      }
   </script>
</telerik:RadCodeBlock>