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

[Rob]

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]

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]

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

[Peter Milchev]

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

[Rob]

Thanks, Peter. That's greatly appreciated!

[Rob]

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