OnClientDropDownClosed for RadComboBox throws javascript error

3 posts, 1 answers
  1. Klaus
    Klaus avatar
    4 posts
    Member since:
    May 2013

    Posted 14 Jun 2013 Link to this post

    Hello,

    I am getting a JavaScript error when I call my javascript function from the OnClientDropDownClosed client-side event from the RadComboBox control.

    The error I get is the following:

    JavaScript critical error in (unknown source location)

    SCRIPT1009: Expected '}'

    My javascript is the following

    <script type="text/javascript">
        function displaySelectedValues() {
            debugger;
            var combo = $find("<%# RadComboBox1.ClientID %>");
     
            alert(combo.get_checkedItems().length);
            //for (var i = 0; i < dropdown.get_checkedItems().length; i++) {
     
            //    var text = dropdown.get_items().get_text();
            //    label.value = label.value + text;
            //}
     
     
        }
    </script>

    I use <%# instead of <%= because I get an error from visual studio, but regardless of which one I use I still receive the javascript error mentioned above.

    The visual studio error is the following: 
        
        The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

    I'm not sure if this is related to telerik or not, but if I have <%= visual studio wont even allow me to get on the page.

    My markup code is as follows

    <telerik:RadAjaxPanel runat="server" ID="rapConfiguration" LoadingPanelID="ralpConfiguration">
     
              <telerik:RadWindow ID="modalPopup" runat="server" Width="650px" Height="325px" Modal="true" Behaviors="Close">
     
                   <ContentTemplate>
     
                       <table style="padding:10px;">
                           <tr>
                               bunch of td tags
                           </tr
                           <tr>
                               <td style="vertical-align:top;">
                                    
                               </td>
                               <td style="vertical-align:top;">
                                    
                               </td>
                               <td style="vertical-align:top;">
                                   <asp:CheckBox id="cbElementValue" runat="server" Visible="false" Text="Check = Yes/True"/>
                                   <telerik:RadCalendar ID="calElementValue" runat="server" Width="200px" RangeSelectionMode="None" EnableMultiSelect="false"></telerik:RadCalendar>
                                   <asp:TextBox ID="txtBoxElementValue" runat="server"  Width="200px"></asp:TextBox>
                                   <telerik:RadComboBox ID="RadComboBox1" runat="server" CheckBoxes="true" EnableCheckAllItemsCheckBox="true" Visible="false" Label="Look up values:" OnClientDropDownClosed="displaySelectedValues();">
                                   </telerik:RadComboBox>
     
                               </td>
                               <td style="vertical-align:top;">
                                   <asp:CheckBox ID="chkExpression" runat="server" Visible="false" OnClick="checkExpression(this);"/>
                               </td>
                           </tr>
                       </table>
                         
                        
                       <div>
     
                           <asp:Label runat="server" ID="lblSelectedValues" Text="testing, one, two, three">Selected Values: </asp:Label>
                       </div>
     
                       <div class="bottomRight">
                            <asp:Button  runat="server" ID="btnSubmitValues" Text="Submit Values" OnClick="btnSubmitValues_Click" />
                       </div>
     
                   </ContentTemplate>
     
                </telerik:RadWindow>
     
    </telerik:RadAjaxPanel>

    I tried moving the RadComboBox outside the table and I still got the error, I tried not passing in a value to the javascript function and I still got an error, because originally I was passing in "this" to the javascript function from the RadComboBox event property. Such as 

            OnClientDropDownClosed="displaySelectedValues(this);"

    Do you have any advice on how I can get past this error?

    After I receive the error and choose to continue through it the control still loads on the page but is unclickable, I can't open the dropdown list or type in the combobox.


  2. Klaus
    Klaus avatar
    4 posts
    Member since:
    May 2013

    Posted 14 Jun 2013 Link to this post

    Fixed the issue, kind of dumb but apparently you have to call/create the javascript function with teleriks own signature...

    which is:

    <script type="text/javascript">
        function OnClientDropDownClosedHandler(sender, eventArgs) {
            alert("Dropdown is closed now");
        }
    </script>
     
    <telerik:radcombobox
        id="RadComboBox1"
        onclientdropdownclosed="OnClientDropDownClosedHandler"
        runat="server">
    </telerik:radcombobox>

    not sure why it has to be called this way, but it works now
  3. Answer
    msigman
    msigman avatar
    141 posts
    Member since:
    Apr 2008

    Posted 14 Jun 2013 Link to this post

    Hi Klaus,

    Please change it back to <%= %> and then surround your JavaScript with a RadCodeBlock.  That should resolve all your issues.  Here is what the final code should look like:
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function displaySelectedValues() {
                debugger;
                var combo = $find("<%= RadComboBox1.ClientID %>");
                alert(combo.get_checkedItems().length);
            }
        </script>
    </ telerik:RadCodeBlock>
Back to Top