This is a migrated thread and some comments may be shown as answers.

DropDownList datasource read did not work

3 Answers 827 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Junius
Top achievements
Rank 2
Junius asked on 22 Jan 2019, 01:14 AM

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.

 

 

 

 

 

 

3 Answers, 1 is accepted

Sort by
0
Joana
Telerik team
answered on 23 Jan 2019, 03:16 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Junius
Top achievements
Rank 2
answered on 24 Jan 2019, 03:44 AM

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

0
Joana
Telerik team
answered on 25 Jan 2019, 02:54 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Junius
Top achievements
Rank 2
Answers by
Joana
Telerik team
Junius
Top achievements
Rank 2
Share this question
or