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 :-)
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
0
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
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
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
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:
I hope this is what you are trying to achieve.
Kind Regards,
Petur Subev
Telerik
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.
Thanks,
Jayesh Goyani
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,
Thanks,
Jayesh Goyani
$(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