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

Question

打招呼，

假设我有这样的网格。但是在columns>field values: categories中，我想从DataSource （下）获取数据 ，并显示为dropdownlist。如何实现这种方法？

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，但我想出现类别名称

Answer 1

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

还应使用列的客户端模板属性，如果您希望列显示以外的其他值。在您的情况下，网格列映射到类别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>