kendo-dropdown not rendering

[n/a]

 

I have a kendo-dropdown with the following template defined in it

    <ng-template  kendoComboBoxItemTemplate let-dataItem>
        <div [class]="dataItem?.cssClass" >{{ dataItem?.title }}</div>
    </ng-template>

When i view the dropdown in the UI the value is displayed using the default value display. If i modify the tags

and use a kendo-combobox my template is rendered correctly. Are there any known issues with templates in 

"@progress/kendo-angular-dropdowns": "^2.1.0",

THanks

    

[Dimiter Topalov]

Hi David,

All components from the DropDowns package (AutoComplete, ComboBox, DropDownList, MultiSelect) have separate template directives:

https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ItemTemplateDirective/

The respective template directive needs to be used within the component of this type, e.g.:

AutoComplete

https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/templates/ 

<kendo-autocomplete [data]="listItems">
            <ng-template kendoAutoCompleteItemTemplate let-dataItem>
                <span style="color: #00F;">{{ dataItem }}</span>
            </ng-template>
        </kendo-autocomplete>

ComboBox

https://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/templates/

<kendo-combobox
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
        >
            <ng-template kendoComboBoxItemTemplate let-dataItem>
                <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
            </ng-template>
        </kendo-combobox>

DropDownList

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates/#toc-item-template

<kendo-dropdownlist
            [data]="listItems"
            [textField]="'text'"
            [valueField]="'value'"
            [value]="selectedValue"
            [valuePrimitive]="true"
        >
            <ng-template kendoDropDownListItemTemplate let-dataItem>
                <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
            </ng-template>
        </kendo-dropdownlist>

MultiSelect

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/templates/#toc-item-template

<kendo-multiselect
        [data]="listItems"
        [(ngModel)]="value"
        [textField]="'text'"
        [valueField]="'value'"
      >
      <ng-template kendoMultiSelectItemTemplate let-dataItem>
        <span class="template">{{ dataItem.value }}</span> {{ dataItem.text }}
      </ng-template>
      </kendo-multiselect>

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[n/a]

Thanks that helped a lot