This is a migrated thread and some comments may be shown as answers.

Change AutoComplete's DataTextField at run-time

6 Answers 251 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Falafel Support
Top achievements
Rank 1
Falafel Support asked on 10 Apr 2014, 02:58 AM
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

6 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 11 Apr 2014, 04:32 PM
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!
 
0
J
Top achievements
Rank 1
answered on 11 Apr 2014, 05:06 PM
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?


0
J
Top achievements
Rank 1
answered on 15 Apr 2014, 01:55 PM
Any thoughts on this?
0
Alexander Valchev
Telerik team
answered on 15 Apr 2014, 03:26 PM
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!
 
0
J
Top achievements
Rank 1
answered on 15 Apr 2014, 05:42 PM
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
0
Alexander Valchev
Telerik team
answered on 17 Apr 2014, 12:06 PM
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!
 
Tags
AutoComplete
Asked by
Falafel Support
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
J
Top achievements
Rank 1
Share this question
or