[Solved] RadComboBox OnClientSelectedIndexChanged not firing

[David]

I have a set of 7 radcombobox controls on a page. When any one of them has their selected index changed I want the value of that combobox to "fill" to the right via a javascript function.

The combobox definitions are:

And the Bridge_Fill function is defined as:

Cases 1, 2, 3, 4, and 5 are essentially the same as Case 0 with one less combobox. The code is a little sloppy but that's not the problem.

When I change the first combobox, everything works and the other 6 comboboxes change their value correctly. It also works the second time. On the third time though the OnClientSelectedIndexChanged event does not fire and I cannot determine why. Any ideas?

[Rumen]

Hi David,

The trackChanges() / commitChanges() client API does not raise OnClientSelectedIndexChanged - its only purpose is to record changes on the ClientChanges collection so the server can read them after a postback (see Accessing Client Changes at the Server). So the "fill to the right" code isn't recursively re-triggering bridge_Fill for combos 1-6 - that part isn't the bug.

That points the failure squarely at combo 0's own item list, and the combination of settings you have is the classic trigger:

AllowCustomText="true" AppendDataBoundItems="True" Sort="Ascending"

What happens on each commitChanges() call:

1. Because AllowCustomText="true", any value/text you push in that doesn't already match an existing bound item causes RadComboBox to create a new client-side item to represent it (that's exactly what gets recorded in ClientChanges).
2. Because AppendDataBoundItems="True", that new custom item is never cleared out - it just keeps accumulating in the combo's item collection on every fill.
3. Because Sort="Ascending" is set, the whole item collection gets re-sorted every time an item is added, which reshuffles/rebuilds the internal item array and the corresponding <li>/<option> DOM nodes.

After two rounds of filling, each of the 7 combos has picked up duplicate "phantom" custom items (same text, different item references) and gone through a couple of re-sorts. On the third round the newly rebuilt item collection/DOM no longer lines up the way RadComboBox's internal "previous selected item vs new selected item" comparison expects (see the OnClientSelectedIndexChanged event docs), so it silently fails to detect an actual index/item change, and the event never fires. This is a known failure mode with AllowCustomText + AppendDataBoundItems + repeated client-side commitChanges() calls, not something specific to your fill logic.

You don't actually need trackChanges()/commitChanges() at all here, since you aren't reading ClientChanges on the server - drop them entirely and just set the value/text directly:

function bridge_Fill(sender, eventargs) {
    var item = eventargs.get_item();
    var currvalue = item.get_value();
    var currtext = item.get_text();
    var num = sender.get_id();
    num = num.charAt(num.length - 1);
    switch (Number(num)) {
        case 0:
            fillCombo('<%=ddBridgeability1.ClientID%>', currvalue, currtext);
            fillCombo('<%=ddBridgeability2.ClientID%>', currvalue, currtext);
            fillCombo('<%=ddBridgeability3.ClientID%>', currvalue, currtext);
            fillCombo('<%=ddBridgeability4.ClientID%>', currvalue, currtext);
            fillCombo('<%=ddBridgeability5.ClientID%>', currvalue, currtext);
            fillCombo('<%=ddBridgeability6.ClientID%>', currvalue, currtext);
            break;
        // case 1..5 unchanged pattern
    }
}

function fillCombo(id, value, text) {
    var combo = $find(id);
    combo.set_value(value);
    combo.set_text(text);
}

This avoids adding/committing a "custom item" on every fill, so the target combos' item collections stop growing and re-sorting, which removes the root cause. If you still need the value to exist as a real selectable item in those target combos (not just displayed text), find or add the matching item once instead of calling commitChanges() repeatedly:

function fillCombo(id, value, text) {
    var combo = $find(id);
    var item = combo.findItemByValue(value);
    if (!item) {
        item = new Telerik.Web.UI.RadComboBoxItem();
        item.set_value(value);
        item.set_text(text);
        combo.trackChanges();
        combo.get_items().add(item);
        combo.commitChanges();
    }
    combo.set_value(value);
    combo.set_text(text);
}

That way each combo gets at most one new item added per distinct value instead of a new duplicate on every fill.

Regards,
Rumen
Progress Telerik