Kendo Filter generating form inputs -> how to get Autocomplete inputs??

[Han]

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>

 

[Martin]

Hello Han,

Thank you for the provide details.

Use the available expression value template to customize the default component used to insert filter values.

More details and examples can be found in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/filter/expression-value-template/

Regards,
Martin
Progress Telerik