Change AutoComplete's DataTextField at run-time

[Falafel Support]

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

[Alexander Valchev]

Hello,

It is possible to change the AutoComplete's dataTextField through the setOptions method. For your convenience I prepared a small example:

• http://trykendoui.telerik.com/inoL

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

 

 

[J]

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?

[J]

Any thoughts on this?

[Alexander Valchev]

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

 

 

[J]

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

[Alexander Valchev]

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