I want to set muliplte values in my dropdownList in kendo UI, but in dataTextField attribute it is accepting only one value

Question

Here is my code Sample:

>  $("#User").kendoDropDownList({
        dataTextField: "UserName",
        dataValueField: "UserID",
        dataSource: users,
        optionLabel: "Select",
    }).data("kendoDropDownList").value(UserID);

The dataSource attribute is set to the object 'users' which consists of associated values. Now with the 'UserName' display value, I want to append the value of 'Gender' as well which is coming from 'users' object, in my dropdownList display.

Answer 1

You should use the template option to do this. Here is some code:

$("#dropdownlist").kendoDropDownList({
  dataSource: [
    { UserName: "Jane Doe", Gender: "Female" },
    { UserName: "John Doe", Gender: "Male" }
  ],
  dataTextField: "UserName",
  template: '#: UserName # (#: Gender #)'
});

And a live demo.