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

Use JQuery to set a RadComboBox

6 Answers 202 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Jennifer
Top achievements
Rank 1
Jennifer asked on 27 May 2010, 05:02 PM
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!

6 Answers, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 28 May 2010, 01:53 PM
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.
0
Kevin
Top achievements
Rank 1
answered on 14 Jan 2014, 09:54 AM
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 
0
Nencho
Telerik team
answered on 17 Jan 2014, 09:06 AM
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
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.
0
Jeremy
Top achievements
Rank 1
answered on 15 Jan 2015, 09:17 PM
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>
0
Jeremy
Top achievements
Rank 1
answered on 15 Jan 2015, 10:17 PM
Nevermind, I figured it out...

     var combo = $find("ctl00_contentPlaceHolderMain_ctl00_editView_cbo_1_CATEGORY");
     var item = combo.findItemByValue("ERGO");
     if(item){item.select();}
0
Nencho
Telerik team
answered on 20 Jan 2015, 09:08 AM
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
 

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.

 
Tags
ComboBox
Asked by
Jennifer
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Kevin
Top achievements
Rank 1
Nencho
Telerik team
Jeremy
Top achievements
Rank 1
Share this question
or