Hello!
I think it will be nice to have configurable template for ComboBoxComponent input field.
something like it is possible within grid pager comes to my mind - there is a template and building blocks that we can use
Use case:
For example, in our work we customize item template with
and our customers wish to see selected item as it is in the list, with icon and other customizations.
I have managed to do that by creating a directive that i put on <kendo-combobox>... and that inserts dynamically created icon component near the input, so that it looks same as in the options list.
But this is ugly and not easy maintainable, etc
Hi Petr,
Thank you for providing additional details for this case.
If I understand correctly, you are requesting an option to customize the selected value on the component, the same as kendoDropDownListValueTemplate works for the DropDownList:
Please correct me if I am wrong.
The main difference between DropDownList and ComboBox is that the ComboBox internally has an <input /> element which allows the user to type in, while the DropDownList doesn't. That was the main reason for not providing such a template for the ComboBox.
What can be done instead is to explore the prefix adornments that allow rendering any custom HTML beside the ComboBox value:
Another possible to achieve the desired end result is to replace the ComboBox with DropDownList (if the application requirements allow it).
Please check it out and let me know in case any further questions arise.
Regards,
Martin Bechev
Progress Telerik
Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024
Hello, Martin,
Thank you for your answer.
We are indeed using the kendoComboBoxItemTemplate to configure the item in the list (i marked the place with green)
The problem is that this template is applied only to the item in the dropdown(greed), not to the selected item box - marked with red.
That is what this feature request is about - about configuring the template for selected item. I have created a workaround for ourselves, i "manually" push desired content into the DOM, as it is not configurable in any other way.
Hello Petr,
I am not sure that understand the feature correctly and what is the desired outcome.
In case the ComboBox options should also have an icon beside it, the developer can add the icon in the template along with the text, like:
<ng-template kendoComboBoxItemTemplate let-dataItem>
<kendo-svg-icon [icon]="icons.paperclip"></kendo-svg-icon>
{{ dataItem.text }}
</ng-template>
The only difference is the generated DOM is that in the default ComboBox (no template) the text is wrapped into a span with the class "k-list-item-text" which can be also done in the template:
<ng-template kendoComboBoxItemTemplate let-dataItem>
<kendo-svg-icon [icon]="icons.paperclip"></kendo-svg-icon>
<span class="k-list-item-text">{{ dataItem.text }}</span>
</ng-template>Here is an example where different icons are rendered beside the options:
https://stackblitz.com/edit/angular-sjgeu4
Please check out the demo and let us know if we misunderstand the query.
Regards,
Martin Bechev
Progress Telerik
Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024