dropdownlist with images both on the list items and the selected item

6 posts, 0 answers
  1. Atiyeh
    Atiyeh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 11 Jun 2013 Link to this post

    Hi,
    I used the customized template to add images on the left side of my list items. that works fine but not fulfilled all I needed. when I select an item from the list , it just shows the text of that item on the input field, however I need both the text and the image. 
    I have attached two images of both my target and what I have now.
    I appreciate any help on that :-)
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 13 Jun 2013 Link to this post

    Hello Atiyeh,

    I am afraid that the DropDownList does not allow you such customization. The template is only applied to the ListItems like demonstrated here

    Basically currently only the MultiSelect widget allows you to specify template for the input items. 

    Feel free to give an idea on the feedback portal for adding such customization option.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Atiyeh
    Atiyeh avatar
    5 posts
    Member since:
    Jun 2013

    Posted 13 Jun 2013 Link to this post

    so is it possible to hide the input and only have the list items ?
    now I am controlling the drop-down list with a button but need only the items not the input field.
    take a look at the attached image :-)

    Atiyeh

  5. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 17 Jun 2013 Link to this post

    Hello Atiyeh,

    Do you mean hiding the visible element when the DropDownList is not opened?

    Open the following demo and try this in the console:

    $('#movies').data().kendoDropDownList.wrapper.find('.k-dropdown-wrap').hide()

    I hope this is what you are trying to achieve.

    Kind Regards,
    Petur Subev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 24 Jun 2013 Link to this post

    Hello,

    Please try with below code snippet.

    <script>
        $(document).ready(function () {
            $("#fabric").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",
                template: '<img src="" />' +
                                    '${ data.text }',
                dataSource: [
                                { text: "Cotton", value: "1" },
                                { text: "Polyester", value: "2" },
                                { text: "Cotton", value: "3" },
                                { text: "Rib Knit", value: "4" }
                            ],
                filter: "contains",
                suggest: true,
                change: onChange
            });
        });
     
        function OpenSearchPopUp() {
            var combo = $("#fabric").data("kendoComboBox");
            combo.open();
            $("#fabric-list").parent().css('top', parseInt($("#btnStatus").position().top) + 20);
            $("#fabric-list").parent().css('left', $("#btnStatus").position().left);
        }
        function onChange(e) {
            $("#btnStatus").html('<img src="" />' + e.sender.text());
        }
    </script>
    <button id="btnStatus" class="k-button" onclick="OpenSearchPopUp()" style="width: 170px;">
        Click Here</button>
    <br />
    <div style="display: none;">
        <input id="fabric" placeholder="Select fabric..." />
    </div>



    Thanks,
    Jayesh Goyani
  7. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 24 Jun 2013 Link to this post

    Hello,


    $(document).ready(function () {
        $("#fabric").kendoComboBox({
            dataTextField: "text",
            dataValueField: "value",
            template: '<img src=\"http://www.cloudromance.com/templates/black/media/onlineS.png\" />' +
                                '${ data.text }',
            dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
            filter: "contains",
            suggest: true,
            change: onChange
        });
    });
     
    function OpenSearchPopUp() {
        var combo = $("#fabric").data("kendoComboBox");
        combo.open();
        $("#fabric-list").parent().css('top', parseInt($("#btnStatus").position().top) + 20);
        $("#fabric-list").parent().css('left', $("#btnStatus").position().left);
    }
    function onChange(e) {
        $("#btnStatus").html('<img src=\"http://www.cloudromance.com/templates/black/media/onlineS.png\" />' + e.sender.text());
    }
    <button id="btnStatus" class="k-button" onclick="OpenSearchPopUp()" style="width: 170px;">
        Click Here</button>
    <br />
    <div style="display: none;">
        <input id="fabric" placeholder="Select fabric..." />
    </div>


    Thanks,
    Jayesh Goyani
Back to Top
Kendo UI is VS 2017 Ready