Angular kendo-dropdownlist [textField]

Question

Please help. How add to [textField] in Angular in kendo-dropdownlist two parameters to textField example "id"+"text"

<kendo-dropdownlist
                #annualTimetableScheduleDropdown
                [data]="annualSchedules"
                [formControlName]="formNames.annualTimetableScheduleId"
                [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
                [textField]="'text'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                (valueChange)="AnnualTimetableScheduleValueChange($event)"
              >

I try to

[textField]="'id'" + "'text'"

When I list dropdown I dont have id.
How add id to text in textField in Angular + Kendo in dropdownlist

enter image description here

Full code html in Angular use Kendo component DropDownList

<kendo-formfield fxFlex="grow" [orientation]="'horizontal'">
            <kendo-label
              [for]="annualTimetableScheduleDropdown"
              class="k-checkbox-label"
              text="Harmonogram RRJ"
            ></kendo-label>
            <div>
              <kendo-dropdownlist
                [data]="annualSchedules"
                [formControlName]="formNames.annualTimetableScheduleId"
                [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
                [textField]="'text'"
                [valueField]="'id'"
                [valuePrimitive]="true"
                (valueChange)="AnnualTimetableScheduleValueChange($event)"
              >
                <ng-template kendoDropDownListValueTemplate let-dataItem>
                  <span *ngIf="dataItem.id">{{ dataItem.id }}) {{ dataItem.text }}</span>
                  <div>
                    <button
                      (click)="
                        resetDropdownValue(
                          formNames.annualTimetableScheduleId,
                          annualTimetableScheduleDropdown
                        )
                      "
                      class="form__dropdownResetBtn"
                      look="flat"
                      kendoButton
                      icon="close"
                    ></button>
                  </div>
                  <div *ngIf="!dataItem.id">
                    <span>{{ dataItem.id }}) {{ dataItem.text }}</span>
                  </div>
                </ng-template>
              </kendo-dropdownlist>

annualSchedules is Array: string

Plese help me gye

i try everythink, i learn Angular and kendo, and I ask you, meby you can help

Answer 1

The solution is to use kendoDropDownListItemTemplate As shown here https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/templates/

shows this:

<div class="example-wrapper">
      <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>
    </div>

or in your case, you would do something like this

        <kendo-dropdownlist
            [data]="annualSchedules"
            [formControlName]="formNames.annualTimetableScheduleId"
            [defaultItem]="{ id:null, text: 'wybierz Harmonogram RRJ' }"
            [textField]="'text'"
            [valueField]="'id'"
            [valuePrimitive]="true"
            (valueChange)="AnnualTimetableScheduleValueChange($event)"
         >
            <ng-template kendoDropDownListItemTemplate let-dataItem>
               <ng-container *ngIf="dataItem.id">
                  {{ dataItem.id + ' '+ dataItem.text }}
               </ng-container>
               <ng-container *ngIf="!dataItem.id">
                  {{ ' -  ' + dataItem.text  }} // here I put a dash to indicate there is no id
               </ng-container>
             </ng-template>
        </kendo-dropdownlist>