Can't read RadCombo selected values using JavaScript

[loai taha]

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

[Paul]

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.

[Sid]

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 Object, ByVal 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....

[Shinu]

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.

[Sid]

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 

[Shinu]

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

[Sid]

Hi Shinu,

this works perfectly...thanks for that..

regards,

Sid

[Ketaki Indurkar]

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

[loai taha]

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,

[Ketaki Indurkar]

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

[loai taha]

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,

[Miche B]

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

[loai taha]

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

[Miche B]

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

[loai taha]

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,

[Miche B]

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

[loai taha]

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 CountryValue= arg.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,

[Miche B]

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

[loai taha]

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,