RadListBox set checkbox when selected

[BRABO]

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

[Princy]

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.

[Daniel Frumkin]

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.

[Princy]

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.

[Jagz W]

Hi,

I tried your code, it will  only select the item. but if user again click , it will not un-select. :(

[Princy]

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.

[Nahwin]

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...

[Princy]

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.

[Nahwin]

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

[Nahwin]

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