Unselecting items

[Michael]

Hi guys,

Is there any way to allow a user to unselect an item from the RadListBox (assuming that there is no checkbox, and it is a single selection type).

I can only find client events which relate to the selectedIndexChanging or itemChecking, neither of which would be correct for a single-selection type.

Cheers
Mike

[Princy]

Hi Michael,

I guess you want to unselect the selected item of RadListBox. Please have a look into the sample code which works fine at my end.

ASPX:

<telerik:RadListBox ID="RadListBox1" runat="server" SelectionMode="Single">
    <Items>
        <telerik:RadListBoxItem Text="Item1" runat="server" />
        <telerik:RadListBoxItem Text="Item2" runat="server" />
        <telerik:RadListBoxItem Text="Item3" runat="server" />
    </Items>
</telerik:RadListBox>
<telerik:RadButton ID="RadButton1" runat="server" Text="Unselect Item" AutoPostBack="false"
    OnClientClicked="OnClientClicked1">
</telerik:RadButton>

JavaScript:

<script type="text/javascript">
    function OnClientClicked1(sender, args) {
        var listbox = $find("<%=RadListBox1.ClientID %>");
        listbox.get_selectedItem().set_selected(false);
    }
</script>

Please elaborate your requirement if it doesn't help.
Thanks,
Princy.

[Michael]

Yeah, we have a large number of these listbox's throughout our forms though, and would preferred to have not needed additional buttons placed next to every one (just incase a user makes an initial selection in error).

We have recently upgraded to the latest telerik version and this behaviour has been introduced - previously (2010.2.713.20) the selectedIndexChanging would still have been fired when clicking on an already highlighted item and we were hoping to find a solution which wouldn't require major changes to the way the users enter the form.

If there are any other ideas which might allow us to correct this please let me know.

Cheers

[Princy]

Hi Michael,

As a work around please have a look into the following code snippet which works fine at my end.

ASPX:

<telerik:RadListBox ID="RadListBox1" runat="server" SelectionMode="Single" onclick="Check();"
    OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
    <Items>
        <telerik:RadListBoxItem Text="Item1" runat="server" />
        <telerik:RadListBoxItem Text="Item2" runat="server" />
        <telerik:RadListBoxItem Text="Item3" runat="server" />
    </Items>
</telerik:RadListBox>

JavaScript:

<script type="text/javascript">
    var flag = 0;
    function OnClientSelectedIndexChanged(sender, args) {
        flag = 1;
    }
    function Check() {
        var listbox = $find("<%=RadListBox1.ClientID %>");
        if (flag == 0)
            listbox.get_selectedItem().unselect();
        flag = 0;
    }
</script>

Thanks,
Princy.

[Michael]

Hi Princy,

Thanks for the pointer - that workaround has really helped.

Just for anyone else's benefit, if you're looking at implementing this on a page with multiple RadListBox's, I've made a couple of additions to the javascript snippet.


Global JS file content

var radListBoxItemChecked = [];

function radListBoxIndexTested(sender, args) {
    radListBoxItemChecked[sender.get_id()] = 0;
    try {
        // attempt to get the item from the args
        // this was added as we call this generic function at both onLoad and onIndexChanged
        // args are empty from onLoad causing a failure to skip the setting of the array.
        var dummyItem = args.get_item();
        radListBoxItemChecked[sender.get_id()] = 1;
    } catch (e) {
    }
}

function checkRadListBoxIndexChanged(sender) {
    if (radListBoxItemChecked [sender.id] != 1) {
        var listBox = $find(sender.id);
        listBox.get_selectedItem().unselect();
    }
    radListBoxItemChecked [sender.id] = 0;
}

Markup on control/page

<telerik:RadListBox ID="rlb1" runat="server"
   OnClientSelectedIndexChanged="rlb1SpecificFunction"
   OnClientLoad="rlb1SpecificFunction"
   onclick="checkRadListBoxIndexChanged(this);">
</telerik:RadListBox>

JS specific to that control input

function rlb1SpecificFunction(sender, args){
    // do some specific actions for this control

    radListBoxIndexTested(sender, args);
}