RadListBox set checkbox when selected

10 posts, 0 answers
  1. BRABO
    BRABO avatar
    1 posts
    Member since:
    Sep 2010

    Posted 12 Oct 2010 Link to this post

    Hello,

    I'm new in using the Telerik Controls and have a question regarding the use of the RadListBox.

    I have a RadListBox on my page with the CheckBoxes set to "true". How can you set the RadListBox that when a user selects an item, the checkbox is set as well and when a user checks a CheckBox, the item gets selected.

    Or is there a way to just have the CheckBoxes enabled in a RadListBox and disable the selection method.

    Thanks

    Regards

    Degenhardt Gerrit
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 12 Oct 2010 Link to this post

    Hi,


    You could make use of client side api to accomplish this functionality. A sample code is shown here.

    <script type="text/javascript">
        function OnClientSelectedIndexChanged(sender, args) {
            args.get_item().set_checked(args.get_item().get_selected());        
        }
    </script>

    Client-side Basics
    RadListBoxItem client API


    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel Frumkin
    Daniel Frumkin avatar
    19 posts
    Member since:
    Jun 2004

    Posted 22 Aug 2012 Link to this post

    OK
     so how do you set the listbox to selected when the checkbox is selected.  
    right now if you select it via a checkbox it doesn't necessarily select it.
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Aug 2012 Link to this post

    Hi Daniel Frumkin,

    Try the following code snippet to set the RadListBoxItem to selected when the CheckBox is checked.

    JS:
    <script type="text/javascript">
        function OnClientItemChecked(sender, args) {
            args.get_item().set_selected(args.get_item().get_checked());
        }
    </script>

    Hope this helps.

    Regards,
    Princy.
  6. Jagz W
    Jagz W avatar
    17 posts
    Member since:
    Mar 2012

    Posted 02 Jan 2013 Link to this post

    Hi,

    I tried your code, it will  only select the item. but if user again click , it will not un-select. :(
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Jan 2013 Link to this post

    Hi,

    I suppose you want to set the RadListBoxItem to selected when the checkbox is selected and vice verse. Please try the following code.

    ASPX:
    <telerik:RadListBox ID="RadListBox1" runat="server"  CheckBoxes="true" OnClientItemChecked="OnClientItemChecked" >
        <Items>
            ............
        </Items>
    </telerik:RadListBox>

    JS:
    <script type="text/javascript">
        function OnClientItemChecked(sender, args) {
            args.get_item().set_selected(args.get_item().get_checked());
        }
    </script>

    Please elaborate your scenario if it doesn't helps.

    Regards,
    Princy.
  8. Nahwin
    Nahwin avatar
    22 posts
    Member since:
    Dec 2012

    Posted 16 Jul 2013 Link to this post

    hi Princy,

    first of all thanks for the code snippet it really helpfull,

    i just want to say that there's a flaw if we are using this solution with "onclientselectedindexchanged".

    in case we allow multiple choice this event will always keep the last click item to be the only one selected (easily spotted by item highlight) so there won't be any multipe selection by user..

    on the other hand the onclientitemchecked work perfectly with allow multiple choice..

    i event tried to combine both of those event to sync the selected item but "onclientselectedindexchange" will always make it to only select 1 item...
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 Jul 2013 Link to this post

    Hi Nahwin,

    Please have a look into the following JavaScript code.

    JavaScript:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged(sender, args) {
            args.get_item();
            sender.get_checkedItems();
        }
    </script>

    I guess you are telling about the args.get_item(). This method always return the last selected item in the RadListBox which is considered as default behaviour. Suppose you want to get all the selected items in the RadListBox in the OnClientSelectedIndexChanged event you can use the sender.get_checkedItems() method.

    Thanks,
    Princy.
  10. Nahwin
    Nahwin avatar
    22 posts
    Member since:
    Dec 2012

    Posted 17 Jul 2013 Link to this post

    Hi Princy,

    thanks for the reply and the new tricks,

    but overall i think i come upon the simplest solution (debateable upon how you code your web) for this, which is to use "checked" property of radlistitem to determine wether or not item in radlistbox is selected/choosen by user.

    and also we need help of little bit of css and javascript to do the trick (make it appear as natural as it can):

    Javascript:
    function OnClientSelectedIndexChanged(sender, args) {
            //in this function we don't really take care of the item's selected status, we use css("rlbActive") to turn off the highlight 
            //set the selected item to be checked and vice versa (uncheck deselected item)
            if (args.get_item().get_checked()) { //item already checked
                args.get_item().set_checked(false);
                args.get_item().set_selected(false);
            }
            else {
                args.get_item().set_checked(args.get_item().get_selected());
            }
        }

    CSS (credit to: Matthew Sigman): (unless you use checkbox in radlistbox through out your website just put this css on specific web page)
    .rlbActive { /*turn of the radlistbox active item highlight*/
            background: none !important;
            border: 1px solid white !important;
        }


    hope it help other people in future
  11. Nahwin
    Nahwin avatar
    22 posts
    Member since:
    Dec 2012

    Posted 22 Jul 2013 Link to this post

    Hi Princy,

    thanks for the reply and the new tricks,

    but overall i think i come upon the simplest solution (debateable upon how you code your web) for this, which is to use "checked" property of radlistitem to determine wether or not item in radlistbox is selected/choosen by user.

    and also we need help of little bit of css and javascript to do the trick (make it appear as natural as it can):

    Javascript:

    function OnClientSelectedIndexChanged(sender, args) {
            //in this function we don't really take care of the item's selected status, we use css("rlbActive") to turn off the highlight
            //set the selected item to be checked and vice versa (uncheck deselected item)
            if (args.get_item().get_checked()) { //item already checked
                args.get_item().set_checked(false);
                args.get_item().set_selected(false);
            }
            else {
                args.get_item().set_checked(args.get_item().get_selected());
            }
        }



    CSS (credit to: Matthew Sigman): (unless you use checkbox in radlistbox through out your website just put this css on specific web page)
     
    .rlbActive { /*turn of the radlistbox active item highlight*/<br>
            background: none !important;<br>
            border: 1px solid white !important;<br>
        }<br>


    hope it help other people in future
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017