DropDownList datasource read did not work

[Junius]

Hi there,

I have a dropdownlist control which list all records fetched from a remote data source.   The code below shows the  creation of data source, fetch data and, populates the dropdownlist with records.

getSchedules(): void {
           const schedulesData = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/.../Schedules?entityName=someEntity",
                        cache: false,
                        dataType: "json",
                        contentType: "application/json",
                        type: "GET",
                        headers: window["authenticationBearerToken"]
                    }
                },
                autoSync: true,
                serverFiltering: true,
                error: (e: kendo.data.DataSourceErrorEvent) => {
                    console.log(e);
                }
            });

            schedulesData.fetch().then(() => {
                const schedules = schedulesData.data()[0];

                if (schedules !== undefined && schedules !== null) {
                    // Bind dropdown list to list of schedules
                    $("#schedules").kendoDropDownList({
                        optionLabel: "Choose available schedule",
                        dataTextField: "Name",
                        dataValueField: "ScheduleId",
                        dataSource: schedulesData.data(),
                        autoBind: false,
                        index: 0
                    });
                }
                else {
                    $("#schedules").kendoDropDownList({
                        optionLabel: "No available schedule",
                        dataTextField: "Name",
                        dataValueField: "ScheduleId",
                        dataSource: null,
                        autoBind: false,
                        index: 0
                    });
                }
           }).fail((error) => {
                console.log(error);
            });

 

As such, when a user creates a new schedule, the dropdownlist control should append the newly added schedule without doing a page refresh.  The problem is that, after creating a new schedule, dropdownlist datasource read method didn't work at all.  Code below for posting new schedule

const scheduleCreate: () => void = (): void => {
                        $.ajax({
                            type: "POST",
                            url: baseUrl + `AddSchedule?scheduleData=${scheduleData}`,
                            contentType: "application/json",
                            dataType: "json",
                            cache: false,
                            beforeSend: () => { }
                        }).done((result: any) => {
                            console.log(result);

                            window["UserDialog"](result.message, "OK", undefined);
                            isSuccess = result.isSuccess;

                            if (result.isSuccess) {
                                // refresh schedule's dropdown list
                                const schedulesDropdownList = $("#schedules").data("kendoDropDownList");

                                schedulesDropdownList.dataSource.read();
                                schedulesDropdownList.refresh();
                            }
                        }).fail((error: any) => {
                            console.log(error);
                        });
                    };

 

I tried several examples in Kendo UI dropdownlist API documentation, but no luck at all.  I also searched in telerik forums but couldn't find any related issues.

What seems go wrong in my dropdownlist configuration? or is there lacking in the datasource config?

Please help.

 

 

 

 

 

 

[Joana]

Hi Junius,

I would advice to initialize the DropDownList with the dataSource. Meaning that the code should look like something as follows:

getSchedules(): void {
    const schedulesData = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/.../Schedules?entityName=someEntity",
                cache: false,
                dataType: "json",
                contentType: "application/json",
                type: "GET",
                headers: window["authenticationBearerToken"]
            }
        },
        autoSync: true,
        serverFiltering: true,
        error: (e: kendo.data.DataSourceErrorEvent) => {
            console.log(e);
        }
    });

    $("#schedules").kendoDropDownList({
        optionLabel: "Choose available schedule",
        dataTextField: "Name",
        dataValueField: "ScheduleId",
        dataSource: schedulesData,
        index: 0
    });

You could use optionLabelTemplate to change it in terms of the presence of dataSource:

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/optionlabeltemplate

That way we'll be sure that any calls to the dropdownlist.dataSource will take affect.

Let me know what you think of this approach or you could share a runnable sample where we could examine the use case and provide further assistance.

Regards,
Joana
Progress Telerik

[Junius]

Hi Joana,

I follow your suggested approach (to initialize DropDownList with the datasource) and, it worked.  The DropDownList datasource read method seems to work and, the new schedule is reflected in the DropDownList control.

I was wondering what's the difference between the two approach? 

Using the straightforward data source bind rather than using kendo.data.DataSource fetch.then() callback function?

Cheers,

Junius

[Joana]

Hi Junius,

I am glad that you've managed to achieve your scenario.

DropDownList internally creates a dataSource instance when the dataSource is of array type. So, the initialized DataSource (schedulesData ) is different from the one actually bound to the DropDownList.  

It's possible to fetch the data and then create the dropdownlist, but still the dataSource option should point to it and not to the returned data array. However, the DropDownList automatically do the fetch for you when autoBind: true option is set and there is no extra logic required. That's why my first suggestion was to take advantage of this functionality.

Let me know if you have further questions.

Regards,
Joana
Progress Telerik