Filtering entries within DropDownList with template and Angular filter

2 posts, 0 answers
  1. Nikola
    Nikola avatar
    1 posts
    Member since:
    Feb 2016

    Posted 08 Apr 2016 Link to this post

    Hi guys,


    I have a problem using the DropDownList with Angular and Angular Translate. Here is an example:


    Basically I use a simple template to appy an Angular filter to the value key. From my point of view this is a standard scenario, if I have a DropDownList expressing a foreign-key column from a database. The value is a key (such as a user status), but within the GUI I want a translated text to be displayed. Within the example everything works fine except the filter function of the DropDownList. The filter parses the key value, not the displayed text, as a user would expect. If you enter "KEY_2" a row will be found, entering the displayed text will result in no entries - irritating the user.

    Is this a bug or am I doing something wrong?


    Thanks & cheers,



  2. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 12 Apr 2016 Link to this post

    Hello Nikola,

    In general, the DropDownList widget is designed to filter the items based on the defined dataTextField option. In your configuration it is the "key" field, which means that the widget will search in the key fields.

    Unfortunately, the widget is not aware what is happening in the defined templates, as they are out of its control. That being said, it would not be able to search in the output of the defined templates, as they are formatted text that the widget does not work with.

    I am afraid that there is no workaround that I can suggest in this case. The only solution that I can think of is to actually bind the widget with the translated text, defined in the translation provider. Basically, you can construct JSON that contains "key" and "text" fields and the widget will search in "text" fields of the provided data.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top