This is a migrated thread and some comments may be shown as answers.

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

5 Answers 442 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Atiyeh
Top achievements
Rank 1
Atiyeh asked on 11 Jun 2013, 03:09 PM
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 :-)

5 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 13 Jun 2013, 07:46 AM
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!
0
Atiyeh
Top achievements
Rank 1
answered on 13 Jun 2013, 10:23 AM
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

0
Petur Subev
Telerik team
answered on 17 Jun 2013, 07:28 AM
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!
0
Jayesh Goyani
Top achievements
Rank 2
answered on 24 Jun 2013, 01:05 PM
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
0
Jayesh Goyani
Top achievements
Rank 2
answered on 24 Jun 2013, 01:09 PM
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
Tags
DropDownList
Asked by
Atiyeh
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Atiyeh
Top achievements
Rank 1
Jayesh Goyani
Top achievements
Rank 2
Share this question
or