DropdownBox values undefined after Ajax call

[Hans]

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

        }

 

 

 

[Ivan Danchev]

Hello Hans,

The DropDownList can be bound to an JSON array. Here's a sample dojo, which shows how such an array can be set as dataSource to the DropDownList by using its setDataSource method. Could you check whether the response in your case matches that of the array from the dojo example? It must be a JSON array and the objects it contains need to have the Text and Value properties you set as dataText and dataValue fields:

.DataTextField("Text")
.DataValueField("Value")

Regards,
Ivan Danchev
Telerik by Progress