OnClientSelectedIndexChanged

[Matt]

I've been using the following code successfully with Q3 2011 SP1 to toggle the selection of RadListBox items when they're clicked (SelectionMode="Multiple") without requiring the use of the CTRL key. After upgrading to Q2 2012 SP1, OnClientSelectedIndexChanged no longer appears to fire if you click on an item that's already selected and it's the only item in the RadListBox that's selected. As a result, if there's only one item selected, the user cannot click on it to unselect it without first clicking on another item (and selecting that item). Is there a workaround to restore the previous functionality?

UPDATE: I've traced the change in behaviour to a bug fix in Q1 2012 SP1: Fixed: OnClientSelectedIndexChanged/ing is always fired on subsequent clicks of the same item

var changed;
function radListBox_SelectedIndexChanged(sender, e) {
    if (!changed) {
        changed = true;
        var item = e.get_item();
        if (item.get_checked()) {
            item.uncheck();
            item.unselect();
        }
        else {
            item.check();
            item.select();
        }
        selectCheckedItems(item.get_listBox());
        changed = false;
    }
}

function selectCheckedItems(listbox) {
    if (listbox) {
        var items = listbox.get_checkedItems();
        for (var i in items) {
            items[i].select();
        }
    }
}

[Ivana]

Hello Brendan,

This was considered as a bug and we had to change the SelectedIndexChanged behavior in the latest version of RadControls for ASP.NET AJAX.
The following JavaScript, however, should fix the problem:

var isSelected;
function pageLoad() {
    var list = $find("RadListBox1");
    $telerik.$(list._element).delegate(".rlbItem", "mousedown", function (e) {
        if (e.target._item) {
            isSelected = e.target._item.get_selected();
        } else {
            isSelected = e.target.parentNode._item.get_selected();
        }
    });

    $telerik.$(list._element).delegate(".rlbItem", "click", function (e) {
        var itemObject = e.target._item;

        if (list.get_selectedItems().length == 1 && list.get_selectedItems()[0] == itemObject && isSelected) {
            itemObject.set_selected(!itemObject.get_selected());
        }
    });
}

var changed;
function radListBox_SelectedIndexChanged(sender, e) {
    if (!changed) {
        changed = true;
        var item = e.get_item();
        if (item.get_checked()) {
            item.uncheck();
            item.unselect();
        }
        else {
            item.check();
            item.select();
        }
        selectCheckedItems(item.get_listBox());
        changed = false;
    }
}

function selectCheckedItems(listbox) {
    if (listbox) {
        var items = listbox.get_checkedItems();
        for (var i in items) {
            items[i].select();
        }
    }
}

I hope this will be helpful.

Regards,
Ivana
the Telerik team