Hello,

Currently I have a Kendo Filter in which I'm passing in a CompositeFilterDescriptor (dslFilter) as a value, as such:

<kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter" // <=== THIS ONE
      (valueChange)="onFilterChange($event)"
    >
...

As I understand it, the filter will turn a CompositeFilterDescriptor into a bunch of generated input forms, such as this:

Problem is, I implemented Kendo Autocomplete in those fields (full HTML below), but the generated input forms aren't generated as Autocomplete input forms.  I only get Autocomplete forms if I (1) edit the field in one of the forms, or (2) I add a filter.  In both cases, the input form will have to deviate from the generated (from the CompositeFilterDescriptor) form in order to become Autocomplete.  Otherwise, it's just a textbox.

How do I get the generated input forms to be Autocomplete?  Edit:  A more general question, how can I modify the generated input forms?  Say if I want the generated textbox to be wider...

Full HTML is below:

  <div>
    <kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter"
      (valueChange)="onFilterChange($event)"
    >
      <ng-container *ngFor="let fl of filters">
        <kendo-filter-field [field]="fl.field" [editor]="fl.editor">
          <ng-template kendoFilterValueEditorTemplate let-currentItem>
            <ng-container *ngFor="let field of autocompleteFields">
              <ng-container *ngIf="currentItem.field === field">
                <kendo-autocomplete
                  [data]="getUniqueValues(currentItem.field)"
                  [value]="currentItem.value"
                  [suggest]="true"
                  [virtual]="{itemHeight: 28}"
                  (valueChange)="editorValueChange($event, currentItem, filter.value)"
                >
                </kendo-autocomplete>
              </ng-container>
            </ng-container>

          </ng-template>
        </kendo-filter-field>
      </ng-container>
    </kendo-filter>
  </div>

Hi, we are looking for the input, dropdowns which has this outline design in the material theme but we are not able to find it. 

It'd have been better if we have this.

something like this https://codepen.io/finnhvman/pen/xyOORQ

Thanks.

Hello Team,

I have a scenerio where i need to show the data in multiple lines within autocomplete field, I'm able to get multiple lines in item template but when selected it is displaying in single line, is there any way to show it in multiple lines?

TIA.

Srija .P

Hello Team,

                    We want to display an icon in empty autocomplete field to let the users know that is data can be assigned to that field by clicking or typing on it, we know that we can achieve this by using a kendo dropdown, but we are using the autocomplete in various area's in our product, is there any way to show the icon by using CSS or in any other way, please let us know. 

Thanks.

Hari Padala

Hello,

Automcomplete html 

 data is binded from array of object

, when valueChange event is fired ,only receive valueField data in valueChange event. I need object of selected item in valueChange event.

please check out this stackbiz demo.

AutoComplete

Hi,

We are using KendoUI AutoComplete for Angular6 like below.

<kendo-autocomplete #autocomplete style="width:100%" [(data)]="items" [valueField]="'DESCR_FULL'"
      [suggest]="true" placeholder="Digita almeno 3 caratteri..." [(ngModel)]="selectedsedetechnica"
      (valueChange)=SelectedAssetFromSTCombo($event) [filterable]="true" (filterChange)="handleFilter($event)">
</kendo-autocomplete>

valueChange event is fired even when the AutoComplete is tabbed out / blurred.

But we want to fire the "valueChange" event only when the user selects any one of the AutoComplete suggestions (by clicking on any one of the suggestions (or) by selecting any one one of the suggestions with keyboard ENTER key.). We don't want to fire this event when Aucomplete lost focus (blurred).

Because the autocomplete suggestions will vary based on the user. We don't want to process any data that is not coming from AutoComplete.

How to stop firing "valueChange" event when AutoComplete is tabbed out (or) lost focus

Thanks in advance,

Rajesh

I want to add a search icon inside the autocomplete component.while the user is not typing anything in the box a search icon should appear.as the user starts typing search would be replaced with a default cross icon.again when the focus is out of the box the cross icon should be replaced by the search icon.how do I achieve with autocomplete component.