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

OptionLabel is posted as value

15 Answers 1830 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Emil
Top achievements
Rank 1
Emil asked on 08 Feb 2013, 09:21 PM
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




15 Answers, 1 is accepted

Sort by
0
Emil
Top achievements
Rank 1
answered on 09 Feb 2013, 03:42 PM
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
0
Emil
Top achievements
Rank 1
answered on 12 Feb 2013, 04:55 PM
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
0
Iliana Dyankova
Telerik team
answered on 12 Feb 2013, 05:51 PM
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!
0
Emil
Top achievements
Rank 1
answered on 12 Feb 2013, 06:15 PM
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




0
Iliana Dyankova
Telerik team
answered on 14 Feb 2013, 05:09 PM
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!
0
Emil
Top achievements
Rank 1
answered on 15 Feb 2013, 09:07 AM
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
0
Matt
Top achievements
Rank 1
answered on 01 Jun 2013, 06:07 AM
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
0
Iliana Dyankova
Telerik team
answered on 04 Jun 2013, 06:32 PM
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!
0
Zachary
Top achievements
Rank 1
answered on 29 Aug 2013, 11:12 PM
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
0
Iliana Dyankova
Telerik team
answered on 02 Sep 2013, 02:10 PM
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!
0
John
Top achievements
Rank 1
answered on 13 Mar 2015, 03:50 PM
Can someone include the MVC configuration version of this issue for the OptionLabel?  I'm having a problem discovering the fluent version of the OptionLabel's text and value.
0
Georgi Krustev
Telerik team
answered on 17 Mar 2015, 03:36 PM
Hello John,

I would suggest you check the OptionLabel(object) documentation:
Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Morten
Top achievements
Rank 1
answered on 04 Aug 2015, 01:51 PM

Using null as the value doesn't seem to work. It's still set to "".

 $("#dropdownlist").kendoDropDownList({

    dataTextField: "Name",
    dataValueField: "Id",
    optionLabel: {
       Name: "Select An Option",
       Id: null
    }
});

0
Georgi Krustev
Telerik team
answered on 06 Aug 2015, 08:05 AM
Hello Morten,

I answered to the support ticket opened on the same subject. Here is a quote of the answer:

In general, the widget is designed to set its primitive value to the model (valuePrimitive: true) or the whole object (valuePrimitive: false). When primitive value is used, the "null" value is converted to empty string. This is done, because the underlying input element cannot contain null value as string, hence it should be an empty string instead.

What I would suggest you is to use a non-primitive value binding, thus you will access to the whole object and use its properties unchanged:

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Morten
Top achievements
Rank 1
answered on 06 Aug 2015, 08:16 AM

I got it working without the primitive value option.

I simply had to use k-ng-model instead of just ng-model. With k-ng-model="foo" then $scope.foo will be null when selecting the placeholder.

$("#dropdownlist").kendoDropDownList({
    dataTextField: "Name",
    dataValueField: "Id",
    optionLabel: {
       Name: "Select An Option",
       Id: null
    }
});​

Tags
DropDownList
Asked by
Emil
Top achievements
Rank 1
Answers by
Emil
Top achievements
Rank 1
Iliana Dyankova
Telerik team
Matt
Top achievements
Rank 1
Zachary
Top achievements
Rank 1
John
Top achievements
Rank 1
Georgi Krustev
Telerik team
Morten
Top achievements
Rank 1
Share this question
or