Rendering Custom Content inside the AutoComplete and ComboBox Input Fields

Environment

Description

How can I render custom content in the value field of the Kendo UI for Angular Autocomplete and ComboBox components?

Solution

Due to the specifics of the Autocomplete and ComboBox components, they do not support a value template for their input field. The reason is that the value, which is passed to this field, is strictly related to the search and sort functionalities of the components and the field, therefore, cannot contain a value that is not present in the list of items.

Alternatively, you can use the DropDownList component with its value template, which allows you to render a certain value in the input field while the initial data is displayed as a list of items.

Yet another possible approach is to use the MultiSelect or MultiSelect Tree components, limiting them to select a single value and customizing the rendering of the selected option by using their tag template and applying custom CSS.

To achieve the desired scenario:

1. Handle the valueChange event of the Multiselect component and apply custom logic to limit the selection to a single value:

   Copy Code<kendo-multiselect (valueChange)="onValueChange($event)"></kendo-multiselect>

   Copy Codepublic onValueChange(e: ListItems[]): void {
       if (e.length === 0) {
           return;
       }
       this.value = [e[e.length - 1]];
       }

2. Apply the tag template by nesting an ng-template tag with a kendoMultiSelectTagTemplate directive inside a kendo-multiselect tag:

   Copy Code<kendo-multiselect>
       <ng-template kendoMultiSelectTagTemplate>
       </ng-template>
   </kendo-multiselect>

3. Inside the ng-template tag, nest an HTML element that will hold the displayed data in the input field:

   Copy Code<ng-template kendoMultiSelectTagTemplate let-dataItem>
       <kendo-svgicon *ngIf="value[0]" [icon]="dataItem.icon"> </kendo-svgicon>
       {{ dataItem }}
   </ng-template>

4. Apply the custom CSS styles to hide the borders and the Remove buttons of the tabs:

   Copy Code.k-multiselect .k-chip-list .k-chip-actions {
       display: none;
   }
   
   .k-multiselect .k-chip-list .k-chip {
       background: none;
       border: none;
   }

The following example demonstrates how to implement this scenario by using the Kendo UI for Angular Icons: