How to link a dynamic list of kendo mvc ui

Question

I am working on asp.net mvc with the kendo mvc interface. I have two kendo dropdowns. one for the list of clinics and another for the list of patients in the selected clinic. But there is no direct connection between the clinics and the patient in order to use the cascading drop-down list. To do this, I used ajax calls in the list change event and got a list of patients. and this is my first drop down list 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 dropdown for listpatients

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

I want to dynamically link the patient list to the second drop-down list when the first drop-down list 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 can associate the list with a drop-down list, but all items are displayed as 'undefined' . so please guide me.

Answer 1

From what I can tell, there is a connection between the clinics and the patients, so you can use the CascadeFrom ("DropDownList1") provided in the shells. We use the cascading drop-down list in the same way for relationships 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") ) 

Answer 2

Instead of creating an array that is useless for using dataSource:

 success: function (result) { var ddlPatients = $('#ddlPatients').data('kendoDropDownList'); var main = []; $.each(result, function (k, v) { main.push({ "text": v.PatId, "value": v.PatName }); }); ddlPatients.dataSource.data(main); } }); 

Answer 3

If you want to populate a second DropDown based on the first DropDown value. Telerik

 .CascadeTo("DropDownList2") 

See the following link for more information.

Cascading a drop-down list in a Telerik drop-down list

Answer 4

If you are not using

 .DataSource(source => { source.Read(read => { read.Action ("FunctionName", "ControllerName").Data("filterDropdown1"); }).ServerFiltering(true); }) .CascadeFrom("Dropdown1") 

in the definition of the second drop-down list, and you use the definition mentioned above. i.e: -

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

then you can bind the data to the second dropdown menu directly in the success function of the ajax post.

  function ChangeClinic() { $.ajax({ url: '/Messages/GetPatient', type: 'Post', data: { email: '@User.Identity.Name' }, cache: false, success: function (result) { $('#ddlPatients').data('kendoDropDownList').dataSource.data(result); //ddlPatients.reload(); } }); } 

@ Note: - 1) The result value should contain a list of new patients with the "PatId" and "PatName" properties based on the parameter message passed to the "Messages" function in the GetPatient controller, and there will be no need for ddlpatients.reload (), infact .reload () is not supported, it will break execution, so do not use .reload ().