Set the name Attribute to ComboBox Items

Environment

Product	Progress® Kendo UI® ComboBox for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

I want to display a name to each individual item of my Kendo UI ComboBox.

How can I set the name attribute to each of the ComboBox items?

Solution

1. In the dataBound event handler of the ComboBox and by using the API of the widget, get the array of the DOM elements which correspond to the data items from the DataSource and the data items themselves.

2. Use the jQuery attr method to set the attribute.

    <input id="combobox" />
    <script>
      $("#combobox").kendoComboBox({
          dataSource: [
              { Name: "Anna", Id: 1 },
              { Name: "Bob", Id: 2 },
              { Name: "Daniel", Id: 3 },
              { Name: "Charlie", Id: 4 }
          ],
          dataTextField: "Name",
          dataValueField: "Id",
          dataBound: function(e) {
            var items = e.sender.items();
            var dataItems = e.sender.dataItems();
            for(var i=0; i < dataItems.length; i++) {
              $(items[i]).attr("name", dataItems[i].Id.toString())
            }
          }
      });
    </script>

For the full implementation of the approach, refer to this Dojo example.

See Also

• jQuery css Method