Use JQuery to set a RadComboBox

[Jennifer]

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

Thanks!

[Kalina]

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,
Kalina
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.

[Kevin]

HI
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 

[Nencho]

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();
            });
        }
    </script>

Regards,
Nencho
Telerik

[Jeremy]

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>
</tr>
</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>
</div></td>

[Jeremy]

Nevermind, I figured it out...

     var combo = $find("ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY");
     var item = combo.findItemByValue("ERGO");
     if(item){item.select();}

[Nencho]

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.

Regards,
Nencho
Telerik