How to set a checked item or items in RadMultiSelect client side

2 Answers 59 Views
MultiSelect
Rob
Top achievements
Rank 1
Veteran
Iron
Rob asked on 29 Apr 2021, 03:17 PM | edited on 03 May 2021, 12:29 PM

My radmultiselect has many values along with the option "None". The user is allowed to select up to 5 values and currently can select None amongst those 5 values which doesn't make any sense. If the user selects None (88 in the code below), I would like to clear any other selections and reselect None (88). I currently have the following code, but I can't figure out how to actually select or deselect an item via javascript.

ASP.NET:

<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server" DataValueField="value" DataTextField="text" RenderMode="Lightweight" Placeholder="Select..." AutoClose="false" Skin="Bootstrap" CssClass="radmultiselectstyle" TagMode="Single" Width="100%" AccessKey="B">
          <ClientEvents OnSelect="onSelect" />
</telerik:RadMultiSelect>


JS:

<script type="text/javascript" id="telerikClientEvents1">
    function onSelect(sender, args) {
        var data = args.get_dataItem();
        var multiSelectObject = $find("<%=RadMultiSelect1.ClientID %>");
        var kendoMultiSelect = multiSelectObject.get_kendoWidget();
        if (data.value == '88') {
            /*[I would like to clear all values, reselect just 88, and, I'm guessing set 
the MaxSelectedItems to one unless 88 is deselected]*/ } } </script>

 

Can anyone help?

Thanks!

Rob
Top achievements
Rank 1
Veteran
Iron
commented on 30 Apr 2021, 01:30 PM

I have made a little progress but it still is not working correctly.
function onSelect(sender, args) {
     var data = args.get_dataItem();
     var multiSelect = $find("<%=MultiSelect1.ClientID %>").get_kendoWidget();
     if (data.value == '88') {
         multiSelect.value([""]);
         multiSelect.value(["88"]);
     }        
}
multiSelect.value([""]); does clear all previously selected values like I want, but I was hoping that the next line, multiSelect.value(["88"]); would re-select 88. It does not.  
Peter Milchev
Telerik team
commented on 04 May 2021, 10:42 AM

Hi Rob, the correct method of the RadMultiSelect control is set_value(value), while the underlying widget's method is just value(value).

2 Answers, 1 is accepted

Sort by
0
Accepted
Peter Milchev
Telerik team
answered on 04 May 2021, 10:46 AM

Hi Rob,

Here is a simplified OnSelect handler that will:

1) Deselect any selected items when 'None' is selected

2) Deselect 'None' when another item is selected

function OnSelect(sender, args) {
    var dataItem = args.get_dataItem();
    if (dataItem.value == '88') {
        sender.set_value([])
    } else if (sender.get_value().indexOf('88') > -1) {
        // https://stackoverflow.com/questions/5767325/how-can-i-remove-a-specific-item-from-an-array
        sender.set_value(sender.get_value().filter(function (it) { it !== '88' }))
    } 
}

Regards,
Peter Milchev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Rob
Top achievements
Rank 1
Veteran
Iron
commented on 04 May 2021, 11:26 AM

Thanks, Peter. That's greatly appreciated!
0
Rob
Top achievements
Rank 1
Veteran
Iron
answered on 03 May 2021, 02:20 PM | edited on 03 May 2021, 02:20 PM

I finally got it working. Javascript is definitely not one of my strengths so this took me a long time to figure out.


function onSelect(sender, args) {
        var data = args.get_dataItem();
        var biasMotivation = $find("<%=BiasMotivation.ClientID %>").get_kendoWidget();
        var selectedVals = biasMotivation.dataItems();
        if (data.value == '88') {            
            for (var i = 0; i < selectedVals.length; i++) {
                if (selectedVals[i].value != '88') {
                    biasMotivation.value([]);
                }
            }
        }
        else {
            var ids = selectedVals.filter(function (it) { return it.value != "88" }).map(function (it) { return it.value });
            ids.push(data.value);
            setTimeout(function () {
                biasMotivation.value(ids);
            }, 1);
        }
    }

Tags
MultiSelect
Asked by
Rob
Top achievements
Rank 1
Veteran
Iron
Answers by
Peter Milchev
Telerik team
Rob
Top achievements
Rank 1
Veteran
Iron
Share this question
or