15 Answers, 1 is accepted
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
optionLabel: {
text: "Choose xxx",
value: ""
},
Why does it just add an 'undefined' to the options list?
Thanks,
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
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
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"
,
//....
});
the Telerik team
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
e.g. ...<input data-role="dropdownlist" data-option-label="Select Title" data-option-label-value="" ... etc
Thanks,
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.
Iliana Nikolova
Telerik
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
Thank you for the suggestion - I forwarded it to the team for further discussions.
Iliana Nikolova
Telerik
I would suggest you check the OptionLabel(object) documentation:
Regards,
Georgi Krustev
Telerik
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
}
});
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
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
}
});