This is a migrated thread and some comments may be shown as answers.
Display Template In Selected DropDownList Value
15 Answers 844 Views
This is a migrated thread and some comments may be shown as answers.
Joshua
Top achievements
Rank 1
Joshua asked on 04 Mar 2012, 07:31 AM
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

15 Answers, 1 is accepted

Sort by
0
chris_cf
Top achievements
Rank 2
answered on 31 Mar 2012, 04:48 AM
I am also interested in this. However, this would be more useful for icons rather than large images like the posters.
0
Eduardo
Top achievements
Rank 1
answered on 04 Apr 2012, 06:11 PM
I'm interesting too! ¿any alternative?
0
Oleg
Top achievements
Rank 1
answered on 09 Aug 2012, 09:10 AM
I'm dig into this issue too. Is some way exists to accomplish that? 
0
hermann
Top achievements
Rank 1
answered on 11 Sep 2012, 08:36 AM
ping?
0
Jan
Top achievements
Rank 1
answered on 12 Sep 2012, 07:51 PM
I waiting for the answer too...
0
James Shelton Agar
Top achievements
Rank 2
answered on 13 Sep 2012, 05:14 AM
Ditto.
0
Georgi Krustev
Telerik team
answered on 13 Sep 2012, 11:26 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James Shelton Agar
Top achievements
Rank 2
answered on 13 Sep 2012, 10:09 PM
Hi Georgi, 

Thanks for the reply. 

Cheers
0
Oleg
Top achievements
Rank 1
answered on 16 Oct 2012, 03:24 PM
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;







0
Paul
Top achievements
Rank 1
answered on 27 Nov 2012, 05:26 PM
function onChange(e) {
 e.sender.span[0].style.backgroundColor = "Red";
}
0
Chris
Top achievements
Rank 1
answered on 07 Feb 2013, 11:12 AM
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?
0
Accepted
Georgi Krustev
Telerik team
answered on 12 Feb 2013, 09:22 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Joshua
Top achievements
Rank 1
answered on 13 Feb 2013, 06:31 AM
0
Zachary
Top achievements
Rank 1
answered on 02 Jan 2014, 01:04 AM
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()));
    }
});

0
Zachary
Top achievements
Rank 1
answered on 06 Jan 2014, 07:38 PM

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>
Asked by
Joshua
Top achievements
Rank 1
Answers by
chris_cf
Top achievements
Rank 2
Eduardo
Top achievements
Rank 1
Oleg
Top achievements
Rank 1
hermann
Top achievements
Rank 1
Jan
Top achievements
Rank 1
James Shelton Agar
Top achievements
Rank 2
Georgi Krustev
Telerik team
Paul
Top achievements
Rank 1
Chris
Top achievements
Rank 1
Joshua
Top achievements
Rank 1
Zachary
Top achievements
Rank 1
Share this question
or