How to bind kendo mvc ui dropdownlist dynamically

Question

I am working on asp.net mvc with Kendo UI mvc. I have two kendo dropdown lists. one for list of clinics and another of list of patients in selected clinic. But there is no direct relationship between clinic and patient to use the cascading dropdownlist. for that i have used ajax calls in dropdownlist change event and get list of patients. and this is my first dropdownlist for list clinics

 @(
  Html.Kendo().DropDownList()
  .Name("ddlClinics")
  .Events(e=>e.Change("ChangeClinic"))
  .BindTo(new SelectList((List<Account.Entities.Clinic>)ViewBag.lstClinic,
 "ClinicID", "ClinicName")))

and this is my second dropdownlist for listpatients

@(
 Html.Kendo().DropDownList()
.Name("ddlPatients")
.BindTo(new SelectList((List<Patient>)ViewBag.Patients, 
"PatId", "PatName"))))

I want to dynamically bind the list of patients to second dropdownlist when the first dropdownlist changes,

function ChangeClinic()
{
$.ajax({
url: '/Messages/GetPatient',
 type: 'Post',
 data: { email: '@User.Identity.Name' },
 cache: false,
 success: function (result) {
 var ddlPatients = $('#ddlPatients').data('kendoDropDownList');
 var main = [];
 $.each(result, function (k, v) {
 main.push({ "PatId": v.PatId, "PatName": v.PatName });
  });
  ddlPatients.dataTextField = "PatName";
  ddlPatients.dataValueField = "PatId";
  ddlPatients.dataSource.data(main);
  ddlPatients.reload();
 }
 });
}

i am able to bind the list to dropdownlist but all items are shows as 'undefined'. so please guide me.

Answer 1

From what I can tell, there is a relationship between clinics and patients so you should be able to use the CascadeFrom("DropDownList1") provided in the wrappers. We use a cascading dropdownlist in a similar fashion for the relationship between school districts and schools:

@(Html.Kendo().DropDownList()
            .Name("District")
            .HtmlAttributes(new { style = "width:300px;" })
            .BindTo(ViewBag.districts)
            .DataTextField("DistrictName")
            .DataValueField("DistrictID")
            .OptionLabel("Select District")
)
@(Html.Kendo().DropDownList()
            .Name("School")
            .HtmlAttributes(new { style = "width:300px;" })
            .CascadeFrom("District")
            .BindTo(ViewBag.schools)
            .DataTextField("SchoolName")
            .DataValueField("SchoolID")
            .OptionLabel("Select School")
)