Kendo UI ListBox移动项时添加undefined问题求助

问题场景 #

使用jQuery版Kendo UI 2021.1.119版本，ListBox组件初始化及初始状态显示正常，但转移项时原ListBox的项被移除，目标ListBox添加的却是undefined。已配置connectWith关联两个组件，初始数据显示符合预期。

问题根源 #

Kendo ListBox的connectWith属性要求传入目标ListBox的CSS选择器或DOM元素，而非自定义的name属性值。当前代码中connectWith: modelUserRoles.listBox.selected.name传入的是字符串listbox-roles-selected，这不是有效的CSS选择器（缺少#前缀），导致组件无法正确定位目标ListBox的数据源，转移时无法获取有效数据项，最终显示undefined。

解决方案 #

将connectWith的值改为目标ListBox的CSS选择器（即你定义的selector属性值），确保组件能正确关联到目标ListBox。

修正后的代码 #

{
    listBox: {
        available: {
            name: 'listbox-roles-available',
            selector: '#listbox-roles-available',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        // 修正：使用目标ListBox的选择器而非自定义name
                        connectWith: modelUserRoles.listBox.selected.selector,
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId',
                        toolbar: {
                            tools: ['transferTo', 'transferFrom', 'transferAllTo', 'transferAllFrom']
                        }
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        },
        selected: {
            name: 'listbox-roles-selected',
            selector: '#listbox-roles-selected',

            element: function() {
                const element = $(this.selector);
                return element;
            },
            init: function () {
                const element = this.element();
                if (element) {
                    element.kendoListBox({
                        dataTextField: 'RoleName',
                        dataValueField: 'RoleId'
                    });
                }
                return this.widget();
            },
            setItems: function (items) {
                items = items || [];
                const listbox = this.widget();
                listbox.remove(listbox.items());
                for (let item of items) {
                    listbox.add(item);
                }
            },
            widget: function () {
                const element = this.element();
                return element?.data('kendoListBox');
            }
        }
    }
}

额外提示 #

如果目标ListBox的初始化时机晚于当前组件，也可以直接传入目标组件的DOM元素引用（modelUserRoles.listBox.selected.element()），避免选择器查找的潜在问题，前提是确保目标元素已存在于DOM中。

内容的提问来源于stack exchange，提问作者David