OptionLabel is posted as value

11 posts, 0 answers
  1. Emil
    Emil avatar
    5 posts
    Member since:
    Dec 2012

    Posted 08 Feb 2013 Link to this post

    Hi,

    I'm taking my first baby steps with Kendo ui web, transforming a search form to Kendo.

    One dropdownlist posts the optionlabel as it's value when nothing is selected.
    How can i prevent this, or it this a bug?

    Thanks,
    Emil




  2. Emil
    Emil avatar
    5 posts
    Member since:
    Dec 2012

    Posted 09 Feb 2013 Link to this post

    Ok, setting autoBind: false; helps a bit, but after select/unselect an option (so nothing is selected, back to optionLabel)
    again the optionLabel text is posted as value.

    This looked promising:

     optionLabel: {
         text:  "Choose xxx",
         value: ""
    },

    but it just adds an option 'undefined' on top of the list


    Any ideas?

    Thanks, Emil

  3. Emil
    Emil avatar
    5 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2013 Link to this post

    So, how to get this to work in a dropdownlist?

     optionLabel: {
         text:  "Choose xxx",
         value: ""
    },

    Why does it just add an 'undefined' to the options list?


    Thanks,
    Emil

  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1869 posts
    Member since:
    Sep 2012

    Posted 12 Feb 2013 Link to this post

    Hi Emil,

    I am not quite sure what causes the problem in your application. For your convenience I prepared a simple jsBin example which demonstrates how you can add an optionLabel in Kendo UI DropDownList. May I ask you to edit it and show me your current implementation? This way I would be able to investigate the case in details and provide concrete recommendations. Thank you in advance for your time.
     
    Regards,
    Iliana Nikolova
    the Telerik team

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  5. Emil
    Emil avatar
    5 posts
    Member since:
    Dec 2012

    Posted 12 Feb 2013 Link to this post

    Hi Iliana,

    Thanks for your response.

    I think the problem has to to with binding to remote data.

    When i take the Kendo UI web example and add the optionLabel text + value, the 'undefined' pops up:
    http://www.arion.nl/js/kendoui/examples/web/dropdownlist/remotedatasource.html

    This is also the case for the cascading example:
    http://www.arion.nl/js/kendoui/examples/web/dropdownlist/cascadingdropdownlist.html

    Thanks,
    Emil




  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1869 posts
    Member since:
    Sep 2012

    Posted 14 Feb 2013 Link to this post

    Hi Emil,

    I believe the issue is due to mismatched optionLabel's text / value and dataTextField / dataValueField. The correct configuration should be: 

    $("#titles").kendoDropDownList({
       optionLabel: {
          Name: "SomeName",
          Id: "Id"
        },
        dataTextField: "Name",
        dataValueField: "Id",
        //....
    });
    Regards, Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  7. Emil
    Emil avatar
    5 posts
    Member since:
    Dec 2012

    Posted 15 Feb 2013 Link to this post

    Hi Iliana, that did the trick!

    There was a small issue as datafield and textfield are the same in my dropdown,
    but this was resolved by creating a duplicate field in the datasource.

    Regards,
    Emil

  8. Matt
    Matt avatar
    8 posts
    Member since:
    Jun 2010

    Posted 01 Jun 2013 Link to this post

    Hi, is it possible to do when using declarative initialization?

    e.g. ...<input data-role="dropdownlist" data-option-label="Select Title" data-option-label-value="" ... etc 

    Thanks,

    Matt

  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1869 posts
    Member since:
    Sep 2012

    Posted 04 Jun 2013 Link to this post

    Hello Matt,

    I am afraid what you would like to achieve is not supported - the optionLabel cannot be an object when using declarative initialization. Please excuse us for the inconvenience caused.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  10. Zachary
    Zachary avatar
    23 posts
    Member since:
    Feb 2013

    Posted 29 Aug 2013 Link to this post

    Iliana,

    This thread was extremely helpful in finding the correct configuration of the optionLabel object. Here was my configuration:

    $("#titles").kendoDropDownList({
       dataTextField: "value",
       dataValueField: "typeID",
       optionLabel: {
          text: "Select One",
          value: ""
        },
        //....
    });

    I was shocked when the dropdown rendered the first item empty. Now I know that it was matching "value" in the dataTextField with "value" in the optionLabel.

    My expectation was that optionLabel creates an item with the text and value set from "text" and "value" in the optionLabel. Clearly, the two strings in the optionLabel need to match the dataTextField and dataValueField.

    I would like to suggest you modify the documentation for optionLabel to match your post in this thread.
    $("#dropdownlist").kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Id",
        optionLabel: {
           Name: "Select An Option",
           Id: ""
        }
    });

    Thank you for your time.
    Zachary

  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    1869 posts
    Member since:
    Sep 2012

    Posted 02 Sep 2013 Link to this post

    Hello Zachary,

    Thank you for the suggestion - I forwarded it to the team for further discussions. 

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

Back to Top