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.