Select All Items in asp.net CheckBoxList in Telerik's RadGrid's FormTemplate

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>

The code the above generates will definately be ready on document load, so that isn't the issue. Could you please post the HTML this generates as it's easier to see what jQuery code will be required. — Rory McCrossan, Dec 02 '11 at 11:10

score 1 · Accepted Answer · answered Dec 19 '11 at 14:44

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>

Select All Items in asp.net CheckBoxList in Telerik's RadGrid's FormTemplate

1 Answers1