using a key/value pair array for datasource for DropDownList

[journeyman]

is it possible to add a key/value  pair array  for datasource for DropDownList

The guide here shows how to add a value/array as the datasource.

<input id="dropdownlist" />
<script>
$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: ["One", "Two"]
  }
});
</script>
However I need something like this. i.e a key/value pair.
i.e I need to display the key in the dropdown but return the value if the dropdown is selected. 

<input id="dropdownlist" /><script>
$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: [{email: 'one'} , {email: 'Two'}],
    dataTextFiled: "email",
    dataValueField: "email"
  }
});
</script>

 

[Eyup]

Hello,

 

Thank you for reaching out.

Yes, it is possible to use a key/value pair array as the data source for the Kendo UI DropDownList. You just need to configure the dataTextField and dataValueField options to specify which fields to use for display and value.

Here’s how you can set it up:

• Your data source should be an array of objects, each with the desired keys.
• Use dataTextField to specify the field to display in the dropdown.
• Use dataValueField to specify the field to use as the value when an item is selected.

Example:

$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: [
      { key: "First", value: 1 },
      { key: "Second", value: 2 }
    ]
  },
  dataTextField: "key",      // Displayed in the dropdown
  dataValueField: "value"    // Used as the value when selected
});

If your object only has one property (e.g., { email: "[e-mail]" }), you can set both dataTextField and dataValueField to "email".

Note: In your example, there is a typo: it should be dataTextField, not dataTextFiled.

If you want to display a combination of fields (e.g., firstName + lastName), you can use the template option:

$("#dropdownlist").kendoDropDownList({
  dataSource: {
    data: [
      { firstName: "John", lastName: "Doe", id: 1 },
      { firstName: "Jane", lastName: "Smith", id: 2 }
    ]
  },
  dataTextField: "firstName",   // Required, but overridden by template
  dataValueField: "id",
  template: "#= firstName # #= lastName #"
});

For more details, see:

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

 

Let me know what you think and if this is helpful.

 

Regards,
Eyup
Progress Telerik