CODEWITHSUNDEEP
htmlangularkendo-ui
Corey Sutton
Corey Sutton

Reputation: 1025

Creating a kendo-autocomplete form component

I'd like to use kendo-autocomplete rather than a select/dropdown menu. When I try to switch the select component out for kendo-autocomplete, I am no longer able to use the option component. I am wondering how I can change this for it to work as intended.

Not working kendo-autocomplete example:

<div class="col-sm-12 col-md-4" *ngIf="showFaxNumberInput === true ">
                            <label class="col-sm-3 col-md-5" for="providerRoute">Exception Group</label>
             <div class="col-sm-5 col-md-7 padding-adj">
                 <kendo-autocomplete 
                      formControlName="exceptionGroup" 
                      name="exceptionGroup" 
                      class="form-control input-xs"
                      >
                      <option *ngFor="let item of exceptionGroupList" [value]="item.Value">{{item.Text}}</option>
                  </kendo-autocomplete>
                </div>
            </div>

Working drop down example:

<div class="col-sm-12 col-md-4" *ngIf="showFaxNumberInput === true ">
                            <label class="col-sm-3 col-md-5" for="providerRoute">Exception Group</label>
                            <div class="col-sm-5 col-md-7 padding-adj">
                                <select formControlName="exceptionGroup" name="exceptionGroup" class="form-control input-xs">
                                    <option value="">Select</option>
                                    <option *ngFor="let item of exceptionGroupList" [value]="item.Value">{{item.Text}}</option>
                                </select>
                            </div>

I can remove the first option tag with a placeholder easily. But the second option tag is what I am having trouble with. I added the ngFor into the kendo-autocomplete tag like this:

<kendo-autocomplete *ngFor="let item of exceptionGroupList" [value]="item.Value"
                       formControlName="exceptionGroup"
                       name="exceptionGroup"
                       class="form-control input-xs"
                          >
             {{item.Text}}
</kendo-autocomplete>

But it just iteratively created several text boxes.

Thank you

Upvotes: 0

Views: 639

Answers (1)

David
David

Reputation: 6131

It sounds like you want want a ComboBox with filtering. As you type in the value, the filters in the dropdown below are filtered.

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

Fiddle: https://codesandbox.io/s/exciting-hugle-tiuxh0?file=/src/app/app.component.ts:133-395

Example:

<kendo-combobox [data]="exceptionGroupList"
                textField="Text"
                valueField="Value"
                [filterable]="true"
                (filterChange)="handleFilter($event)">
</kendo-combobox>

exceptionGroupList: Array<{ Text: string; Value: number; }> = [
  { Text: 'Some Value', Value: 1 },
  // ...
];
data: Array<{ Text: string; Value: number }>;
handleFilter(value) {
  this.data = this.exceptionGroupList
    .filter(item => item.Text.toLowerCase().indexOf(value.toLowerCase()) > -1);
}

Upvotes: 1

Related Questions