Question

如何在 jQuery 中返回 kendoDropDownList

2022-12-11

387

jquery kendo-ui kendo-dropdown

我有如下代码

let ctrlClassificationLevel = $('#ctrlClassificationLevel').kendoDropDownList();
ctrlClassificationLevel.kendoDropDownList({
    dataTextField: "Name",
    dataValueField: "Id",
    dataSource: data,//data coming from db
    //optionLabel: "User Type",
    filter: "contains",
    suggest: true,
});

现在，我尝试为 kendo dropdownlist 创建一个通用代码，因为我的应用程序中存在多个 Kendo 下拉菜单。

我将代码更改为如下代码

function BindKendoDropDownListWOCV(kendoDropDownId, textField, valueField, data, optionLabel, filter, suggest, index, value, changeFunction) {
    return kendoDropDownId.kendoDropDownList({
        dataTextField: textField,
        dataValueField: valueField,
        dataSource: data,
        optionLabel: optionLabel,
        filter, filter,
        suggest: suggest,
        index: index,
    });
}

ctrlClassificationLevel = BindKendoDropDownListWOCV(ctrlClassificationLevel, 'Name', 'Id', data, null, 'contains', true, null, null, undefined);

但是现在，当我单击 Kendo DropDownList 中的某些值时，出现错误 -> Uncaught TypeError: 无法读取 null 属性（读取“名称”）

Answer 1

在您的返回语句中，您应该返回 DropDownList 的实例，而不是 kendoDropDownList 方法的结果。

并且当您传递 kendoDropDownId 参数时，大概因为名称暗示它应该只是 id，然后只传递字符串，然后在函数中获取 DOM。

这是一个例子：

const BindKendoDropDownListWOCV = (kendoDropDownId, textField, valueField, data, optionLabel, filter, suggest, index, value, changeFunction) => {
    const element = $(kendoDropDownId);
    if (!element) {
        console.error(`Unable to find the DOM by selector: ${kendoDropDownId}`);
        return null;
    }
    return element.kendoDropDownList({
        dataTextField: textField,
        dataValueField: valueField,
        dataSource: data,
        optionLabel: optionLabel,
        filter, filter,
        suggest: suggest,
        index: index,
    }).data('kendoDropDownList');
}
let ctrlClassificationLevel = BindKendoDropDownListWOCV('#ctrlClassificationLevel', 'Name', 'Id', data, null, 'contains', true, null, null, undefined);

Answer 2

您需要获取对新创建的 DropDownList 的引用并返回该引用 - 示例

Aleksandar

2022-12-12