Autocomplete with multiple dataTextField

8 posts, 0 answers
  1. Alberto
    Alberto avatar
    71 posts
    Member since:
    May 2012

    Posted 06 Jun 2013 Link to this post

    Hello,
    I need to set a multiple dataTextField property on an autocomplete, because I need the suggestion only on certain properties of the objects contained in the datasource.
    I've seen that the dataTextField property accept only a string and not an array of strings.
    There is another property to obtain what i need? Or a workaround?

    Thanks a lot.
    Fabio
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 10 Jun 2013 Link to this post

    Hello Fabio,

     
    Currently, the widget is designed to filter only by dataTextField property. You can accomplish your task, if you use server filtering and filter the data on the server by multiple fields.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Jeffrey
    Jeffrey avatar
    15 posts
    Member since:
    Dec 2010

    Posted 08 Aug 2013 Link to this post

    Here is my solution.  You can add a new property which contains values from multiple properties, like the textForSearch property in below:
    function codePage(code, name) {
      this.codePage= code;
      this.name = name;
      this.textForSearch = code + " " + name;
    }
    var data = [
      new codePage("869", "Greek"),
      new codePage("932", "Japanese"),
      new codePage("936", "Simplified Chinese"),
      new codePage("949", "Korea"),
      new codePage("950", "Traditional Chinese")
    ];
    When using kendoAutoComplete, set dataTextField = "textForSearch" and filter = "contains", then you can search multiple fields.
    But there is one problem, when suggestion selected from the list, the ugly combined textForSearch property will be filled in the <input>,  that is not what we want user to see.

    To solve this problem, a good way is to add one more parameter, dataValueField, to assign which property should be filled in the input element.  It's easy to implement by modifying kendoAutoComplete._select function: (only one line modified, check the comment)
    var that = this,
        separator = that.options.separator,
        data = that._data(),
        text,
        idx;
     
    li = $(li);
     
    if (li[0] && !li.hasClass(SELECTED)) {
     
        idx = List.inArray(li[0], that.ul[0]);
     
        if (idx > -1) {
            data = data[idx];
            //if dataValueField provided, use _value
            text = that.options.dataValueField ? that._value(data) :
                   that._text(data);
     
            if (separator) {
                text = replaceWordAtCaret(caretPosition(that.element[0]), that._accessor(), text, separator);
            }
     
            that._accessor(text);
            that.current(li.addClass(SELECTED));
        }
    }
    I hope Telerik team can consider adding the "dataValueField" feature, before that, you can *PATCH* the kendoAutoComplete._select like me as a workaround.  [Demo (JSBin)]
     
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 12 Aug 2013 Link to this post

    Hello Fabio,

    Thank you very much for your suggestion. We will look into it further and consider it in our future releases. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Luc
    Luc avatar
    1 posts
    Member since:
    Aug 2011

    Posted 13 Aug 2013 Link to this post

    Jeffrey, 

    Thank your for your suggestion!

    Luc
  7. Josh
    Josh avatar
    29 posts
    Member since:
    Feb 2009

    Posted 15 Aug 2013 Link to this post

    I am having the same issue with my application.  Jeffrey's solution worked but we cannot use this as a permanent solution because the changes to the kendo JS file will be overwritten with the next release.  We need this functionality for our application to work correctly, can you add it to the next release? 
  8. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 Aug 2013 Link to this post

    Hello Josh,

     
    As my collegue mentioned in his last reply, the suggested functionality is still under consideration and we will not be able to implement it for the next official release. We will need to gather more information from the community about it. The best way to do that is to open a uservoice discussion. Thus more people can cast their vote for it.

    Regards,
    Georgi Krustev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. Steve
    Steve avatar
    3 posts
    Member since:
    Jan 2015

    Posted 16 Mar 2015 Link to this post

    This works awesomely with Kendo version 2014.1.416 too!
Back to Top
Kendo UI is VS 2017 Ready