New to Kendo UI for jQuery? Download free 30-day trial

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

In this article