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

DataValueField does exist ?

14 Answers 1002 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Michaël
Top achievements
Rank 1
Michaël asked on 16 Sep 2011, 03:36 PM
Hi,

Sorry if this question is completely silly, as JavaScript is not my stronger point. I use the autocompleter to fetch cities stored in my database. What I show is the name of the city, however what I want to get when I submit my form is the id of the city, not the name. Therefore, each request returns a JSON answer with the name and the id, and I use dataTextField: "name" so that the autocompleter extracts the name. However, in some of your example (like this one : http://demos.kendoui.com/autocomplete/remotedatasource.html) you are using DataValueField, so I thought that DataValueField: "id" would work. However it doesn't. Furthermore, it appears that DataValueField is not in the documentation of available options fields (http://demos.kendoui.com/autocomplete/remotedatasource.html).

14 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 17 Sep 2011, 10:01 AM
Hello Michaël,

 
The autocomplete UI widget persists only the selected text. Actually the you can post only the content of the input element. This is the expected behavior. As to the demos, the "dataValueField" is left by mistake and we will fix that for the next release of KendoUI.

In order to achieve your goal, you will need to use dropdownlist or combobox, which persist the selected id.

Regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michaël
Top achievements
Rank 1
answered on 17 Sep 2011, 02:20 PM
Hi,

Thanks for your answer. It nearly works using a combo box, however it appears that the change event is not triggered whenever the text changed but when the value change (it's strange because on your example it works). I have a long list of cities in my database, so if I enter "Paris", an event is thrown, but if I delete Paris and type "Marseille", no change event is thrown... Is this normal ?
0
Georgi Krustev
Telerik team
answered on 19 Sep 2011, 08:59 AM
Hello Michaël,

 
The change event is raised when the value of the combobox UI widget changes. From the given information I believe that this behavior is not normal and expected. I will suggest you send us a simple test page which replicates the issue. Thus I will be able to investigate it locally and advice you further.

Kind regards,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michaël
Top achievements
Rank 1
answered on 19 Sep 2011, 10:22 AM
Hi,

Here is a sample page (please tell me once you have seen it) : --

Try to type "Paris". Several French cities will appear. Then delete and type "Marseille". No more cities will appear. I can check using Safari Developer tools that Ajax requests are only sent :

- the first time the box get focus.
- when I select an element in the list.
0
Georgi Krustev
Telerik team
answered on 21 Sep 2011, 10:39 PM
Hello Michaël,

 
Probably, you have removed the link to the sample page. In order to reproduce this issue I have created a test page in jsFiddle. Please check it and let me know if I am missing something. Please note that currectly end user cannot enter custom value which is part of the selected item. This is a known issue, which will be fixed for the next release of the KendoUI.

All the best,
Georgi Krustev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michaël
Top achievements
Rank 1
answered on 21 Sep 2011, 10:56 PM
Hi,

Yes, I have removed the link, sorry but I don't really want the site to be indexed by Google as it is a work in progress project.

Okey, I understand. I didn't set the "filter" setting (what a silly mistake...). When I set it to "contains", it works as expected even using Json.

THANKS !
0
Kevin
Top achievements
Rank 1
answered on 05 Nov 2012, 03:39 PM
Hello,

I was having the same problem as you where having but i actually found a solution to the problem so that you can still use the Autocomplete control. It's a small piece of code in jquery but could be implemented in other ways too! What i did was take the selected text from the autocomplete control and then iterated that text throught the data of datasource also on the autocomplete control. Something along the lines of this:

var autoContainer = $("#AutocompleteId").data("kendoAutoComplete");
var result = $.grep(autoContainer.dataSource.data(), function (item) {
return item.Text == autoContainer.value();
});

Happy Coding
Kevin Bosteels
0
Pranami
Top achievements
Rank 1
answered on 02 Jun 2014, 10:50 AM
Hi
Do we have any solution to it? I need to save ID as my value and display name on the screen.
0
CS
Top achievements
Rank 2
answered on 02 Jun 2014, 11:47 AM
Maybe this helps you along, I took this example from one of my threads with an example on how to use both datatextfield and datavaluefield.

http://jsbin.com/josijate/1/edit

I cannot verify if the value is set properly but the text seems to be correct. So to make it short, the datavaluefield is bindable via the html data binding and not as a direct option of AutoComplete as it seems.
0
Alexander Popov
Telerik team
answered on 05 Jun 2014, 10:55 AM
Hi Pranami,

The behavior of the AutoComplete widget has not changed, meaning that its value method will return the text of the selected item, rather than its ID. In the current scenario I would recommend using a ComboBox instead. If necessary, you could remove its button, making it look exactly like the AutoComplete widget. Here is an example how this could be achieved.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mariano
Top achievements
Rank 1
answered on 28 Jan 2015, 02:40 PM
Alexander, There is a problem with your solution. If We have  <body style= "background-color:red"> and input control width=300px; the combobox control is affected.

<body style="background-color:red">
  <input id="fabric" type="text" style="width:300px;"> 
  <button>Get value</button>

0
Alexander Popov
Telerik team
answered on 02 Feb 2015, 10:20 AM
Hello Mariano,

Manually resizing the span element used internally should solve this. Here is an updated example.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
darryl
Top achievements
Rank 1
answered on 16 May 2015, 12:43 AM

READ THIS SOLUTION

None of the above suggested solutions is helpful at all honestly.  Even looping through the dataSource looking for a match can be bad, because its possible you have two different records with same 'name'.  

And dropDownList is just NOT desired, nor is multiSelect!

Quite honestly, the lack of dataValueField is inexcusable.  Breaks pattern of other widgets and for NO good reason.  Telerik should fix this, not argue that you should use a different widget.

 

BULLETPROOF SOLUTION FOR NOW

This is just an example that assumes some things about your datasource, but holds true no matter what datasource you use.

01.$("#contactSearch").kendoAutoComplete({
02.dataSource: {
03.type: "odata",
04.transport: {
05.read: "your data source url here"
06.},
07.serverSorting: true,
08.serverFiltering: true
09.},
10.filter: "contains",
11.dataTextField: 'name',
12.dataValueField: 'id'// <-- this doesn't work, but should!
13.template: '<span data-recordid="#= id #"> #= name #</span>', // here we just use a template and put the id as data on the span wrapping the name
14.select: function(e) {
15. 
16.// this is how you grab the id from the item selected
17.console.log(e.item.find('span').data('recordid'));
18.}
19.});

 Never used the code formatter of this forum, hopefully it adds indents.

 

ENJOY!

 

0
Timothy
Top achievements
Rank 1
answered on 03 Dec 2018, 05:48 PM
darryl, your solution worked perfectly for me.  Don't know why Telerik doesn't have a solution for Autocomplete to do this with datavaluefield.  Controls are supposed to make things easier!  
Tags
AutoComplete
Asked by
Michaël
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Michaël
Top achievements
Rank 1
Kevin
Top achievements
Rank 1
Pranami
Top achievements
Rank 1
CS
Top achievements
Rank 2
Alexander Popov
Telerik team
Mariano
Top achievements
Rank 1
darryl
Top achievements
Rank 1
Timothy
Top achievements
Rank 1
Share this question
or