Selecting MultiSelect Items When Holding Shift Button

Environment

Product

Progress® Telerik® UI MultiSelect for UI for ASP.NET Core

Description

How can I select one item in the MultiSelect and then, if the shift button is held down, select another item and all items between them?

Solution

• Set the AutoClose(false) configuration.

• Set a handler for the Select event

Razor

.Events(ev=>ev.Select("onSelect"))

• Initialize a variable, the value of which will indicate that the shift button is down.

Razor

var isShiftDown = false;
        window.onmousemove = function (e) {
            if (e.shiftKey) {
                isShiftDown = true;
            }
            else {
                isShiftDown = false;
            }
        }

• Initialize two variables that hold as value the indexes of the selected elements. After the first select get the index of the first element. If the shift button is held down get the offset-index for the second element.

• Iterate through all the elements between those indexes and push their values into an array.

• Check if the first index is smaller than the second one, if not change their values.

Razor

  if (firstIndex > secondIndex) { 
        var temp = firstIndex;
        firstIndex = secondIndex
        secondIndex = temp;
        // check which index is bigger (first should be smaller)
    }

• Use the value() method to set the new value of the MultiSelect as you pass the temporary array as a parameter.

Example:

Razor

@(Html.Kendo().MultiSelect()
          .Name("multiselect2")
          .Placeholder("Select attendees...")
          .BindTo(new List<string>() {
                    "Andrew Suyama",
                    "Nige Buchanan",
                    "Laura Fuller",
                    "Laura Fuller2",
                    "Laura Fuller3"
            })
          .Events(ev=>ev.Select("onSelect"))
          .AutoClose(false)
          .Value(new string[] { "Anne King", "Andrew Fuller" }
          )
        )

script.js

    var isShiftDown = false;
    window.onmousemove = function (e) {
        if (e.shiftKey) {
            isShiftDown = true;
        }
        else {
            isShiftDown = false;
        }
    }

    var firstIndex = null; //variables to store the indexes
    var secondIndex = null;
    function onSelect(e) {

        var firstItem = e.item
        if (firstIndex == null) {
            firstIndex = firstItem.data('offset-index');  //get first option index
        }

        if (isShiftDown) {
            e.preventDefault()
            var secondItem = e.item;
            secondIndex = secondItem.data('offset-index'); //get second option index

            if (firstIndex > secondIndex) { // check which index is bigger (first should be smaller)
                var temp = firstIndex;
                firstIndex = secondIndex
                secondIndex = temp;
            }

            if (secondIndex != null && firstIndex != null) {

                var tempArray = [];

                for (let i = firstIndex; i <= secondIndex; i++) {
                    var currElement = $('#multiselect2_listbox').find('li' + `[data-offset-index=${i}]`)[0];
                    tempArray.push(currElement.textContent)
                } // iterate the elements and push their text in array

                e.sender.value(tempArray) // set the choices
                e.sender.close() // close the dropdown
                firstIndex = null;
                secondIndex = null;
            }
        }
    }

More ASP.NET Core MultiSelect Resources

• ASP.NET Core MultiSelect Documentation

• ASP.NET Core MultiSelect Demos

• ASP.NET Core MultiSelect Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the MultiSelect for ASP.NET Core
• Server-Side API Reference of the MultiSelect for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base