Display Template In Selected DropDownList Value

16 posts, 1 answers
  1. Joshua
    Joshua avatar
    5 posts
    Member since:
    Dec 2011

    Posted 04 Mar 2012 Link to this post

    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
  2. chris_cf
    chris_cf avatar
    53 posts
    Member since:
    Jul 2007

    Posted 30 Mar 2012 Link to this post

    I am also interested in this. However, this would be more useful for icons rather than large images like the posters.
  3. Kendo UI is VS 2017 Ready
  4. Eduardo
    Eduardo avatar
    3 posts
    Member since:
    Mar 2012

    Posted 04 Apr 2012 Link to this post

    I'm interesting too! ¿any alternative?
  5. Oleg
    Oleg avatar
    4 posts
    Member since:
    Jul 2012

    Posted 09 Aug 2012 Link to this post

    I'm dig into this issue too. Is some way exists to accomplish that? 
  6. hermann
    hermann avatar
    43 posts
    Member since:
    Jun 2011

    Posted 11 Sep 2012 Link to this post

    ping?
  7. Jan
    Jan avatar
    10 posts
    Member since:
    Nov 2011

    Posted 12 Sep 2012 Link to this post

    I waiting for the answer too...
  8. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 13 Sep 2012 Link to this post

    Ditto.
  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 13 Sep 2012 Link to this post

    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!
  10. James Shelton-Agar
    James Shelton-Agar avatar
    108 posts
    Member since:
    May 2008

    Posted 13 Sep 2012 Link to this post

    Hi Georgi, 

    Thanks for the reply. 

    Cheers
  11. Oleg
    Oleg avatar
    4 posts
    Member since:
    Jul 2012

    Posted 16 Oct 2012 Link to this post

    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;







  12. Paul
    Paul avatar
    113 posts
    Member since:
    May 2009

    Posted 27 Nov 2012 Link to this post

    function onChange(e) {
     e.sender.span[0].style.backgroundColor = "Red";
    }
  13. Chris
    Chris avatar
    25 posts
    Member since:
    Apr 2011

    Posted 07 Feb 2013 Link to this post

    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?
  14. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 12 Feb 2013 Link to this post

    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!
  15. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013

    Posted 01 Jan 2014 Link to this post

    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()));
        }
    });

  16. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013

    Posted 06 Jan 2014 Link to this post

    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>
Back to Top
Kendo UI is VS 2017 Ready