New to Telerik UI for ASP.NET MVC? Download free 30-day trial

MultiSelect Select Many Elements When Shift Button is Hold Down

Environment

Product Progress® Telerik® UI MultiSelect for UI for ASP.NET MVC

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

.Events(ev=>ev.Select("onSelect"))
  • Initialize a variable, the value of which will indicate that the shift button is down.
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.

  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:

@(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" }
          )
        )
    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;
            }
        }
    }
In this article
Not finding the help you need? Improve this article