This is a migrated thread and some comments may be shown as answers.

Unselecting items

4 Answers 317 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 11 Dec 2013, 04:30 PM
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

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 12 Dec 2013, 08:49 AM
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.

0
Michael
Top achievements
Rank 1
answered on 12 Dec 2013, 09:10 AM
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
0
Accepted
Princy
Top achievements
Rank 2
answered on 16 Dec 2013, 06:09 AM
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.
0
Michael
Top achievements
Rank 1
answered on 07 Jan 2014, 05:28 PM
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);
}


Tags
ListBox
Asked by
Michael
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Michael
Top achievements
Rank 1
Share this question
or