При выборе Kendo Listbox создаются повторяющиеся записи в отдельном списке - PullRequest
Новая
       18

При выборе Kendo Listbox создаются повторяющиеся записи в отдельном списке

0 голосов
/ 02 декабря 2018

Когда вы нажимаете Role1 в верхнем списке, он отображает Person 1 и Person 2 один раз.Каждый последующий щелчок по Role1 или Role2 создает дополнительный дубликат в списке под ним.Это почему?Я перепробовал все возможные перестановки частей в KH_ClearKendoListbox, чтобы очистить список перед продолжением, но, похоже, это не помогло.Другая ссылка на эту проблему в переполнении стека предложила использовать setDataSource, но это тоже не помогло.Я застрял и хотел бы знать, почему это происходит в этом сценарии и как это можно решить, чтобы в нижнем списке всегда был только один набор из двух элементов.

    <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>

1 Ответ

0 голосов
/ 02 декабря 2018

Извлечение определения списка из события on change, а затем просто установка данных внутри события onchange сделали свое дело.Так что это ответ:) 

    $(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);
        }
    });
...