JavaScript RadComboBox SelectedValue

8 Answers 7688 Views
ComboBox
archimede
Top achievements
Rank 1
archimede asked on 16 Jul 2010, 02:12 PM
I want to obtain via Javascript the SelectedValue of a RadComboBox but it seem not possible.
My goal is to change (clientside) RadComboBox1 selectedvalue, starting from another javascript event.

Here you can find the example page:

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolderBody" runat="Server">
    <script type="text/javascript">  
        function getvalue()  
        {
            var combo = <%=RadComboBox1.ClientID %>;
            alert(combo.SelectedItem);
            alert( document.getElementById(combo.UniqueID + "_value").value );
        }  
    </script>
    <telerik:RadComboBox ID="RadComboBox1" runat="server">
        <Items>
            <telerik:RadComboBoxItem Text="Item1" Value="Value1" />
            <telerik:RadComboBoxItem Text="Item2" Value="Value2" />
            <telerik:RadComboBoxItem Text="Item3" Value="Value3" />
        </Items>
    </telerik:RadComboBox>
    <input id="Button1" type="button" value="button" onclick="getvalue();" />
</asp:Content>

Anyone can help?

8 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 19 Jul 2010, 07:08 AM
Hello,

You could use the $find() method to get reference to AJAX control's client object.

