Remove the word "filter" from search in dropdown list

1 Answer 20 Views
DropDownList
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Lee asked on 19 Jun 2025, 06:55 PM
With the latest update of Kendo UI JQuery, we are seeing the word "filter" in the search box of the dropdown list. How do we remove that or change it to "search"?

1 Answer, 1 is accepted

Sort by
-1
Neli
Telerik team
answered on 24 Jun 2025, 06:53 AM

Hi Lee,

You can change the text of the placeholder of the filterInput as demonstrated below:

$("#dropdownlist").data('kendoDropDownList').filterInput.attr('placeholder', 'Search...')

Here is a Dojo example where this is demonstrated - https://dojo.telerik.com/gqqyxINP

I hope this helps. 

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 24 Jun 2025, 10:21 AM | edited

prior to updating to Kendo 2025 Q2 it always said "Search". Now all of them say "Filter" how do I update all of them globally, prior to initialization, so I don't have to go through each one in my projects and update them manually and then remember to update each new one manually in the future? I know for many things I can use the .extend method. Is there something similar here? 

I also noticed that the word "Filter" that suddenly started appearing there is not localized. When I switch to German, everything else for kendo translates but not that. 

Neli
Telerik team
commented on 27 Jun 2025, 09:35 AM

Hi Lee,

The observed change with the text of the filter input is intended. However, with previous versions there was no text in the filter input. Here is a Dojo where this is demonstrated: https://dojo.telerik.com/YczlaFls. As you mentioned that the text on your side is 'Search', please let me know if I am missing something from your scenario.

To change the text on multiple DropDownLists you can use a common selector and change the placehodler text:

 $('.k-dropdownlist-popup [role="searchbox"]').attr('placeholder', 'Search...')

The above is demonstrated in the Dojo linked here - https://dojo.telerik.com/rbGTuklI.

Regarding localization, indeed currently the filter input text is not included in the messages, thus I logged a new item on your behalf. Below you will find a link to it in the Feedback Portal and the related issue in our GitHub repository:

Feedback Portal: https://feedback.telerik.com/kendo-jquery-ui/1691578-add-filter-input-text-of-the-dropdownlist-to-the-messages-options-so-it-can-be-localized 

GitHubhttps://github.com/telerik/kendo-ui-core/issues/8282 

Let me know in case you have any additional questions on the matter.

Regards,

Neli

Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
commented on 27 Jun 2025, 01:00 PM

Unfortunately your fix using a selector only works after initialization and would have to be reapplied every time a new dropdown is initiated. I need something that works before initialization and essentially changes how the list is initialized. Also, my old version was blank as you suggest. I'm ok with it being blank and would actually prefer that. "Search" was just an acceptable compromise over "Filter" Is there a way to customize this part of the dropdownlist component? If not, a bug should be logged. 
Neli
Telerik team
commented on 30 Jun 2025, 11:45 AM | edited

Hi Lee,

A possible workaround to change the default text before initialization is to override the respective function that returns the text. Below you will find such an example:

 kendo.ui.List.fn._filterHeader = function() {
                  this.filterTemplate = '<div class="k-list-filter">' +
                      '<span class="k-searchbox k-input k-input-md k-rounded-md k-input-solid" type="text" autocomplete="off">' +
                          kendo.ui.icon({ icon: "search", iconClass: "k-input-icon" }) +
                      '</span>' +
                  '</div>';

                  this.actionSheetFilterTemplate = `<div class="k-actionsheet-titlebar-group k-actionsheet-filter">${this.filterTemplate}</div>`;

                  if (this._isFilterEnabled()) {
                      this.filterInput = $('<input class="k-input-inner" type="text" />')
                          .attr({
                              placeholder: this.element.attr("placeholder") || "Custom filter text",
                              title: this.options.filterTitle || this.element.attr("title"),
                              role: "searchbox",
                              "aria-label": this.options.filterTitle,
                              "aria-haspopup": "listbox",
                              "aria-autocomplete": "list"
                          });
                  }
              },

Here is a Dojo example where this is demonstrated: https://dojo.telerik.com/MNmHakwm.

When the feature request linked in my previous reply is implemented there will be a dedicated configuration option in the messages that will allow customizing the text in the filter input. The issue is related to a new functionality, that needs to be enhanced, thus it is not considered a bug, but a feature. 

I already discussed the issue with the team and we will do our best to prioritize it, so the item to be implemented for the Q3 2025 release scheduled for September. However, please note that before the issue is implemented and the item passes all the needed tests I could not comit to a specific timeframe.  Generally, we avoid providing exact timelines to ensure we do not make promises we might not be able to keep. 

In case you have additional question, please let me know.

Regards,

Neli

Tags
DropDownList
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
Answers by
Neli
Telerik team
Share this question
or