Question

I have an oddly behaving comboBox.

Here's my markup

<telerik:RadComboBox 
                runat="server" 
                id="rcbSite" 
                width="210px" 
                enableloadondemand="true"
                onclientitemsrequesting="rcbSite_OnClientItemsRequesting"
                showmoreresultsbox="True" 
                enablevirtualscrolling="True" >    
            <WebServiceSettings Method="GetSitesComboBoxDataByCustomerId" Path="/Services/ClientSideDataService.asmx" />
            </telerik:RadComboBox>

Pretty reasonable, comboBox is tied to a webservice.

The onItemsRequesting function adds some extra data bits to the comboBox context that we need.

function rcbSite_OnClientItemsRequesting(sender, eventArgs) {
        //Get the selected customer 
        var selectedCustomerId = $('#<%= CustomerDropDownId %> option:selected').attr('value');

        var context = eventArgs.get_context();

        //Set filter text
        context["FilterString"] = eventArgs.get_text();
        context["CustomerId"] = selectedCustomerId;
    }

In my codebehind I create and select an item if one was previously chosen.

if (siteId.HasValue)
{
    rcbSite.Items.Add(SiteManager.GetComboBoxItemBySiteId(siteId.Value));
    rcbSite.SelectedValue = siteId.Value.ToString();
}

And finally on document.ready I attach a selctedIndexChanged event to the comboBox

//Site Changed
Sys.Application.add_load(function(){

    //If the combo box has items in it, select the first one
    //Selecting first item client side ensures that address fields are refreshed when binding individual item to combo box on initial page load
    var combo = $find("<%= rcbSite.ClientID %>");
    if (combo.get_items().getItem(0)) {
        combo.trackChanges();
        combo.get_items().getItem(0).select();
        combo.commitChanges();
    } 

    $find("<%= rcbSite.ClientID %>").add_selectedIndexChanged(
    function (sender, eventArgs) {
        var item = eventArgs.get_item();

        var addressFormFields = new InventoryAddressFields("<%= ddlAddressType.ClientID %>", "<%= txtAttenTo.ClientID %>", "<%= txtAddress1.ClientID %>",
                                                       "<%= txtAddress2.ClientID %>", "<%= txtCity.ClientID %>", "<%= ddlCountry.ClientID %>",
                                                   "<%= ddlState.ClientID %>", "<%= ddlCounty.ClientID %>", "<%= txtPostalCode.ClientID %>",
                                                   "<%= txtPostalCodePlus4.ClientID %>", "<%= txtPhone.ClientID %>", "<%= txtFax.ClientID %>",
                                                   "<%= ddlTimezone.ClientID %>", "<%= chkObserveDST.ClientID %>", "<%= ddlVerificationStatus.ClientID %>");

        if (item) {
            var selectedSiteId = item.get_value();

            GetAddressBySiteId(addressFormFields, selectedSiteId);
        }
        else
        {
            clearAddressFields(addressFormFields);
        }
 }
 );
});

Here's my issue:

  1. Page loads with one item inserted into comboBox & selected
  2. Click into comboBox & hit backspace
  3. Click off the comboBox

Expected: ComboBox fires a selectedIndexChanged event since we now have no item selected

Actual: Item is removed without firing event

What's interesting is that if you click into the box and off without removing an item. Then click in and remove it, the event fires correctly.

Any ideas?

Was it helpful?

Solution

I have a workaround in place now, it seems like what I wanted is unsupported behavior of the comboBox.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top