javascript - Kendo Ui Dropdown 结合 dataTextField

Question

如何组合下拉列表中显示的多个值。示例姓氏+姓名

FULL DEMO

<script>
$("#dropdownlist").kendoDropDownList({
    dataSource: [
        { Surname: "Sir1", Name: "Parent1", Id: 1 },
        { Surname: "Sir2", Name: "Parent2", Id: 2 }
    ],
    optionLabel: "- Please Select -",
    dataTextField: "Surname"+"Name",
    dataValueField: "Id"
});
</script>

Answer 1

您可以为该列使用模板

$("#dropdownlist").kendoDropDownList({
    dataSource: [
        { Surname: "Sir1", Name: "Parent1", Id: 1 },
        { Surname: "Sir2", Name: "Parent2", Id: 2 }
    ],
    optionLabel: "- Please Select -",
    dataTextField: "Surname"+"Name",
    dataValueField: "Id",
  template: kendo.template($("#template").html())
});

你的html

<input id="dropdownlist" />
<script id="template" type="text/x-kendo-template">
  <span>
    #: Surname # #: Name #
  </span>
</script>

这是一些文档

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist/configuration/template