<kendo-multicolumncombobox
  #list
  [data]="searchResult"
  [textField]="'Display'"
  [valueField]="'Id'"
  [valuePrimitive]="true"

  [listHeight]="300"
  [placeholder]="placeholder"
  [suggest]="true"
  [filterable]="true"
  [clearButton]="true"
  [allowCustom]="false"

  [virtual]="{itemHeight: 36}"

  [formControl]="formControl"
  (filterChange)="filterChange($event)"
  (valueChange)="onSelectionChange($event)"
>
  <kendo-combobox-column
    [field]="'Display'"
    [title]="'Contact Name'"
  >
    <ng-template
      kendoMultiColumnComboBoxColumnCellTemplate
      let-dataItem
    >
      <img
        class="contact-image"
        [src]="getContactImageUrl(dataItem.Id)"
      />
      <span>{{ dataItem.First +' ' + dataItem.Last}}</span>
    </ng-template>
  </kendo-combobox-column>

  <ng-template kendoMultiColumnComboBoxFooterTemplate>
    <strong>
      {{ total }} records in total
    </strong>
  </ng-template>
</kendo-multicolumncombobox>
