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

Using MultiSelect in a Window Related to DropDownList Item

Environment

Product Version 2022.2.621
Product DropDownList for Progress® Telerik® UI for ASP.NET Core

Description

How can I implement a DropDownList where every item is related to a MultiSelect array of items? The selection of the MultiSelect values per a DropDownList item should happen in a Window.

Solution

  1. Let's say we have an implementation of a Telerik UI DropDownList for a Preference string and a Telerik UI MultiSelect for string array of Projects. They are placed in the Main View along with a custom button for opening a Telerik UI Window. In the Window we have another DropDownList and MultiSelect:
@(Html.Kendo().DropDownList()
          .Name("preference")
          .BindTo(new List<string>() {
              "Preference 1",
              "Preference 2",
              "Preference 3",
              "Preference 4",
              "Preference 5"
          })
          .Events(e => e.Change("onParentPreferenceChange"))
        )

<br />
<br />

@(Html.Kendo().MultiSelect()
          .Name("projects")
          .AutoClose(false)
          .Placeholder("Select projects...")
          .BindTo(new List<string>() {
              "Project 1",
              "Project 2",
              "Project 3",
              "Project 4",
              "Project 5",
              "Project 6",
              "Project 7",
              "Project 8",
              "Project 9",
              "Project 10"
          })
          .Enable(false)
        )

<br />
<br />

<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span>

<br />
<br />

@(Html.Kendo().Window()
    .Name("window")
    .Title("Select Project and preferences")
    .Content(@<text>
          @(Html.Kendo().DropDownList()
          .Name("preferenceInWindow")
          .BindTo(new List<string>() {
              "Preference 1",
              "Preference 2",
              "Preference 3",
              "Preference 4",
              "Preference 5"
          })
          .Events(e => e.Change("onPreferenceWindowChange"))
        )
          <br />
          <br />

          @(Html.Kendo().MultiSelect()
                    .Name("projectsInWindow")
                    .AutoClose(false)
                    .Placeholder("Select projects...")
                    .BindTo(new List<string>() {
                        "Project 1",
                        "Project 2",
                        "Project 3",
                        "Project 4",
                        "Project 5",
                        "Project 6",
                        "Project 7",
                        "Project 8",
                        "Project 9",
                        "Project 10"
                    })
                    .Events(e => e.Change("onMultiInWindowChange"))
                  )

    </text>)
    .Draggable()
    .Resizable()
    .Width(600)
    .Modal(true)
    .Actions(actions => actions.Close())
    .Events(e => e.Close("onClose"))
)
  1. In the global scope of the JavaScript, implement variables for the arrays of "Projects" selections per "Preference".
  2. Implement a function(named "populateMulti") for populating the values of the current MultiSelect(Projects) which stands for the DropDownList(Preference) value.
  3. Use the Change Event of the MultiSelect(Projects) in the Window.
  4. In the Event handler("onMultiInWindowChange"), get the current selection of the MultiSelect(Projects selected in the Window) and assign them to the proper array variable in the global scope depending on the value of the DropDownList(Preference) selected in the Window.
  5. Use the Change Event of the Preference DropDownList in the Window.
  6. In the Event handler("onPreferenceWindowChange"), get the current selection of the DropDownList and the instance of the MultiSelect in the Window. Call the "populateMulti" function by using the pointed values as parameters.
  7. Use the Change Event of the Preference DropDownList of the Main View.
  8. In the Event handler("onPreferenceWindowChange"), get the current selection of the DropDownList and the instance of the MultiSelect of the Main View. Call the "populateMulti" function by using the pointed values as parameters.
  9. Use the Close Event of the Window.
  10. In the Event handler, show the custom button by using the show method. Get the current selection of the DropDownList and the instance of the MultiSelect of the Main View. Call the "populateMulti" function by using the pointed values as parameters.
  11. In the document.ready scope, hide the button and open the Window.
  12. Here is an example of the JavaScript needed:
    var preference1 = [];
    var preference2 = [];
    var preference3 = [];
    var preference4 = [];
    var preference5 = [];


    function onClose() {
        $("#undo").show();

        var preferenceValue = $("#preference").data("kendoDropDownList").value();
        var multi = $("#projects").data("kendoMultiSelect");

        populateMulti(preferenceValue, multi);
    }

    function onParentPreferenceChange() {
        var preferenceValue = $("#preference").data("kendoDropDownList").value();
        var multi = $("#projects").data("kendoMultiSelect");

        populateMulti(preferenceValue, multi);
    }

    function onPreferenceWindowChange() {
        var preferenceInWindow = $("#preferenceInWindow").data("kendoDropDownList").value();
        var multi = $("#projectsInWindow").data("kendoMultiSelect");

        populateMulti(preferenceInWindow, multi);
    }

    function populateMulti(preferenceValue, multi) {

        switch (preferenceValue) {
            case 'Preference 1':
                multi.value(preference1);
                break;
            case 'Preference 2':
                multi.value(preference2);
                break;
            case 'Preference 3':
                multi.value(preference3);
                break;
            case 'Preference 4':
                multi.value(preference4);
                break;
            case 'Preference 5':
                multi.value(preference5);
                break;
        }
    }

    $(document).ready( function() {
        $("#undo").bind("click", function() {
                $("#window").data("kendoWindow").open();
                $("#undo").hide();
            });
    });

    function onMultiInWindowChange() {
        var multiValue = this.value();
        var preferenceValue = $("#preferenceInWindow").data("kendoDropDownList").value();

        switch (preferenceValue) {
            case 'Preference 1':
                preference1 = multiValue;
                break;
            case 'Preference 2':
                preference2 = multiValue;
                break;
            case 'Preference 3':
                preference3 = multiValue;
                break;
            case 'Preference 4':
                preference4 = multiValue;
                break;
            case 'Preference 5':
                preference5 = multiValue;
                break;
        }
    }

The following REPL example implements the steps described above: Using MultiSelect in a Window Related to DropDownList Item

More ASP.NET Core MultiSelect Resources

See Also

In this article