Unselecting items

5 posts, 1 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 11 Dec 2013 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Dec 2013 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 12 Dec 2013 Link to this post

    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
  5. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Dec 2013 Link to this post

    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.
  6. Michael
    Michael avatar
    8 posts
    Member since:
    Jan 2009

    Posted 07 Jan 2014 Link to this post

    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);
    }


Back to Top
UI for ASP.NET Ajax is Ready for VS 2017