Here is the sample code:
<script type="text/javascript"
    function getvalue() 
    {
        var combo = $find('<%=RadComboBox1.ClientID %>');
        alert(combo.get_selectedItem().get_value());
    
</script>


And for more information about client methods of RadComboBox, go through the links below:
RadComboBox object
RadComboBoxItemCollection object


-Shinu.
Shailesh
Top achievements
Rank 1
commented on 22 May 2017, 06:43 AM

Not working for me.
Jeremy
Top achievements
Rank 1
commented on 16 Feb 2018, 08:52 PM

[quote]Shinu said:Hello,

You could use the $find() method to get reference to AJAX control's client object.

Here is the sample code:
<script type="text/javascript"
    function getvalue() 
    {
        var combo = $find('<%=RadComboBox1.ClientID %>');
        alert(combo.get_selectedItem().get_value());
    
</script>



And for more information about client methods of RadComboBox, go through the links below:
RadComboBox object
RadComboBoxItemCollection object


-Shinu.[/quote]

 

I've been trying this but get a yellow screen on 

var combo = $find('<%=RadComboBox1.ClientID %>');

 

I am using it in a user control, other than that I don't see what could be different.

Jeremy
Top achievements
Rank 1
commented on 16 Feb 2018, 08:53 PM

[quote]Jeremy said:[quote]Shinu said:Hello,

 

I've been trying this but get a yellow screen on 

var combo = $find('<%=RadComboBox1.ClientID %>');

 

I am using it in a user control, other than that I don't see what could be different.

[/quote]

 

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
 
Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
 
Source Error:
 
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
 
Stack Trace:
 
 
[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
   System.Web.UI.ControlCollection.AddAt(Int32 index, Control child) +9806317
   Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +142
 
[HttpException (0x80004005): Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.]
   Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +190
   Telerik.Web.UI.RadAjaxControl.PerformRender() +403
   Telerik.Web.UI.RadAjaxControl.OnPageRender(HtmlTextWriter writer, Control page) +1187
   Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +75
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +268
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1405
Jeremy
Top achievements
Rank 1
commented on 16 Feb 2018, 09:12 PM

[quote]Jeremy said:

 

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
 
Exception Details: System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).
 
Source Error:
 
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
 
Stack Trace:
 
 
[HttpException (0x80004005): The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).]
   System.Web.UI.ControlCollection.AddAt(Int32 index, Control child) +9806317
   Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +142
 
[HttpException (0x80004005): Please, see whether wrapping the code block, generating the exception, within RadCodeBlock resolves the error.]
   Telerik.Web.UI.RadAjaxControl.MoveUpdatePanel(Control initiator, Control updated) +190
   Telerik.Web.UI.RadAjaxControl.PerformRender() +403
   Telerik.Web.UI.RadAjaxControl.OnPageRender(HtmlTextWriter writer, Control page) +1187
   Telerik.Web.UI.RadAjaxControl.RenderPageInAjaxMode(HtmlTextWriter writer, Control page) +75
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +268
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +13
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +66
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1405

[/quote]

 

I googled the error message and found one solution suggesting = to a #

        var combo1 = $find("<%= Resource1RadComboBox.ClientID %>");
to
        var combo1 = $find("<%# Resource1RadComboBox.ClientID %>");

 

And the yellow screen went away but combo1 is null.

Peter Milchev
Telerik team
commented on 19 Feb 2018, 09:37 AM

Hello Jeremy,

Using a CodeBlock to surround the script tag should resolve the issue as suggested in RadAjaxPanel and "The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). ":
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function AjaxReq(args) {
           var combo1 = $find("<%= Resource1RadComboBox.ClientID %>");
        }
    </script>
</telerik:RadCodeBlock>


Regards,
Peter Milchev
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jehad
Top achievements
Rank 1
answered on 09 Sep 2012, 11:42 AM

telerik RadComboBox  :: Get Selected value by js



function getSelectedValue() {

 var ddlCurrency = document.getElementById('ddlCurrencyID');

 var selectedValue = ddlCurrency.control._value;

 var selectedText =  ddlCurrency.control._text;

}

0
Nencho
Telerik team
answered on 10 Sep 2012, 12:48 PM
Hello,

Considering we aim to get the value of an Ajax Control, the better approach is to access the client instance of the control with $find() instead of accessing the DOM element with document.getElementById(). Please consider implementing the approach that Shinu has proposed.
 
Kind regards,
Nencho
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Rajeeve
Top achievements
Rank 1
answered on 11 Aug 2016, 10:43 AM
var checkeditems;
var combo = $find("<%= telerikcomboboxname.ClientID%>")
 var items = combo.get_checkedItems();
  for (i = 0; i < items.length; i++) {

                        if (i == 0) {
                            radvalue = Number(parseInt(items[i]._properties._data.value));
                           checkeditems=checkeditems+radvalue ;
                        }
                        else {
                            radvalue = Number(parseInt(items[i]._properties._data.value));
                            checkeditems= checkeditems+ "," + radvalue;
                        }

               }
                    alert(Expenseitems);
0
Arun
Top achievements
Rank 1
answered on 07 Jun 2017, 09:34 AM

           function ShowEditForm(rowIndex)
            {
                 var combo = $find("<%=RadDrpListCity.ClientID%>");
                 var itm = combo.findItemByText(City.innerText);
                 itm.select();
                var id = combo.get_selected_Item().get_value();

not able to get the selected DataValue(not text value) of RadDropDownList. Any suggestions?? 

0
Good
Top achievements
Rank 1
answered on 20 Sep 2018, 05:36 PM

function OnClientSelectedIndexChanged(sender, eventArgs) {    

    var item = eventArgs.get_item();   

  var selectedVal = item.get_value();

0
Karthik
Top achievements
Rank 1
answered on 08 Apr 2021, 02:47 PM

To access the client instance of the control with $find() I am receiving null.

This is happening when I try to access after document is ready as below.

 

$(document).ready(function () {

    var combo = $find("ctl00_ctl00_cphBody_cpheHealth_EmailNotificationTypesComboBox"); 

var items = combo.get_items();
             

0
Peter Milchev
Telerik team
answered on 13 Apr 2021, 12:30 PM

Hello Karthik,

The document.ready event is too early for the script controls and at the time the event is fired, the client-side object is not yet created, hence the null reference.

That is why I would recommend using Sys.Application.Load instead of $(document).ready

function pageLoadHandler() {
    // https://docs.telerik.com/devtools/aspnet-ajax/general-information/get-client-side-reference#using-the-ms-ajax-approach
    var combo =  $find("<%= RadComboBox1.ClientID %>");
        
    // Sys.Application.remove_load(pageLoadHandler);  
}
Sys.Application.add_load(pageLoadHandler);  

Regards,
Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
ComboBox
Asked by
archimede
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
Jehad
Top achievements
Rank 1
Nencho
Telerik team
Rajeeve
Top achievements
Rank 1
Arun
Top achievements
Rank 1
Good
Top achievements
Rank 1
Karthik
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or