input text in header template for custom filtering (Kendo for Angular)

[Ioannis]

Hi,
I want to add a custom input text for filtering the items of a combobox in Angular
I tried to add but the text box seems not focusable. Even if I try to manually focus on it with extra code the user cannot select the text from the text box. 
Is it supported? Can I somehow implement it?

<kendo-combobox

      #kdropdownlist

      kendoInputFocusBehavior

      [size]="dropDownSize"

      rounded="medium"

      fillMode="outline"

      [data]="listItems$ | async"

      [clearButton]="false"

      [valuePrimitive]="true"

      textField="description"

      valueField="value"

      [virtual]="true"

     

   >

      <ng-template kendoComboBoxHeaderTemplate>

         <input type="text" class="combobox-filter-input" [placeholder]="placeholder" />

      </ng-template>

      <ng-template kendoPrefixTemplate> </ng-template>

      <ng-template kendoComboBoxItemTemplate let-dataItem>

         <ng-container [ngTemplateOutlet]="showMoreFields ? moreFields : noMoreFields" [ngTemplateOutletContext]="{ listItem: dataItem }"> </ng-container>

      </ng-template>

   </kendo-combobox>

</div>

<ng-template #noMoreFields let-listItem="listItem">

   {{ listItem.description }}

</ng-template>

<ng-template #moreFields let-listItem="listItem">

   <span class="fx-flex fx-layout-row select-m-column">

      <span *ngFor="let field of listItem.moreFields" [class]="getItemWidthFlexClass(optionFieldWidth)" class="optionFieldWidth-items-style">

         {{ field }}

      </span>

   </span>

</ng-template>

 

Thank you

 

[Zornitsa]

Hi Ioannis,

Thank you for the provided screenshot and code snippet.

Indeed, the built-in filtering functionality of the ComboBox does not render a separate search input in its popup, since the component is internally represented by an <input> element, which allows the user to freely type inside.

Nevertheless, you are on the right track with using the HeaderTemplateDirective and rendering an <input> element in the header of the ComboBox popup to achieve a similar functionality for this component as well. The same can also be achieved by utilizing our TextBox component instead of a default <input> since it provides more customization options like additionally setting a prefix adornment for example:

• https://www.telerik.com/kendo-angular-ui/components/inputs/textbox/adornments/#toc-prefix-adornments 

Having done that, the developer would need to manually handle the filtering functionality and update the ComboBox data correspondingly based on the entered value in the TextBox (or <input>).

Furthermore, in order for the TextBox to actually become focusable and interactable, the component should be manually focused on click and the close event of the ComboBox would need to be prevented. However, in this case, the popup list will always remain open and for this purpose, the developer can use the toggle() method of the ComboBox to close it depending on where the user clicks on the page.

For a demonstration of the additional suggestions in the custom approach, please refer to the following StackBlitz example:

• https://stackblitz.com/edit/angular-3rdbkp 

It is important to mention that the above implementation is considered custom and it is in the hands of the developer to further modify the logic according to their particular use case scenario.

I hope the provided information sheds some light on the matter.

Regards,
Zornitsa
Progress Telerik

[Ioannis]

Thank you for your answer. The problem with the solution you provided is that when the text-box is focused and it has a null value that is not in the list of items, the combo blurs and this causes a value change and triggers the validators of form although the value has not been changed.  I used the allowCustom property to go around this but still I don't get why you check if there is an unresolvedSelection in your code:

// handleBlur() in progress-kendo-angular-dropdowns 
const unresolvedSelection = getter(this.dataItem, this.valueField) !== getter(this.value, this.valueField);
            const currentText = this.searchbar.value;
            const textHasChanged = currentText !== (getter(this.dataItem, this.textField) || '');
            const valueHasChanged = unresolvedSelection || textHasChanged;

I could use drop down control instead but it doesn't have support for prefix, suffix Adornments.

Does it also support multi-columns?
Should I open a ticket for this instead?

Thank you

 

[Zornitsa]

Hi Ioannis,

From what I can understand, when implementing the suggested approach in my previous reply, as demonstrated in this StackBlitz example, and focusing the TextBox in the header template when it has no value entered, the ComboBox triggers a value change. Please correct me if I misunderstood the exact scenario.

If this is indeed the case, it seems that I might be missing some of the reproduction steps, since I tried replicating the described behavior in the previously provided example, however, the ComboBox component does not trigger a value change upon focusing the empty TextBox (and in turn blurring the ComboBox). 

This can be observed in the following StackBlitz example where a handler for the valueChange event of the ComboBox is implemented for testing purposes:

• https://stackblitz.com/edit/angular-3rdbkp-ckteqe 

In the above example, upon focusing the TextBox when it is empty and no value is entered in it, nothing is logged in the browser's console.

On that note, to avoid any potential misunderstandings, can you please clarify what are the exact steps for reproducing the problematic behavior and what I might be missing on my side? Furthermore, does the implementation on your side somehow differ from the one in the shared example? If yes, it would be great if you could modify the example with the exact configuration in your scenario in a way that the explained behavior is reproduced. 

In that way, I will be able to gain more understanding of the use case that causes the described behavior and thus provide more valuable assistance on the matter.

I am looking forward to your reply.

Regards,
Zornitsa
Progress Telerik