4

Using the Kendo ComboBox, I've created a picker for some data coming from a webservice. The HTML code looks like this:

<kendo-combobox #myPicker 
    [data]="myData" 
    [valueField]="'ID'"
    [textField]="'Number'" 
    [filterable]="true"
    [allowCustom]="false"
    (valueChange)="onChange($event)">
    <ng-template kendoComboBoxItemTemplate let-dataItem>
        {{dataItem.Number}} - {{dataItem.Subject}}
    </ng-template>
</kendo-combobox>

The item template works perfectly, it is displayed exactly as needed. What I would like to do now, is to also format the selected value (the one shown in the textfield itself). Right now, it just picks the field provided in [textField], which in this case is Number.

Is there any way to format the selected value? I checked the documentation, there seems to be no template for that. I also tried using the [value] property and setting a custom string there, but that breaks the combobox as it is expecting an object.

Davide De Santis
  • 922
  • 1
  • 10
  • 25
  • As you are not allowing custom values to be added, you could use a filterable dropdown. Which supports item _and_ value templates, and would yield a simliar result. – Philipp Nov 14 '17 at 16:54
  • what I am doing, is loading/filtering data from the db as you type using the filterChange hook. Is this even possible with a dropdown? I thought there were some issues with that. – Davide De Santis Nov 15 '17 at 07:01
  • We are using the `filterChange` hook to filter the data shown in the dropdown, and it works w/o problems. [Here](http://plnkr.co/edit/bpaDzfgCx4atH34wUvHy?p=preview) is an example from the dropdown documentation, showing how a dropdown with a (fake) async request can look like. – Philipp Nov 15 '17 at 09:06
  • unfortunately, that's not an option as our PO wants an autosuggest box of sorts and not a dropdown. However, I solved by adding a property with the display text. By the way, regarding the example you linked: do you know how to do that with a request that returns a Promise? – Davide De Santis Nov 15 '17 at 14:22
  • 1
    I've updated the plunker below, to use a service which returns a Promise. [Link](http://plnkr.co/edit/VE9zUYogylzf539vGasI?p=preview) – Philipp Nov 15 '17 at 15:31
  • Awesome, works like a charm! Thank you so much :) – Davide De Santis Nov 16 '17 at 06:23
  • I still need combobox. as in dropdown list it opens popup to search. But in combobox we can do directly in back textbox. any other way to do this in combobox itself? – Anonymous Creator Nov 19 '18 at 06:57

0 Answers0