Hi,
I'm having trouble to populate a Kendo DropdownBox based upon an change event of a datapicker. I see that everything is working fine, even the json that is parsed after the Ajax call (while iterating through the result) is valid by checking it using alerts (see code below). For some reason the values in my dropdownbox are "Undefined" and i don't know how to resolve this. Can someone help me out with this?
I also tried to use the setDataSource as i read here in this forum, but my dropdownbox doesn't do anything (it's not showing any data at all).
Thanks in advance.
Best Regards,
Hans Oosterhuis
The definition of the DropDownBox:
<p>@(Html.Kendo().DropDownList()
.Name(
"AvailableTimes"
)
.DataTextField(
"Text"
)
.DataValueField(
"Value"
)
)
The Ajax call to populate the dropdownbox above:
function
RefreshStartTimes() {
var
employeeId = parseInt($(
'#Appointment_EmployeeId'
).val());
var
worktypeId = parseInt($(
"#Appointment_WorkTypeId"
).val());
var
plannedDate = parseDate($(
"#Appointment_AfspraakVan"
).val());
var
filtermodel = {};
filtermodel = {
EmployeeId: employeeId,
WorkTypeId: worktypeId,
PlannedDate: plannedDate
};
var
filter = JSON.stringify(filtermodel);
$.ajax({
url:
'@Url.Action("GetAvailabeTimeSlots", "Appointment", new { area = string.Empty })'
,
type:
"POST"
,
data: filter,
dataType:
'json'
,
contentType:
'application/json; charset=utf-8'
,
success:
function
(listItems) {
if
(JSON.stringify(listItems) !=
"[]"
) {
//var ddl = $('#AvailableTimes').data("kendoDropDownList");
//ddl.setDataSource(listItems);
//ddl.refresh();
$.each(listItems,
function
(i, listItem) {
$(
"#AvailableTimes"
).data(
"kendoDropDownList"
)
.dataSource.add({
"text"
: listItem.Text,
"value"
: listItem.Value });
alert(
'Listitem is'
+ listItem.Text);
alert(
'Value is'
+ listItem.Value);
alert(
'Selected is'
+ listItem.Selected);
})
//$.each(listItems, function () {
// $.each(this, function (k, v) {
// /// do stuff
// $("#AvailableTimes").data("kendoDropDownList")
// .dataSource.add({ "text": k, "value": v });
// });
//});
//$("#AvailableTimes").data("kendoDropDownList").refresh();
//$('#divSearchPNResults').show();
}
},
error:
function
(XMLHttpRequest, textStatus, errorThrown) {
alert(
"ERROR RefreshCustomerDetail:"
+ errorThrown);
}
});
The Ajax call itself:
public
JsonResult GetAvailabeTimeSlots(AppointmentFilter filter)
{
if
(filter !=
null
)
{
var listItems = _appointmentService.GetSuitableTimesForPlannedDate(filter.WorkTypeId,
filter.EmployeeId,
filter.PlannedDate)
.Select(s =>
new
SelectListItem { Value = s, Text = s })
.ToList<SelectListItem>();
return
Json(listItems, JsonRequestBehavior.AllowGet);
}
return
Json(
null
, JsonRequestBehavior.AllowGet);
}