This is a migrated thread and some comments may be shown as answers.

Can't read RadCombo selected values using JavaScript

18 Answers 578 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
loai taha
Top achievements
Rank 1
loai taha asked on 31 Mar 2009, 03:26 PM
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

18 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 31 Mar 2009, 03:38 PM
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.
0
Sid
Top achievements
Rank 1
answered on 05 Apr 2009, 12:40 AM
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...
'DIV element contains 2 RADComboBox 
    Protected WithEvents divContainer As New HtmlControls.HtmlGenericControl 
    Protected WithEvents rcb1 As New RadComboBox 
    Protected WithEvents rcb2 As New RadComboBox 
 
    Protected Sub BuildControls() 
'Add RADComboBox to DIV 
        divContainer.ID = "dContainer" 
 
        rcb1.ID = "RadComboBox1" 
        rcb1.OnClientSelectedIndexChanging = "LoadStreet" 
 
        rcb2.ID = "RadComboBox2" 
        rcb2.EnableLoadOnDemand = True 
 
        divContainer.Controls.Add(New LiteralControl("<p>")) 
        divContainer.Controls.Add(rcb1) 
        divContainer.Controls.Add(New LiteralControl("</p>")) 
        rcb1.Items.Add(New RadComboBoxItem("Suburb1""Suburb1")) 
        rcb1.Items.Add(New RadComboBoxItem("Suburb2""Suburb2")) 
        rcb1.Items.Add(New RadComboBoxItem("Suburb3""Suburb3")) 
 
        divContainer.Controls.Add(New LiteralControl("<p>")) 
        divContainer.Controls.Add(rcb2) 
        divContainer.Controls.Add(New LiteralControl("</p>")) 
 
    End sub 
 
 
    Private Sub ServerControl1_PreRender(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.PreRender 
        If (Not Page.IsClientScriptBlockRegistered("AddressComboScript")) Then 
            Page.RegisterClientScriptBlock("AddressComboScript""<SCRIPT Language=""JavaScript"" src=""AddressCombo.js""></SCRIPT>"
        End If 
        BuildControls() 
        Me.Controls.Add(divContainer) 
 
    End Sub 
 
 
    Protected Overrides Sub RenderContents(ByVal output As HtmlTextWriter) 
        divContainer.RenderControl(output) 
    End Sub 
 
 


AddressCombo.js script on client page.
function LoadStreet(combo, eventarqs) { 
    alert("inside LoadStreet"); 
 
    var streetCombo = document.getElementById("RadComboBox2");  
    var item = eventarqs.get_item(); 
        streetCombo.set_text("Loading..."); 
 
        if (item.get_index() > 0) { 
            streetCombo.requestItems(item.get_value(), false); 
        } 
        else 
        { 
            streetCombo.set_text(" "); 
            streetCombo.clearItems(); 
        } 
    } 
 
 



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....
0
Shinu
Top achievements
Rank 2
answered on 06 Apr 2009, 07:47 AM
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.
0
Sid
Top achievements
Rank 1
answered on 06 Apr 2009, 07:49 PM
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 
0
Shinu
Top achievements
Rank 2
answered on 07 Apr 2009, 05:52 AM
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
0
Sid
Top achievements
Rank 1
answered on 14 Apr 2009, 02:11 AM
Hi Shinu,

this works perfectly...thanks for that..

regards,
Sid
0
Ketaki Indurkar
Top achievements
Rank 1
answered on 30 Mar 2010, 10:33 AM
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
0
loai taha
Top achievements
Rank 1
answered on 30 Mar 2010, 02:23 PM
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,
0
Ketaki Indurkar
Top achievements
Rank 1
answered on 30 Mar 2010, 03:54 PM
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
0
loai taha
Top achievements
Rank 1
answered on 31 Mar 2010, 07:20 AM
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,
0
Miche B
Top achievements
Rank 1
answered on 24 May 2010, 10:03 AM
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



0
loai taha
Top achievements
Rank 1
answered on 24 May 2010, 10:37 AM
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

0
Miche B
Top achievements
Rank 1
answered on 24 May 2010, 05:45 PM
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
0
loai taha
Top achievements
Rank 1
answered on 25 May 2010, 11:27 AM
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,
0
Miche B
Top achievements
Rank 1
answered on 25 May 2010, 08:48 PM
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
0
loai taha
Top achievements
Rank 1
answered on 26 May 2010, 07:45 AM
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,










0
Miche B
Top achievements
Rank 1
answered on 26 May 2010, 08:28 PM
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
0
loai taha
Top achievements
Rank 1
answered on 26 May 2010, 08:51 PM
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,
Tags
ComboBox
Asked by
loai taha
Top achievements
Rank 1
Answers by
Paul
Telerik team
Sid
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Ketaki Indurkar
Top achievements
Rank 1
loai taha
Top achievements
Rank 1
Miche B
Top achievements
Rank 1
Share this question
or