How to bind kendo mvc ui dropdownlist dynamically

问题:

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.

回答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")
)

回答2:

Instead of creating such array which is useless to the dataSource use:

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

回答3:

If you want fill second DropDown on basis of first DropDown value. Telerik Provided,

.CascadeTo("DropDownList2")

Please see following link for detailed information.

Cascading of Dropdown in Telerik dropdownlist

回答4:

If you are not using

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

properties in the definition of second dropdown and you are using the definition mentioned in question 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 2nd dropdown directly in the success function of 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 the list of new patients with properties "PatId" and "PatName" based on the parameter email passed to the function "Messages" in GetPatient controller, and there will be no need for ddlpatients.reload(), infact .reload() is not supported, it will break the execution, so don't use .reload().