Issue with kendo dropdown list template

Question

I'm having an issue here. I have a kendo dropdown list that uses a template for the items so that I can have multiple columns. I also need more space so I have bigger list width than the dropdown width; i.e. I used

this.list.width(400);

in dataBound even of the list to make sure I can see the list as it should. Now, I need to add some header, to name the columns of the items so I added:

this.list.find("ul").prepend(header);

in the dataBound event as well. I should clarify that the template I'm using consists of Divs and also, the header HTML is in Divs. the header looks just fine but the dropdown does not work well. When I select first item, 2nd item is selected, and when I select last item, there's an error because it does not find next item. I tried using table in the header HTML but still the same issue. If I only use text (which does not fulfill my need), the dropdown works well. Can anyone tell me why it's happening? Can anyone tell me how to have a header that does not ruin the overall working of dropdown list?

Note: I can't have simple texts, I need to style the header according to the position of the columns in dropdown list.

Vojtiik Vojtiik · Accepted Answer · 2013-06-06T16:25:23

Might be because of the dataBound event, it might still be too early at that point (yes there is no other handy event afterwards I know). Add the header when the drop down is opened (event : open) for the first time.

I just opened the kendo dropdownlist demo page and in Chrome > inspect element added header <div>header</div> just before the <ul> in the k-animation-container, same way you are attempting to do. Works fine - header is there - the colours keep changing as they should. Same story for the template demo example. (http://demos.kendoui.com/web/dropdownlist/index.html).

   <div class="k-list-container k-popup k-group k-reset" id="color-list"  ...>
     <div>header</div>
     <ul unselectable="on" class="k-list k-reset" tabindex="-1" role="listbox" aria-hidden="true" id="color_listbox" aria-live="off" style="overflow: auto;">
            <li tabindex="-1" role="option" unselectable="on" class="k-item">Black</li>
            <li tabindex="-1" role="option" unselectable="on" class="k-item">Orange</li>
            <li tabindex="-1" role="option" unselectable="on" class="k-item k-state-selected k-state-focused" id="color_option_selected" aria-selected="true">Grey</li>
       </ul>
    </div>

Issue with kendo dropdown list template

2 Answers