Kendo Ui Dropdown 结合 dataTextField

【问题标题】：Kendo Ui Dropdown combine dataTextFieldKendo Ui Dropdown 结合 dataTextField
【发布时间】：2019-12-13 01:49:51
【问题描述】：

如何组合下拉多个值在下拉列表中显示。示例Surname + Name

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>

【问题讨论】：

定义另一个数组，将两个字段组合成一个
@dontbannedmeagain 我的解决方案对你有用吗？

标签： javascript kendo-ui kendo-grid kendo-dropdown

【解决方案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

【讨论】：