Can't read RadCombo selected values using JavaScript

19 posts, 0 answers
  1. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 31 Mar 2009 Link to this post

    Hi there,

    I'm working on small form where I use Javascript to validate form's elements through asp.net custom validator.

    I was trying to read selected item value from RadCombo box but all my tries didn't help finding out the solution, I used below methods.

    1. var xCombo = document.getElementById(<%=RadcomboBox1.ClientID%>);
    var xItem = XCombo.GetValue();

    and tried

    2. var xCombo = document.getElementById(<%=RadcomboBox1.ClientID%>);
    var xItem = XCombo.get_text();

    unfortunately it didn't work. However if I place the second code in OnClientIndexChanging script it works perfectly and Javascript retrieve ComboBox selected item successfully. but I dont want to use such function because it requires Events args and Sender parameters.

    I really need help since i'm stuck with this for hours now
  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 31 Mar 2009 Link to this post

    Hi loai taha,

    Please find below a sample code snippet that shows the needed approach.

    <form id="form1" runat="server">  
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
    </telerik:RadScriptManager> 
     
    <script type="text/javascript">  
        function getText() {  
            var combo = $find('<%= RadComboBox1.ClientID %>');  
            alert(combo.get_selectedItem().get_value());  
        }  
    </script> 
     
    <telerik:RadComboBox ID="RadComboBox1" runat="server">  
        <Items> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1" Value="Item1" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2" Value="Item2" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3" Value="Item3" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4" Value="Item4" /> 
        </Items> 
    </telerik:RadComboBox> 
    <input id="Button1" type="button" value="Get combo text" onclick="getText()" /> 
    </form> 


    All the best,
    Paul
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sid
    Sid avatar
    13 posts
    Member since:
    Nov 2007

    Posted 04 Apr 2009 Link to this post

    Hi Paul,

    The code you gave doesn't work when the RADComboBox is in an ASP.NET server control.
    i have the following code..
    ASP.NET SERVER CONTROL...
    1 'DIV element contains 2 RADComboBox 
    2     Protected WithEvents divContainer As New HtmlControls.HtmlGenericControl 
    3     Protected WithEvents rcb1 As New RadComboBox 
    4     Protected WithEvents rcb2 As New RadComboBox 
    5  
    6     Protected Sub BuildControls() 
    7 'Add RADComboBox to DIV 
    8         divContainer.ID = "dContainer" 
    9  
    10         rcb1.ID = "RadComboBox1" 
    11         rcb1.OnClientSelectedIndexChanging = "LoadStreet" 
    12  
    13         rcb2.ID = "RadComboBox2" 
    14         rcb2.EnableLoadOnDemand = True 
    15  
    16         divContainer.Controls.Add(New LiteralControl("<p>")) 
    17         divContainer.Controls.Add(rcb1) 
    18         divContainer.Controls.Add(New LiteralControl("</p>")) 
    19         rcb1.Items.Add(New RadComboBoxItem("Suburb1""Suburb1")) 
    20         rcb1.Items.Add(New RadComboBoxItem("Suburb2""Suburb2")) 
    21         rcb1.Items.Add(New RadComboBoxItem("Suburb3""Suburb3")) 
    22  
    23         divContainer.Controls.Add(New LiteralControl("<p>")) 
    24         divContainer.Controls.Add(rcb2) 
    25         divContainer.Controls.Add(New LiteralControl("</p>")) 
    26  
    27     End sub 
    28  
    29  
    30     Private Sub ServerControl1_PreRender(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.PreRender 
    31         If (Not Page.IsClientScriptBlockRegistered("AddressComboScript")) Then 
    32             Page.RegisterClientScriptBlock("AddressComboScript""<SCRIPT Language=""JavaScript"" src=""AddressCombo.js""></SCRIPT>"
    33         End If 
    34         BuildControls() 
    35         Me.Controls.Add(divContainer) 
    36  
    37     End Sub 
    38  
    39  
    40     Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter) 
    41         divContainer.RenderControl(output) 
    42     End Sub 
    43  
    44  


    AddressCombo.js script on client page.
    1 function LoadStreet(combo, eventarqs) { 
    2     alert("inside LoadStreet"); 
    3  
    4     var streetCombo = document.getElementById("RadComboBox2");  
    5     var item = eventarqs.get_item(); 
    6         streetCombo.set_text("Loading..."); 
    7  
    8         if (item.get_index() > 0) { 
    9             streetCombo.requestItems(item.get_value(), false); 
    10         } 
    11         else 
    12         { 
    13             streetCombo.set_text(" "); 
    14             streetCombo.clearItems(); 
    15         } 
    16     } 
    17  
    18  



    LoadStreet javascript function gets called when the contents of RADComboBox1 changes.
    The javascript function fails on Line 6.
       streetCombo.set_text("Loading...");

    The error is "Error: Object doesn't support this property or method"

    When I debug javascript, I see that the type of streetcombo object is DispHTMLDivElement.
    I think what's happening is that the client side code doesn't know that this object is of type RADComboBox and hence gives the error tht the function is not supported.

    Can you tell me how the client script will recognize the type of this object as a RADComboBox.

    Thanks and Regards....
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 06 Apr 2009 Link to this post

    Hello Sid,

    Since you are using ASP.NET AJAX version, use $find() method instead of document.getElementById for getting the reference to the RadComboBox in client side.

    JavaScript:
     
    var streetCombo = $find('<%=RadComboBox1.ClientID %>'); 

    Please refer the following links.
    Client-Side Basics
    RadComboBox object

    Thanks,
    Shinu.
  6. Sid
    Sid avatar
    13 posts
    Member since:
    Nov 2007

    Posted 06 Apr 2009 Link to this post

    Hi Shinu,

    I tried that already. $find returns a null for the streetCombo object.
    So, it gives an error when I try to access some methods for streetCombo. - streetcombo is null or not an object.

    thanks...
    Sid 
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 07 Apr 2009 Link to this post

    Hi Sid,

    Can you give a try with the following line of code to access the ComboBox and see if it is working?

    JS:
       
       var
     combo = <%=RadComboBox1.ClientID %>; 

    Thanks
    Shinu
  8. Sid
    Sid avatar
    13 posts
    Member since:
    Nov 2007

    Posted 13 Apr 2009 Link to this post

    Hi Shinu,

    this works perfectly...thanks for that..

    regards,
    Sid
  9. Ketaki Indurkar
    Ketaki Indurkar avatar
    14 posts
    Member since:
    Mar 2010

    Posted 30 Mar 2010 Link to this post

    Hi,

    I am facing a similar problem. I am not able to get the instance of my RadComboBox in the javascipt. My combobox is contained in a user control which is in turn contained in a content page which is in turn contained in a master page.

    When I do a $find, it returns a null and if i use the document.getElementById() or a var combo = <%=radcombobox1.ClientID%> it returns me the DOM object which does not support the get_selectedItem() property.

    Can anybody help me out with this? I am really getting stuck for too long on this now.

    Thanks & Regards,
    Ketaki
  10. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 30 Mar 2010 Link to this post

    Hi Ketaki,

    Make sure to replace your JavaScript code within RadScriptBlock as well as replacing the control ID property with in single quotes. Hope the below example would help, I replaced the below code within a user control and the user control within a page and the page within a Master Page, it works just fine. On the other hand, make sure you are using the right client API function. :-)

    <telerik:RadComboBox ID="RadComboBox1" runat="server"
        <Items> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem1"  
                Value="RadComboBoxItem1" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem2"  
                Value="RadComboBoxItem2" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem3"  
                Value="RadComboBoxItem3" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem4"  
                Value="RadComboBoxItem4" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem5"  
                Value="RadComboBoxItem5" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem6"  
                Value="RadComboBoxItem6" /> 
            <telerik:RadComboBoxItem runat="server" Text="RadComboBoxItem7"  
                Value="RadComboBoxItem7" /> 
        </Items> 
    </telerik:RadComboBox> 
     
    <input id="Button1" type="button" value="Get combo text" onclick="getText()" />  
     
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"
        <script type="text/javascript"
            function getText() { 
                var xCombo = $find('<%=radcombobox1.ClientID%>'); 
                var xItem = xCombo.get_text(); 
                alert(xItem); 
            } 
        </script> 
        </telerik:RadScriptBlock> 

    Regards,
  11. Ketaki Indurkar
    Ketaki Indurkar avatar
    14 posts
    Member since:
    Mar 2010

    Posted 30 Mar 2010 Link to this post

    Hi,

    My Javascript code is already in a RadCodeBlock. I tried with the RadScriptBlock also still no luck. I am also having the control Id within single quotes as you mentioned. Still the $find method returns a null.
    I am really not able to figure out what is the problem. It seems that the same thing is happening for the combo box which I have within the same page and not as part of a user control. And also this is happening only for a RadComboBox. I am able to get the object of  other rad controls such as a raddatepicker using the $find method.
     
    Awaiting a quick response.

    Thanks & Regards,
    Ketaki
  12. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 31 Mar 2010 Link to this post

    Hi Ketaki,

    I really can't tell where the problem is, therefore, why don't you post your user control code in here, including the used JavaScript. 

    Posting your code will help others understanding and identifying your problem and then helping you in return :-)

    Regards,
  13. Miche B
    Miche B avatar
    15 posts
    Member since:
    Dec 2009

    Posted 24 May 2010 Link to this post

    I've been working on this for several hours and I also have the same problem.  I've used <%= RadComboBox1.ClientID %>  or  $find('RadComboBox1.ClientID')  and various other ways but the furthest I get is a value {object} of type DispHTMLDivElement that I cannot use to get any selected values.  There are no methods like val() or SelectedValue or GetSelecte or anything to get a combobox selected value.

    I can't seem to get anything by using document.getlementbyid either that is null.

    Is there a solution for this? 

    Thanks,
    Miche



  14. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 24 May 2010 Link to this post

    Hi Miche,

    Can you please post you JavaScript code, also please state out when exactly do you call that code! is it on combo box index change on client side, or on page load, etc...

    Thanks

  15. Miche B
    Miche B avatar
    15 posts
    Member since:
    Dec 2009

    Posted 24 May 2010 Link to this post

    Thanks for the quick response.  The bits I'm having problems with are under "GetAssignedGrids()"(and the getelementbyid under returnToParent)


    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">    
        <script type="text/javascript">  
            function GetRadWindow() {  
                var oWindow = null;  
                if (window.radWindow) oWindow = window.radWindow;  
                else if (window.frameElement != null && window.frameElement.radWindow)  
                    oWindow = window.frameElement.radWindow;  
                return oWindow;   
            }  
     
            function returnToParent() {  
                //create the argument that will be returned to the parent page  
                var oArg = new Object();  
                var grids = GetAssignedGrids(); // null  
                  
                oArg.cityName = document.getElementById("RadComboBox1GridPosition").value; //null  
                oArg.selDate = "July 18"//datePicker.get_selectedDate().toLocaleDateString();  
     
                //get a reference to the current RadWindow  
                var oWnd = GetRadWindow();  
     
                //Close the RadWindow and send the argument to the parent page  
                if (oArg.selDate && oArg.cityName) {  
                    oWnd.close(oArg);  
                }  
                else {  
                  //nothing right now    
                }  
            }  
     
            function GetAssignedGrids() {  
                var combo = <%= RadComboBox1GridName.ClientID %>;           //DispHTMLDivElement obj  
                var combjq = $find('<%=RadComboBox1GridName.ClientID %>');  //null  
                var combjq2 =  $('[id$=RadComboBox1GridName]');             // combjq2[0] is DispHTMLDivElement obj  
                var comboValue = document.getElementById("RadComboBox1GridName").value;   //null .value=undefined  
                alert(comboValue);   
                return comboValue;  
            }  
     
     
        </script>  
    </telerik:RadScriptBlock >    
     

    Attached is a screenshot of my available options using VS2008
  16. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 25 May 2010 Link to this post

    Hi Miche,

    Correct me if im wrong, you are looking to offer your page visitors the functionality to select among different items from rad combo box within a rad window. You need to get that element value upon closing the rad window or may be right after selecting the desired element.
    If that is the case, then the next question is, are you implementing the rad window content within the same parent page! or you are using a different page (i.e. MyCountriesList.aspx) and then you pass that page link to your rad window?

    the reason behind asking that is because each case has a different way to get or call controls within rad wondows

    Regards,
  17. Miche B
    Miche B avatar
    15 posts
    Member since:
    Dec 2009

    Posted 25 May 2010 Link to this post

    Hi Ioai,

    Yes the latter, used it with a MyCountries.aspx type of thing.  I need the selection passed back to the parent (and I also need to save it externally).

    Also I am noticing that by removing or re-adding a reference to jquery *.js files in Scripts that I get different jQuery functionality.   Some of which I need  (like the regular expression type stuff). 

    Thanks for your help.

    Miche
  18. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 26 May 2010 Link to this post

    Hi Miche, and sorry for the late reply :-)

    If you were having the content of the rad window as part of your parent page, then you will find no problems at all accessing and reading the contained elements. To be honest, I didn't try to read controls of another page that display within rad window, however, I did a little search and hope the below would be help you solving the problem,


    1- you have to place the below JavaScript in your MyCountires.aspx. it will make sure to create the needed arguments to be returned to the parent page, you will have to call this script within the rad window page, for example upon clicking a certain button or upon close.
    function returnToParent() 
            { 
                 //create the argument that will be returned to the parent page 
                 var oArg = new Object(); 
     
                var combo = $find('<%= RadComboBox1.ClientID %>'); 
     
                //get the Country's value 
                oArg.CountryValue = combo.get_selectedItem().get_value(); 
     
                //get a reference to the current RadWindow 
                var oWnd = GetRadWindow(); 
                             
                //Close the RadWindow and send the argument to the parent page 
                if(oArg.CountryValue) 
                { 
                    oWnd.close(oArg); 
                } 
                else 
                { 
                    alert("Please fill both fields");//or any check up logic 
                } 
            } 

    2- in the parent page, you will have to add the below JavaScript that will be called upon closing the rad window to elect the argumants (country value oArg) passed from the rad window.
    function OnClientClose(oWnd,args) 
            { 
                //get the transferred arguments 
                var arg = args.get_argument(); 
                if(arg) 
                { 
                    var CountryValuearg.CountryValue; 
                   
                    //write the code to do what ever you want with country value 
                } 
            } 

    3- for more details, please refer to the below link,

    http://demos.telerik.com/aspnet-ajax/window/examples/dialogreturnvalue/defaultcs.aspx

    As for jQuery, I tried to figure out the problem, as you may already know Telerik controls add jQuery functionality to your page once used, however, I can't tell if the added jQuery reference is limited to certain functionalities, thus, you will have to contact Telerik support for more information on this.

    Regards,










  19. Miche B
    Miche B avatar
    15 posts
    Member since:
    Dec 2009

    Posted 26 May 2010 Link to this post

    Hi Ioai,

    Actually my issue is about the jQuery and getting that to work.  By using jQuery I cannot get the Rad objects.  If I use Telerik jQuery I can retrieve these as Rad objects but then I cannot use some of the other basic jQuery functions, e.g., that use regular expression terminology. 

    Is this accurate?  Also I cannot use document.getelementbyid or <% ... %> syntax with either.  Does this make sense?

    Miche
  20. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 26 May 2010 Link to this post

    Miche,

    It does not make any sense at all. Guess what, try to create totally new page (don't use Master Pages) and replace a rad combobox there as well as the JavaScript code I already provided before (don't add references to any jQuery editions), use a button or client side "onclientselectedindexchanged()" to run the JavaScript code upon selecting an element of that rad combo box.

    If u successfully were able to read the selected element value, then the problem is that you are referencing a higher jQuery library version than the one that already included as part of the used Rad Script Manager, in my opinion that is the most suitable explanation for such a case :-) 

    Regards,
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017