Change Selection Mode in ListView

Environment

Product	Progress® Kendo UI® ListView for jQuery
Product Version	Created version 2018.1.117

Description

How can I allow the user to change the selection mode in the ListView based on a selection from a DropDownList or another component?

Solution

1. Handle the change event for the DropDownList or the other component that is used for changing the selection mode.
2. Get the selected selection mode value.
3. Call the setOptions() method with settings that configure the new selection mode.
4. Call the refresh() method for the ListView.

<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

<div class="demo-section k-content wide">
    <select id="mode">
    </select>

    <ul id="listView2"></ul>
</div>

<script type="text/x-kendo-template" id="template">
        <li>#:ProductName#</li>
      </script>

<script>
    $(function () {
        var dataSource = new kendo.data.DataSource({
            data: products
        });

        $("#mode").kendoDropDownList({
            dataSource: {
                data: [
                    { name: "Single" },
                    { name: "Multiple" }
                ]
            },
            optionLabel: "-- Select option --",
            dataTextField: "name",
            dataValueField: "name",
            change: function (e) {
                var selectedValue = this.value();

                var listView2 = $("#listView2").getKendoListView();

                //call set options only if the selection mode is different
                if (selectedValue == "Single" && listView2.options.selectable != "single") {
                    listView2.setOptions({ selectable: "single" });
                    listView2.refresh();
                } else if (selectedValue == "Multiple" && listView2.options.selectable != "multiple") {
                    listView2.setOptions({ selectable: "multiple" });
                    listView2.refresh();
                }
            }
        });


        $("#listView").kendoListView({
            dataSource: {
                data: [
                    { name: "Single" },
                    { name: "Multiple" }
                ]
            },
            template: "<div>#:name#</div>",
            selectable: true,
            change: function (e) {
                var data = this.dataSource.view();
                var selectedItem = $.map(this.select(), function (item) {
                    return data[$(item).index()].name;
                });

                var listView2 = $("#listView2").getKendoListView();

                //call set options only if the selection mode is different
                if (selectedItem[0] == "Single" && listView2.options.selectable != "single") {
                    listView2.setOptions({ selectable: "single" });
                    listView2.refresh();
                } else if (selectedItem[0] == "Multiple" && listView2.options.selectable != "multiple") {
                    listView2.setOptions({ selectable: "multiple" });
                    listView2.refresh();
                }
            }
        });
    });


    $(function () {
        var dataSource = new kendo.data.DataSource({
            data: products
        });

        $("#listView2").kendoListView({
            dataSource: dataSource,
            template: kendo.template($("#template").html()),
            selectable: false
        });


    });
</script>

<style>
    ul {
        height: 200px;
        overflow: auto;
        list-style: none;
        padding: 0;
    }

    li {
        padding: 2px;
        cursor: pointer;
    }

    .k-listview>.k-selected {
        background-color: #78c8a0;
    }
</style>