RadComboBox get_selectedItem failing

[Andy]

I have a RadComboBox and I am attempting to retrieve the selected item in JavaScript.  Using .NET 4.0. in FireFox 11.0.

The RadComboBox is as follows:

<telerik:RadComboBox ID="ddlBillingState" runat="server"
AppendDataBoundItems="True"
DataTextField="Name"
DataValueField="StateProvinceID"
ondatabinding="ddlBillingState_DataBinding"
ondatabound="ddlBillingState_DataBound">
<Items>
<telerik:RadComboBoxItem Text="Select a State" />
</Items>
</telerik:RadComboBox>

 

The above RadComboBox resides inside a FormView ID=VendorFormView.

When I use the following code the JavaScript terminates before the second alert is issued.  The statement with the get_selectedItem call seems to be failing. The following JavaScript is contained with the Header section of the page in which the RadComboBox resides. This JavaScript runs when the user clicks a CheckBox on the page.  The ddlBillingState control does have a selected item, which was selected by the user, but when I attempt to retrieve the selected item the JavaScript terminates.

Any help would be greatly appreciated.

var ddlBillingState = document.getElementById('<%=VendorFormView.FindControl("ddlBillingState").ClientID%>');

var ddlShippingState = document.getElementById('<%=VendorFormView.FindControl("ddlShippingState").ClientID%>');

if (ddlBillingState != null && ddlShippingState != null)

{

alert("Assigning selected billing state");

var selectedBillingItem = ddlBillingState.get_selectedItem();

alert("selectedBillingItem assigned");

var shippingItem = ddlShippingState.findItemByText(selectedBillingItem.get_text());

alert("Shipping Item assigned");

shippingItem.select();

alert("Done");

}


[Kalina]

Hello,

I am suggesting you a simpler way to obtain the selected value in the combobox nested in FormView.
Simply add an ASP.NET HiddenField in the page and set the field value by handling the RadComboBox OnClientSelectedIndexChanged event:

<script type="text/javascript">


    function OnClientSelectedIndexChangedHandler(sender, eventArgs) {

        var hiddenField = document.getElementById("<%=ComboValue.ClientID %>");
        hiddenField.value = "";
        hiddenField.value = sender.get_selectedItem().get_value();

        alert(sender.get_selectedItem().get_value() + " " + hiddenField.value);
    }

</script>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<asp:HiddenField ID="ComboValue" runat="server" EnableViewState="true" />
<asp:FormView ID="FormView1" runat="server" DataSourceID="SqlDataSource1"
    OnItemCommand="FormView1_ItemCommand" DataKeyNames="ProductID" >
....
...
...
    <EditItemTemplate>
...
...
...
        <telerik:RadComboBox ID="RadComboBox1" runat="server"
       OnClientSelectedIndexChanged="OnClientSelectedIndexChangedHandler">
            <Items>
                <telerik:RadComboBoxItem Text="item 1" Value="1" />
                <telerik:RadComboBoxItem Text="item 2" Value="2" />
                <telerik:RadComboBoxItem Text="item 3" Value="3" />
            </Items>
        </telerik:RadComboBox>

        <asp:Button ID="btnAdd" runat="server" Text="Save" CommandName="Update" />
        <asp:Button ID="btnEdit" runat="server" Text="Cancel" CommandName="Cancel" />
    </EditItemTemplate>

</asp:FormView>

All the best,
Kalina
the Telerik team

[Andy]

After a good bit of research I have discovered WHY my code fails.  When the RadComboBox is NOT contained by a FormView and I obtain a reference with the following code and then do alert('rcbBillingState=' + rcbBillingState) I receive the following message:

rcbBillingState=[object Object]

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

When the RadComboBox is contained within a FormView and I do the following I receive the message:

rcbBillingState=[object HTMLDivElement]
Obviously, the wrong element is returned.  How do I find the RadComboBox when it is contained within a formview?  I am able to find asp:TextBox and asp:DropDownList controls.  Is it not possible to find Rad controls inside a FormView.

I have a page with 16 Rad controls on it, RadTextBoxes and RadComboBoxes.  The below code works with the RadTextBoxes, but fails with the RadComboBoxes. How can I adjust the code so that it can find the RadComboBox as I may need to do things other than just retrieve a value?

var rcbBillingState = document.getElementById('<%=MyFormView.FindControl("rcbBillingState").ClientID%>');

[Andy]

Let me add one further bit of information that will require a solution other than a hidden value field.  I have two RadComboBoxes and a CheckBox.  When the user clicks the CheckBox the JavaScript needs to locate both RadComboBoxes then identify the value or text of the first combo box and use it to set the value of the second combo box. 

This needs to be done client side so that the page is responsive to the user.  Obviously I can obtain the selected value or text of the first RadComboBox using your above suggestion, however, I MUST have a valid reference to the second RadComboBox in order to set it's selected value.

Both Combo Boxes are contained in the FormView.

Thanks.

[Cat Cheshire]

You can take a look at this article:
http://www.telerik.com/help/aspnet-ajax/combobox-find-client-side-embedded-another-control.html