0

When you click Role1 in the top listbox it will display Person 1 and Person 2 once. Every subsequent click on Role1 or Role2 generates an additional duplicate in the listbox below it. Why is that? I tried all possible permutations of the parts in KH_ClearKendoListbox to get the listbox cleared before proceeding but that did not seem to help. The other reference to this issue on Stack Overflow suggested to use setDataSource but that did not help either. I am stuck and would love to know why this is happening in this scenario and how this might be solved so there is only one set of two items in the bottom listbox at all times. 

    <html>
    <head runat="server">
        <script type="text/javascript">
            $(document).ready(function () {
                var initDS;
                var rolesDS = initDS = new kendo.data.DataSource({
                    data: [{ id1: 3, name1: "Role1" },
                           { id1: 4, name1: "Role2" }]
                });
                $("#lstRoles").kendoListBox({
                    dataValueField: "id1",
                    dataTextField: "name1",
                    dataSource: rolesDS,
                    change: onChangeRoles,
                }).data("kendoListBox");

                function onChangeRoles(e) {
                KH_ClearKendoListbox($("#lstIndividuals"));
                initDS = new kendo.data.DataSource({
                    data: [{ id2: 3, name2: "Person 1" },
                           { id2: 4, name2: "Person 2" }]
                });
                $("#lstIndividuals").kendoListBox({
                    dataValueField: "id2",
                    dataTextField: "name2",
                }).data("kendoListBox").setDataSource(initDS);
            }
            function KH_ClearKendoListbox(lst) {
                var listBox = lst.data("kendoListBox");
                if (listBox === undefined) return;
                var itemcount = listBox.dataSource._data.length;
                for (var i = 0; i < itemcount; i++)
                    listBox.remove(listBox.items().first());
                listBox.refresh();
                listBox.clearSelection();
                listBox.destroy();
            }
        });
        </script>
    </head>
    <body>
        <form id="form2" runat="server" 
        style="background-color: cornflowerblue">
            <div class="container" style="padding:30px">
                <select id="lstRoles" style="width: 265px"></select>
                <br />
                <select id="lstIndividuals" style="width: 
                265px; height: 233px"> 
                </select>
            </div>
        </form>
    </body>
    </html>
Jurgen Achterbosch
  • 1
  • 1
  • Additional Items in the header were: – Jurgen Achterbosch Dec 01 '18 at 21:46
  • – Jurgen Achterbosch Dec 01 '18 at 21:47
  • Possible duplicate of [There is no ListBox.SelectionMode="None", is there another way to disable selection in a listbox?](https://stackoverflow.com/questions/1398559/there-is-no-listbox-selectionmode-none-is-there-another-way-to-disable-select) – L Y E S - C H I O U K H Dec 01 '18 at 21:53
  • No this is not a duplicate of that issue as I am still needing to be able to select the top listbox and only re-display two items in the bottom listbox and not have them duplicate. I probably should make the example show two different lists of person items but with this example it does show the problem at hand. – Jurgen Achterbosch Dec 01 '18 at 22:57
  • Neither of the suggestions in this stack overflow issue provides a solution to the problem in this issue. https://stackoverflow.com/questions/50763006/kendo-ui-listbox-displaying-duplicate-items/50765962 so it also is not a duplicate item. – Jurgen Achterbosch Dec 02 '18 at 00:28

1 Answers1

0

Pulling the definition of the listbox out of the on change event and then just setting the data inside the onchange event did the trick. So this is answered :)

    $(document).ready(function () {
        var rolesDS = initDS = new kendo.data.DataSource({
                data: [
                    { id1: 3, name1: "Role1" },
                    { id1: 4, name1: "Role2" }
                ]
            });
        $("#lstRoles").kendoListBox({
            dataValueField: "id1",
            dataTextField: "name1",
            dataSource: rolesDS,
            change: onChangeRoles,
        }).data("kendoListBox");

        var ds;
        var listbox = $("#lstIndividuals").kendoListBox({
            dataValueField: "id2",
            dataTextField: "name2",
            dataSource: ds
        }).data("kendoListBox");

        function onChangeRoles(e) {

            var list = $("#lstRoles").data("kendoListBox");
            var selectedRow = list.select();
            var selectedData = e.sender.dataSource._data[selectedRow.index()];
            if (selectedData.id1 == 3) {
                ds = new kendo.data.DataSource({
                    data: [
                        { id2: 1, name2: "Person 1" },
                        { id2: 2, name2: "Person 2" }
                    ]
                });
            }
            if (selectedData.id1 == 4) {
                ds = new kendo.data.DataSource({
                    data: [
                        { id2: 3, name2: "Person 3" },
                        { id2: 4, name2: "Person 4" }
                    ]
                });
            }
            listbox.setDataSource(ds);
        }
    });
Jurgen Achterbosch
  • 1
  • 1