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. UI for ASP.NET Ajax is Ready for VS 2017
  4. 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