如何动态绑定kendo mvc ui dropdownlist

Question

我正在使用Kendo UI mvc在asp.net mvc上工作。我有两个kendo下拉列表。一个用于所选诊所的诊所名单和另一名患者名单。但是，诊所和患者之间没有使用级联下拉列表的直接关系。为此，我在下拉列表更改事件中使用了ajax调用并获取患者列表。这是我的名单第一下拉列表诊所

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

，这是我listpatients

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

我要动态绑定的患者第二下拉列表列表中第二个下拉列表，当第一下拉列表的变化，

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

我能够绑定列表下拉列表但“未定义”所有项目表演。所以请指导我。

Answer 1

如果要在第一个DropDown值的基础上填充第二个DropDown。 Telerik的提供，

.CascadeTo("DropDownList2") 

请参阅下面的链接了解详细信息。

Cascading of Dropdown in Telerik dropdownlist

Answer 2

而不是创造这样的阵列是没用到数据源使用：

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

从我可以告诉，有诊所和患者之间的关系，所以你应该能够使用提供在包装中的CascadeFrom（“DropDownList1”）。我们使用级联下拉列表以类似的方式为学区和学校之间的关系：

@(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 4

如果你没有在第二个下拉定义使用

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

属性和您正在使用的定义上面提到的问题。即： -

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

然后你可以将数据绑定到第二个下拉直接在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）的结果值应包含的新患者的GetPatient控制器属性基于传递给函数的“消息”参数电子邮件“PatId”和“PatName”，还有列表将不需要ddlpatients.reload（），事实上.reload（）不被支持，它会破坏执行，所以不要使用.reload（）。