Yet Another JavaScript RadComboBox SelectedValue problem

2 posts, 0 answers
  1. ToltingColtAcres
    ToltingColtAcres avatar
    96 posts
    Member since:
    Nov 2010

    Posted 22 Nov 2018 Link to this post

    Similar to the dozens of other threads posted with retrieving a combobox value in client-side code, I cannot get this to work. After spending the past 8 hours trying to get this to work, hopefully someone can point out what I am doing wrong.

    I started with this basic code:

    <%@ Page Title="" Language="C#" MasterPageFile="~/My.Master" AutoEventWireup="true" CodeBehind="MyPage.aspx.cs" Inherits="MyPage" %>
     
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <title>My Page</title>
        <link rel="stylesheet" type="text/css" href="/CSS/MyPage.css" />
        <script type="text/javascript" src="/Scripts/MyPage.js"></script>
    </asp:Content>
    <asp:Content ID="Content2" ContentPlaceHolderID="body" runat="server">
       <telerik:RadComboBox ID="RadComboBoxADT" runat="server" />
       <telerik:RadButton ID="btnSubmit" runat="server" Text="Submit" OnClientClicked="onSubmitClick" SingleClick="true" SingleClickText="Processing..." AutoPostBack="false" />
    </asp:Content>

    MyPage.js:

                function onSubmitClick(a,b) {
                    var combo = $find("<%= RadComboBoxADT.ClientID %>");
                    alert(combo);
                    return;
    }

    running this code, combo yields "null", so any attempt to get the selected item fails as well.

    I tried moving the code from a <script> file, into the content header, e.g.

    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
        <title>My Page</title>
        <link rel="stylesheet" type="text/css" href="/CSS/MyPage.css" />
        <script type="text/javascript">
                function onSubmitClick(a,b) {
                    var combo = $find("<%= RadComboBoxADT.ClientID %>");
                    alert(combo);
                    return;
    }
        </script>
    </asp:Content>

    however, all this managed to do was yield a javascript error, onSubmitClick not found, on page load (why? if I view code, I can see it there.)

    another set of eyes here would be appreciated.

     

     

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    691 posts

    Posted 27 Nov 2018 Link to this post

    Hello,

    We have tested both scenarios and they are working as expected. 

    Regarding the approach with the external JavaScript file, the server id cannot be used there (e.g. <%= RadComboBoxADT.ClientID %> is not allowed in a .js file). To fix that, you can just set the  client-side id of the ComboBox is a variable which you can use in the file: 

    Default.aspx page: 

    <script>
        window.ControlClientIdCollection = {};
        window.ControlClientIdCollection["RadComboBoxADT"] = "<%= RadComboBoxADT.ClientID %>"
        //window.comboBoxId = "<%= RadComboBoxADT.ClientID %>";
    </script>

    scripts.js file: 

    function onSubmitClick(a, b) {
        //var combo = $find(window.comboBoxId);
        var combo = $find(window.ControlClientIdCollection["RadComboBoxADT"]);
        var selectedItem = combo.get_selectedItem();
        var text = combo.get_text();
        var value = combo.get_value();
        //alert(combo);
        alert(text);
    }

    Regarding the direct paste of the file, if you have AJAX-enabled the page, it might be required to have the RadCodeBlock or RadScriptBlock wrapping the <script> tag - RadCodeBlock and RadScriptBlock.

    Attached is a sample page implementing the working JavaScript file reference. If you still have issues, please modify the attached project and send it to us in an official support ticket. That would allow us to investigate your exact scenario locally and help you more efficiently. 

    Once we have a solution in the private thread, we can share it here, for convenience and better visibility of the community.

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top