DataValueField does exist ?

14 posts, 0 answers
  1. Michaël
    Michaël avatar
    4 posts
    Member since:
    Sep 2011

    Posted 16 Sep 2011 Link to this post

    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).
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 17 Sep 2011 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Michaël
    Michaël avatar
    4 posts
    Member since:
    Sep 2011

    Posted 17 Sep 2011 Link to this post

    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 ?
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 19 Sep 2011 Link to this post

    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!
  6. Michaël
    Michaël avatar
    4 posts
    Member since:
    Sep 2011

    Posted 19 Sep 2011 Link to this post

    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.
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 21 Sep 2011 Link to this post

    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!
  8. Michaël
    Michaël avatar
    4 posts
    Member since:
    Sep 2011

    Posted 21 Sep 2011 Link to this post

    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 !
  9. Kevin
    Kevin avatar
    1 posts
    Member since:
    Jul 2012

    Posted 05 Nov 2012 Link to this post

    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
  10. Pranami
    Pranami avatar
    4 posts
    Member since:
    May 2014

    Posted 02 Jun 2014 Link to this post

    Hi
    Do we have any solution to it? I need to save ID as my value and display name on the screen.
  11. con_ssc
    con_ssc avatar
    87 posts
    Member since:
    Apr 2014

    Posted 02 Jun 2014 in reply to Pranami Link to this post

    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.
  12. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 05 Jun 2014 Link to this post

    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!
     
  13. Mariano
    Mariano avatar
    4 posts
    Member since:
    Jan 2013

    Posted 28 Jan 2015 in reply to Alexander Popov Link to this post

    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>

  14. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 02 Feb 2015 Link to this post

    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!
     
  15. darryl
    darryl avatar
    13 posts
    Member since:
    May 2015

    Posted 15 May 2015 Link to this post

    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!

     

Back to Top
Kendo UI is VS 2017 Ready