Display Template In Selected DropDownList Value

[Joshua]

Is there a way to display the template for the selected value in the DropDownList?

Providing sample code should not be necessary, as this sample shows what I'm referring to.  Using said sample, what if I wanted the movie poster to show in the selected value?

Thanks, 

Josh

[chris_cf]

I am also interested in this. However, this would be more useful for icons rather than large images like the posters.

[Eduardo]

I'm interesting too! ¿any alternative?

[Oleg]

I'm dig into this issue too. Is some way exists to accomplish that? 

[hermann]

ping?

[Jan]

I waiting for the answer too...

[James Shelton Agar]

Ditto.

[Georgi Krustev]

Hello,

Currently, the DropDownList does not support the required functionality. It provides a template only for the popup items. If you need to put something which is different than the dataTextField, then you can wire the change event and set the SPAN's content. Please note that the rendering of DropDownList uses SPAN elements, so the content could be only inline elements.

Kind regards,
Georgi Krustev
the Telerik team

[James Shelton Agar]

Hi Georgi, 

Thanks for the reply. 

Cheers

[Oleg]

Hello all,

Georgi, I'm trying to implement approach that you suggest in your last comment.

I implement onChange handler. There I try to set <span style="color: red">MY TEXT</span> with 

$(DropDownListID).data("kendoDropDownList").text() , but it appears with escaped special characters: &lt;span style="color: red"&gt;MY TEXT&lt;/span&gt;

[Paul]

function onChange(e) {

 e.sender.span[0].style.backgroundColor = "Red";

}

[Chris]

I've just come across this myself, any chance this could be put into a request list to be changed or a new property to allow the selected item to use the template as well please?

[Georgi Krustev]

Hello,

 
The DropDownList widget uses SPAN element to show the selected text. Hence if you want to display a template inside then you will need to use inline elements too. Here is a simple jsFiddle demo, which shows how to achieve your goal manually. I will sugges you open a uservoice item, where more people can cast their vote for it.

Regards,
Georgi Krustev
the Telerik team

[Joshua]

UserVoice post entered here:

http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3647211-support-templates-in-the-dropdownlist-selected-val

[Zachary]

If you are using MVVM, you can bind onDataBound and onChange to a function in your model. This function uses the same template that applies to the list items. Here is a working jsFiddle that concatenates city and state.

<input data-role="dropdownlist"
       data-bind="source: locations,
                  value: location,
                  events: { dataBound: changeLocationSpanText,
                            change: changeLocationSpanText }"
       data-value-field="locationID"
       data-template="city-state-template"
/>

<script type="text/x-kendo-template" id="city-state-template">
    #= data.city#, #= data.state#
</script>

var model = kendo.observable({
    //...
    changeLocationSpanText: function (e) {
        // e.sender             // Kendo UI dropDownList
        // e.sender.element     // jQuery element
        // e.sender.dataItem()  // JSON object of the selected item

        var template = kendo.template($("#" + e.sender.element.attr('data-template')).html());
        e.sender.span.html(template(e.sender.dataItem()));
    }
});

[Zachary]

Alexander Popov replied to another thread on this issue.

This behavior is supported through the valueTemplate option, as demonstrated here.

It's beautifully simple. Note that I was unable to use this attribute until I upgraded from Q2 2013 to Q3 2013 (2013.3.1119).

http://jsfiddle.net/zacharydl/5L7ae/

<input data-role="dropdownlist"
       data-bind="source: locations, value: location"
       data-value-field="locationID"
       data-template="city-state-template"
       data-value-template="city-state-template"
/>

<script type="text/x-kendo-template" id="city-state-template">
    #= data.city#, #= data.state#
</script>