Kendo ui 根据另一行中的值筛选剑道网格行中的剑道下拉列表值

我有剑道网格，里面有下拉输入[可编辑]。现在我想根据它旁边的行中的值过滤下拉列表中的值。例如：

_________________________________________
Column 1 | Column 2 (this is a dropdown)
_________________________________________
A        | Show only values relevant to A
__________________________________________
B        | Show values relevant to B
_____________________________________________
C        | Show values relevant to C
_________________________________________

---

您可以执行以下操作

编辑行时，从第一列获取名称

根据第一列值筛选第二列

在下面给定的示例中，我编辑了剑道UI提供的用于级联下拉列表的现有示例，因此我编写了额外的代码来获取第一列的Id，因此在您的示例中，可以排除其他步骤

所需的HTML

<div id="grid"></div>

需要的脚本

<script>
    // array of all brands
    var brands = [
        { brandId: 1, name: "Ford" },
        { brandId: 2, name: "BMW" }
    ];

    // array of all models
    var models = [
        { modelId: 1, name: "Explorer", brandId: 1},
        { modelId: 2, name: "Focus", brandId: 1},
        { modelId: 3, name: "X3", brandId: 2},
        { modelId: 4, name: "X5", brandId: 2}
    ];

    $("#grid").kendoGrid({
        dataSource: {
            data: [
                { id: 1, brandId: 1, modelId: 2 }, // initial data item (Ford, Focus)
                { id: 2, brandId: 2, modelId: 3 } // initial data item (BMW, X3)
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false }, // the id field is not editable
                        brandId: {editable: false}
                    }
                }
            }
        },
        editable: "inline", // use inline mode so both dropdownlists are visible (required for cascading)
        columns: [
        { field: "id" },
        {
            // the brandId column
            title: "Brand",
            field: "brandId", // bound to the brandId field
            template: "#= brandName(brandId) #", // the template shows the name corresponding to the brandId field

        },
        {
            //The modelId column
            title: "Model",
            field: "modelId",  // bound to the modelId field
            template: "#= modelName(modelId) #", //the template shows the name corresponding to the modelId field
            editor: function(container) { // use a dropdownlist as an editor
                var input = $('<input id="modelId" name="modelId">');
                input.appendTo(container);
                input.kendoDropDownList({
                    dataTextField: "name",
                    dataValueField: "modelId",
                    //cascadeFrom: "brandId", // cascade from the brands dropdownlist
                    dataSource: filterModels() // bind it to the models array
                }).appendTo(container);
            }
        },
        { command: "edit" }
        ]
    });

    function brandName(brandId) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].brandId == brandId) {
                return brands[i].name;
            }
        }
    }

    function brandId(brandName) {
        for (var i = 0; i < brands.length; i++) {
            if (brands[i].name == brandName) {
                return brands[i].brandId;
            }
        }
    }

    function modelName(modelId) {
        for (var i = 0; i < models.length; i++) {
            if (models[i].modelId == modelId) {
                return models[i].name;
            }
        }
    }

    // this function will be used by the drop down to filter the data based on the previous column value
    function filterModels()
    {
        // bring the brand name from previous column
        var brandName = $('#modelId').closest('td').prev('td').text();
        // additional work in this sample to get the Id
        var id =  brandId(brandName);
        // filter the data of the drop down list
        var details= $.grep(models, function(n,i){
             return n.brandId==id;
        });
        return details;
    }
</script>

//所有品牌的阵列
var品牌=[
{brandId:1，名字：“Ford”}，
{brandId:2，名字：“BMW”}
];
//所有模型的数组
风险值模型=[
{modelId:1，名称：“Explorer”，brandId:1}，
{modelId:2，name:“Focus”，brandId:1}，
{modelId:3，名称：“X3”，brandId:2}，
{modelId:4，name:“X5”，brandId:2}
];
$（“#网格”）.kendoGrid({
数据源：{
数据：[
{id:1，brandId:1，modelId:2}，//初始数据项（福特，福克斯）
{id:2，brandId:2，modelId:3}//初始数据项（BMW，X3）
],
模式：{
型号：{
id:“id”，
字段：{
id:{editable:false}，//id字段不可编辑
brandId:{可编辑：false}
}
}
}
},
可编辑：“inline”，//使用inline模式，使两个dropdownlists都可见（级联需要）
栏目：[
{字段：“id”}，
{
//布兰迪专栏
标题：“品牌”，
字段：“brandId”，//绑定到brandId字段
模板：“#=brandName（brandId）#”，//模板显示与brandId字段对应的名称
},
{
//modelId列
标题：“模型”，
字段：“modelId”，//绑定到modelId字段
模板：“#=modelName（modelId）#”，//模板显示与modelId字段对应的名称
编辑器：函数（容器）{//使用dropdownlist作为编辑器
变量输入=$（''）；
输入。附加到（容器）；
input.kendoDropDownList({
dataTextField:“名称”，
dataValueField:“模型ID”，
//cascadeFrom:“brandId”//brands下拉列表中的cascade
dataSource:filterModels（）//将其绑定到模型数组
}).附在（容器）上；
}
},
{命令：“编辑”}
]
});
函数brandName（brandId）{
对于（变量i=0；i

这是一张工作票

---

希望对您有所帮助

谢谢各位，您的解决方案派上了用场