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

RadListBox set checkbox when selected

9 Answers 429 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
BRABO
Top achievements
Rank 1
BRABO asked on 12 Oct 2010, 12:27 PM
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

9 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 12 Oct 2010, 01:54 PM
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.
0
Daniel Frumkin
Top achievements
Rank 1
answered on 22 Aug 2012, 07:52 PM
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.
0
Princy
Top achievements
Rank 1
answered on 23 Aug 2012, 04:19 AM
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.
0
Jagz W
Top achievements
Rank 2
answered on 03 Jan 2013, 05:58 AM
Hi,

I tried your code, it will  only select the item. but if user again click , it will not un-select. :(
0
Princy
Top achievements
Rank 1
answered on 03 Jan 2013, 07:35 AM
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.
0
Nahwin
Top achievements
Rank 1
answered on 16 Jul 2013, 05:12 PM
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...
0
Princy
Top achievements
Rank 1
answered on 17 Jul 2013, 06:03 AM
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.
0
Nahwin
Top achievements
Rank 1
answered on 17 Jul 2013, 09:40 AM
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
0
Nahwin
Top achievements
Rank 1
answered on 22 Jul 2013, 07:03 AM
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
Tags
ListBox
Asked by
BRABO
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
Daniel Frumkin
Top achievements
Rank 1
Jagz W
Top achievements
Rank 2
Nahwin
Top achievements
Rank 1
Share this question
or