Use JQuery to set a RadComboBox

7 posts, 0 answers
  1. Jennifer
    Jennifer avatar
    16 posts
    Member since:
    Nov 2007

    Posted 27 May 2010 Link to this post

    I have 2 div's on my form.

    One is Home Address Information and one is Mailing Address Information. Each includes a radcombobox for states.  I also have a checkbox that says "Mail Address same as Home Address" and when the person checks this, I need to copy the Home Address fields (address,city,state) to the Mailing Address fields (address,city,state)  and I want to do this client side of course.

    When I use the standard <asp: DropDownList, I can just say this and it works:
    $("#<%=ddlMState.ClientID %>").val($("#<%=ddlHState.ClientID %>").val());

    This does not work with the Telerik control. Can you help? I would rather use your radcombobox

  2. Kalina
    Kalina avatar
    918 posts

    Posted 28 May 2010 Link to this post

    Hello Jennifer,

    RadControls for ASP.NET AJAX have integrated JQuery library, and when you refer JQuery you have to use "$telerik.$" instead of "$" like this:

    var combo = $telerik.$("#<%= RadComboBox1.ClientID %>").val()

    or alternatively:

    var $ = $telerik.$;
    var combo = $("#<%= RadComboBox1.ClientID %>").val();

    Best wishes,
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. DevCraft R3 2016 release webinar banner
  4. Kevin
    Kevin avatar
    2 posts
    Member since:
    Jul 2013

    Posted 14 Jan 2014 Link to this post

    I'm having the same issue regarding that double rad combo box control, I have two combo boxes
    [physical address  State combo box ] and [mailing address state combo box] when I select state physical address 
    combo box then there is a check box says Same as physical address when I checked that check my mailing address state should automatically (client-side) select which I select for my physical address  State combo box 

    $("#ctl00_CenterContent_frmDealer_chkSameAsPhysicalAddress").change(function () {
    $telerik.$ ("#ctl00_CenterContent_frmDealer_txtMailingState_Input").val($telerik.$("#ctl00_CenterContent_frmDealer_txtState_Input").val());

    when I checked the [same as Physical Address check box] the 2nd combo box shows the first combo box value correctly but when I save the form the mailing state always save initial state like always save 1st index of combo box 
  5. Nencho
    Nencho avatar
    1446 posts

    Posted 17 Jan 2014 Link to this post

    Hello Kevin,

    I would suggest you to use the Client API of the RadComboBox, in order to correctly persist the selection of the controls. Please consider the following approach :

    <script type="text/javascript">
            function pageLoad() {
                var $ = $telerik.$;
                $("#checkBox").change(function () {
                    var text = $find("<%= Physical.ClientID %>").get_selectedItem().get_text();
                    $find("<%= Mailing.ClientID %>").findItemByText(text).select();

    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 the blog feed now.
  6. Jeremy
    Jeremy avatar
    2 posts
    Member since:
    Jan 2015

    Posted 15 Jan 2015 Link to this post

    My situation is slightly different. I'm just looking to pre-select the dropdown to a specific value like "Ergonomics" when the page loads. Can anyone provide me an example of how to do that from my snippet of HTML?

    <div id="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY" class="RadComboBox RadComboBox_Default" style="width:164px;">
    <table summary="combobox" border="0" style="border-width:0;border-collapse:collapse;table-layout:fixed;width:100%">
    <tr class="rcbReadOnly">
    <td class="rcbInputCell rcbInputCellLeft" style="margin-top:-1px;margin-bottom:-1px;width:100%;"><input name="ctl00$contentPlaceHolderMain$ctl00$editView$cbo_1_CATEGORY" type="text" class="rcbInput radPreventDecorate" id="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY_Input" value="Select One" style="display: block;" readonly="readonly" maxlength="10" /></td><td class="rcbArrowCell rcbArrowCellRight" style="margin-top:-1px;margin-bottom:-1px;"><a id="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
    </table><div class="rcbSlide" style="z-index:6000;"><div id="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default " style="float:left;display:none;"><div class="rcbScroll rcbWidth" style="width:100%;"><ul class="rcbList" style="list-style:none;margin:0;padding:0;zoom:1;"><li class="rcbItem ">Select One</li><li class="rcbItem ">Ergonomics </li><li class="rcbItem ">Furniture </li><li class="rcbItem ">Locks and Keys </li><li class="rcbItem ">Network and Telecom</li></ul></div></div></div><input id="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY_ClientState" name="ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY_ClientState" type="hidden" />
    </div><input name="ctl00$contentPlaceHolderMain$ctl00$editView$txtValue_1_CATEGORY" type="text" id="ctl00_contentPlaceHolderMain_ctl00_editView_txtValue_1_CATEGORY" style="display:none;" /><span id="ctl00_contentPlaceHolderMain_ctl00_editView_rfv_CATEGORY" style="color:Red;display:none;"></span>
  7. Jeremy
    Jeremy avatar
    2 posts
    Member since:
    Jan 2015

    Posted 15 Jan 2015 in reply to Jeremy Link to this post

    Nevermind, I figured it out...

         var combo = $find("ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY");
         var item = combo.findItemByValue("ERGO");
  8. Nencho
    Nencho avatar
    1446 posts

    Posted 20 Jan 2015 Link to this post

    Hello Jeremy,

    I am glad to see that you were able to overcome the faced issue by yourself and thank you for sharing your solution with the community.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top
DevCraft R3 2016 release webinar banner