Change AutoComplete's DataTextField at run-time

7 posts, 0 answers
  1. Falafel Support
    Falafel Support avatar
    24 posts
    Member since:
    Sep 2009

    Posted 09 Apr 2014 Link to this post

    I created this fiddle to demontrate what I want to do, which is change the dataTextField (the one searched by the autocomplete widget) at run-time from one property to another:

    http://jsfiddle.net/jtower/uSLND/

    Any suggestions?

    - J. Tower, Falafel Software
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 11 Apr 2014 Link to this post

    Hello,

    It is possible to change the AutoComplete's dataTextField through the setOptions method. For your convenience I prepared a small example:
    I am not sure what is the problem with your example. I noticed that you are using a customized version of the AutoComplete control. Could you please explain what exactly goes wrong in your scenario? How it differs from the one presented in my page?

    Regards,
    Alexander Valchev
    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. J
    J avatar
    8 posts
    Member since:
    Feb 2014

    Posted 11 Apr 2014 in reply to Alexander Valchev Link to this post

    Here's the updated fiddle with some console logging to show you the problem:
    http://jsfiddle.net/jtower/uSLND/

    Basically, I created a composite version of the autocomplete with a dropdown and a label added. The new control allows the user to use the dropdown to specify which field from the datasource is searched by the autocomplete. However, the setOption() call isn't working. If you change the selected field in the dropdown, it runs the change function in the viewmodel, which sets the new value for dataTextField, but it doesn't seem to cause it to update (see the console log output). Here's what my output looks like.

    Output:
    dataTextField was              code
    dataTextField should change to name
    dataTextField is now           code

    I updated your sample with the same console logs in yours and they worked correctly: http://trykendoui.telerik.com/inoL/3

    Output:
    dataTextField was              item
    dataTextField should change to item2
    dataTextField is now           item2

    Can you explain why it doesn't work in mine?


  5. J
    J avatar
    8 posts
    Member since:
    Feb 2014

    Posted 15 Apr 2014 in reply to J Link to this post

    Any thoughts on this?
  6. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 15 Apr 2014 Link to this post

    Hello,

    We managed to track down the root of the issue and it turned out to be bug in the AutoComplete control.
    The problem comes from the fact that after setOption is called options change but the widget re-evaluates data-text-field/data-value-field attributes which reverts the change. This is the reason my example works - the autoComplete element does not have a data-text-field.

    We will log this and try to provide a fix as soon as possible. As a workaround I can suggest changing the attribute before setOptions is called:
    me.element.attr("data-text-field", dataItem.get(columnValueField));
    me.setOptions({ dataTextField: dataItem.get(columnValueField) });

    Here is a link to the updated jsFiddle example: http://jsfiddle.net/uSLND/32/

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. J
    J avatar
    8 posts
    Member since:
    Feb 2014

    Posted 15 Apr 2014 in reply to Alexander Valchev Link to this post

    Alexander,

    Thanks for the reply. I noticed you removed the item template from my example. When I added it back in, it stopped working again. Here's an example: http://jsfiddle.net/jtower/uSLND/36/

    Steps:
    1. Type 'az'. 'AZ - Arizona' is correctly displayed.
    2. Switch the dropdown selection to 'Code'.
    3. Type 'ar'. 'AZ - Arizona' is correctly displayed.
    4. Type 'az'. Nothing is displayed, as expected.
    *** 5. Type 'mi'. Nothing is displayed, even though 'MI - Michigan' should be.
    6. Clear the textbox, switch back to 'Name' and type 'mi'. 'MI - Michigan' is now displayed correctly.

    Here's a video of it happening: http://screencast.com/t/J0iNHEVH
  8. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 17 Apr 2014 Link to this post

    Hello,

    I believe that the example stops working due to the messed up dataSource filters. In order to avoid the issue you can clear the filters right after you clear the value of the widget.
    change: function (e) {
        var dataItem = this.dataItem(this.select());
        me.value("");
        me.dataSource.filter([]); //clear filters
        me.element.attr("data-text-field", dataItem.get(columnValueField));
        me.setOptions({ dataTextField: dataItem.get(columnValueField) });
        me.columnSelectorLabel.text("Search by " + dataItem.get(columnTextField) + ":");
    },


    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready