CODEWITHSUNDEEP
javascripthtmlkendo-uikendo-dropdown
Brian Mains
Brian Mains

Reputation: 50728

KendoDropDownList Option Data Items

I'd like to incorporate the KendoDropDownList into my application, however there is a scenario I can't get to work. The existing application added data- attributes to the ListItem class for the drop down (so it rendered as <option data-xyz="abc" />). There is a legitamite reason it's doing that: the information is used to prepopulate the form on the client-side, but the issue I'm having with the kendoDropDownList is that it builds its own list that represents the list items, but it doesn't bring over these data attributes. Is there a way to link the list item selected to the original item, where I can get the data attributes? Otherwise, it doesn't look like I'll be able to use the control at all.

EDIT: I was using data attributes to do the initialization, along with kendo.init. Below is the HTML:

<select .. data-role="dropdownlist" data-option-label="- Select -">
   <option data-x="y" value="..">..</option>
   <option data-x="y" value="..">..</option>
   .
   .
</select>

Javascript to initialize is:

kendo.init('body');

I wasn't using client-side MVVM binding, FYI. Kendo, however, builds a UL element with LI elements that represents the dropdown, not using the OPTION elements, and as such when it builds the list, it isn't including all of the attributes.

Upvotes: 0

Views: 2147

Answers (2)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Kendo recreates the element, that is why its attributes are lost. I suggest a wrapper function which copies the data- attributes before creating the widget, then after it sets the attributes again:

$.fn.myDDL = function() {
  var el = $(this);
  var attrs = [];

  el.find("option").each(function() {
    attrs.push($(this).data());
  });

  el
    .kendoDropDownList()
    .find("option").each(function(i, e) {
      var keys = Object.keys(attrs[i]);

      for (var k = 0; k < keys.length; k++) {
        $(e).data(keys[k], attrs[i][keys[k]]);
      }
    });

  // Test
  var opt = $("#abc option:eq(0)").data();
  console.log(opt);
};

$(function()
{
    $("#abc").myDDL();
});

Demo

This is ugly, I know, but in those cases kendo is limited and doesn't provides resources to deal with its own results. If there is something available I don't know. Templates won't work in your case, I'm afraid.

Upvotes: 1

Cody Leroy Lindley
Cody Leroy Lindley

Reputation: 76

Have you considered using a template?

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration-template

Upvotes: 0

Related Questions