Edit this page

Set the name Attribute to ComboBox Items

Environment

Product Progress Kendo UI ComboBox
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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy