Kendo UI 使用外键从数据源获取数据

Question

大家好，

假设我有一个网格 like this。但是在 columns>field values: categories 中，我想从数据源 （下） 中获取数据并显示到下拉列表中。如何实现这个方法？

var categories = new kendo.data.DataSource({
transport: {
    read: {
        url: "./getCategories.php",
        type: "POST"
    }
},
});

输出会像这样

[{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}]

p/s：我的类别栏会显示categoriesID，但我想出现categoriesName

Answer 1

我假设您问的是编辑器模板。当您想要自定义控件而不是网格提供的默认编辑器时，您应该使用 editor property of column。编辑器模板会将值映射回您的模型类别 ID。

如果您希望该列显示与其映射到的值不同的其他值，您还应该使用列的 client template 属性。在您的情况下，网格列映射到类别 ID，但您希望显示类别名称。

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

var ProductDataSrc = [
{"ProductID":"3" , "categoriesID":"56","categoriesName":"TRY"},
{"ProductID":"6" , "categoriesID":"55","categoriesName":"TEST"},
{"ProductID":"2" , "categoriesID":"92","categoriesName":"BOOKING"},
{"ProductID":"62" , "categoriesID":"1","categoriesName":"SYSTEM"},
{"ProductID":"23" , "categoriesID":"2","categoriesName":"SYSTEM2"},
{"ProductID":"12" , "categoriesID":"57","categoriesName":"SYSTEM1"} ];


var categoryDataSrc = [
{"categoriesID":"92","categoriesName":"BOOKING"},
{"categoriesID":"1","categoriesName":"SYSTEM"},
{"categoriesID":"57","categoriesName":"SYSTEM1"},
{"categoriesID":"2","categoriesName":"SYSTEM2"},
{"categoriesID":"55","categoriesName":"TEST"},
{"categoriesID":"56","categoriesName":"TRY"}];


$("#grid").kendoGrid({
  columns: [ {
    field: "categoriesID", title:"Category",
    template: "<strong>#: categoriesName # </strong>",
    editor: function(container, options) {
     var input = $("<input/>");
     input.attr("name", options.field);
     input.appendTo(container);
     input.kendoDropDownList({
       dataValueField:  "categoriesID",
       dataTextField: "categoriesName",
       dataSource: categoryDataSrc
     });
    }  
  },
  { command: ["edit", "destroy"] }],
  dataSource: ProductDataSrc,
  editable: "inline"
});
</script>

Kendo UI 使用外键从数据源获取数据

Kendo UI get data from dataSource using Foreign Key

kendo-ui

kendo-grid