使我的级联DropDownList工作缺少什么

时间:2013-08-21 02:29:51

标签: kendo-ui kendo-combobox

此处显示非常简单的案例:http://jsbin.com/ahoYoPi/3/edit

我需要指定孩子的内部字段对父母的值字段进行过滤(eq)是“category_id”......当然,Kendo的文档没有说明如何做到这一点......或者是它一些非常明显的东西不值得解释?

    var categoriesList = new Array (
    {"id":"1","categoryName":"Fruits"},
    {"id":"2","categoryName":"Vegetables"} );

var productsList = new Array(
    {"id":"1","categorie_id":"1","productName":"Apples"},
    {"id":"2","categorie_id":"1","productName":"Oranges"},
    {"id":"3","categorie_id":"2","productName":"Carottes"},
    {"id":"4","categorie_id":"2","productName":"Patatoes"});

$("#categories").kendoDropDownList({
    dataTextField: "categoryName",
    dataValueField: "id",
    dataSource: categoriesList,
    optionLabel: "----------------" ,
    change: function() {
        $("#products").data("kendoDropDownList").value(0);
    }
});
$("#products").kendoDropDownList({
    cascadeFrom: "categories",
    dataTextField: "productName",
    dataValueField: "id",
    dataSource: productsList,
    optionLabel: "----------------" ,
});

1 个答案:

答案 0 :(得分:4)

有关级联的文档,请访问:http://docs.kendoui.com/getting-started/web/combobox/cascading

以下是过滤的工作原理:

  

如果父级有值,则子级将启用并且将会   根据它过滤其数据。这里过滤器选项的外观如何   喜欢:       field: "parentID", //the dataValueField of the parent operator: "eq", value: "" //parent's value

这意味着子下拉列表(组合框)将使用通过父级dataValueField配置的字段进行过滤(级联)。在您的情况下,这不起作用,因为父项的dataValueField设置为“id”。但是,此字段在productsList数组中有不同的用途。

目前没有任何功能允许用户指定用于级联的字段。

您有两种选择:

  1. 做@OnaBai的建议。将categoriesList的“id”字段重命名为“categorie_id”并相应地设置dataValueField
  2. 手动实施级联。首先删除cascadeFrom选项,然后在父项的更改事件中执行此操作:

    change: function() {
        var products = $("#products").data("kendoDropDownList");
    
        products.dataSource.filter( {
          field: "categorie_id",
          value: this.value(),
          operator: "eq"
        });
    
        products.value(0);
    }
    

    这是一个现场演示:http://jsbin.com/ogEj/1/edit