how to return kendoDropDownList in jQuery

Question

I had a code like below

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

now I am trying to create a common code to for kendo dropdownlist as I have multiple Kendo dropdown in my application.

I changed the code to something like below

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

but now when I click on some value of my Kendo DropDownList I get the error -> Uncaught TypeError: Cannot read properties of null (reading 'Name')

Answer 1

In your return statement, you should return the instance of the DropDownList rather than the result of the kendoDropDownList method.

And when you pass the kendoDropDownId argument, presumably since the name implies it should just be the id, then only pass the string and then get the DOM in the function.

Here is an example:

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

You need to get a reference to that newly created DropDownList and return that reference - example