Question

我正在使用kendo Grid Editor函数来实现Country＆amp;的级联DropDownList。弹出状态（编辑表格）。但是我无法做到这一点（两个列表都已成功填充，但它们没有级联。就像用户选择“国家/地区”选项时，应根据所选的国家/地区选项填充“州名单”）。请帮我。我尝试过Telerik网站的许多解决方案，但他们使用数组，Odata作为他们的数据源。我从数据库获取数据。

这是我的代码

控制器：

      public JsonResult Details()
      {

     var country = dbforcountry.Countries.ToLoist();
     list<SelectListItems> licountry = new list<SelectListItems>();
     foreach (var i in country)
     {
     licountry .Add(new list<SelectListItems> {Text = u.Name, Value = 
     u.ID.ToString() } );
     }

     return Json(new SelectList(licountry, "Value", "Text",        
     JsonRequestBehaviour.AllowGet))

     }

     public JsonResult getstates(int id)
     {

      var states= dbforcountry.States.ToLoist();
      list<SelectListItems> listates = new list<SelectListItems>();
      foreach (var i in states) 
      {
      listates.Add(new list<SelectListItems> {Text = u.Name, Value = 
      u.ID.ToString() } );
      }

      return Json(new SelectList(listates, "Value", "Text", 
      JsonRequestBehaviour.AllowGet))

      }

编辑器功能（查看）：

       function CountryDropDown(container, options)
       {
       $('<input id="Countrydropdown" data-text-field="Text" data-value-
       field="Value" data-bind="value:'+options.field+'" />')
       .appendTo(container)
       .kendDropDownList({

        autoBind: false,
        dataTextField="Text", 
        dataValueField="Value",
        dataSource: {
        type: "json",
        transport:{
        read:{
          url: "../mycontroller/Details",
          method:"POST"
            }
           }
          },
          })
          }

        function StateDropDown(container, options)
        {
        $('<input id="Statedropdown" data-text-field="Text" data-value-
        field="Value" data-bind="value:'+options.field+'" />')
        .appendTo(container)
        .kendDropDownList({

         autoBind: false,
         dataTextField="Text", 
         dataValueField="Value",
         dataSource: {
         type: "json",
         transport:{
         read:{
          url: "../mycontroller/getstates",
          method:"POST"
            }
           }
           },
           })
           }
           }

           })
           }

Answer 1

您错过了StateDropDown上的cascadeFrom标记。

$('<input id="Statedropdown" data-text-field="Text" data-value-
    field="Value" data-bind="value:'+options.field+'" />')
    .appendTo(container)
    .kendDropDownList({
         autoBind: false,
         cascadeFrom: "Countrydropdown", 
         dataTextField="Text", 
         dataValueField="Value",
         dataSource: {
             type: "json",
                 transport:{
                    read:{
                        url: "../mycontroller/getstates",
                        method:"POST"
                    }
             }
         },
     });

注意：如果您通过编辑器级联下拉菜单（可能通过网格控件），您可以找到如何cascade drop downs within a grid的示例。

修改

如果Telerik解决方案不可行，另一个用于链接两个下拉列表的解决方案（即城市中的选择下拉驱动状态下拉列表中的可用项目），您可以利用选择时触发的change事件来自城市的项目下拉。

在初始化期间禁用StateDropDown并提供空的dataSource：

$('<input id="Statedropdown" data-text-field="Text" data-value- field="Value" data-bind="value:'+options.field+'" />') .appendTo(container) .kendDropDownList({ enable: false, autoBind: true, cascadeFrom: "Countrydropdown", dataTextField="Text", dataValueField="Value", dataSource: [] });

将change事件发送到CountryDropDown，该AJAX会对您的控制器功能getstates进行id调用，提供该国家的$('<input id="Countrydropdown" data-text-field="Text" data-value- field="Value" data-bind="value:'+options.field+'" />') .appendTo(container) .kendDropDownList({ autoBind: false, dataTextField="Text", dataValueField="Value", dataSource: { type: "json", transport:{ read:{ url: "../mycontroller/Details", method:"POST" } } }, change: function(e) { // extract item selected var item = this.dataItem(); $.ajax({ type: "POST", url: "/yourController/getstates", data: JSON.stringify(item.ID), // ID of country selected dataType: "json", contentType: "application/json", async: true, success: function (response) { // response will contain listates returned from controller var stateDropDown = $("#Statedropdown").data("kendoDropDownList")'; // changed to use another approach to set dataSource var dataSource = new kendo.data.DataSource({ data: response }); stateDropDown.setDataSource(dataSource); } }); } });被选为参数：

AJAX

代码未经测试，因此您可能需要对stateDropDown电话进行一些调整/如果在网格中使用下拉菜单（仍然不知道是否是），您可能需要得到距离所选countryDropDown最近的success，但这可以让您走上正确的轨道。

编辑

更改了AJAX调用的dataSource方法以使用setDataSource函数。请注意，在分配到剑道下拉列表之前，您需要使用response构建$number = 299; echo '<br/>Result '.floor($number / 100) * 100;。

使用编辑器功能的Kendogrid Cascading DropdownList

1 个答案: