I was wondering how to set placeholder for drop down list in kendo ui + angular.
Currently I have:
Template
<select kendo-drop-down-list ng-model="selectedElement" k-options="options" >
</select>
Controller
...
$scope.options = {
dataTextField: 'label',
dataValueField: 'id',
dataSource: {
data: [
{
"label": "Please Select..."
},
{
"id": "linear",
"label": "Sample Linear"
},
{
"id": "bar",
"label": "Sample Bar"
}
]
}
};
...
If I replace the datasource by a backend call, I cannot have 'Please Select' there. Is there another way of solving this problem?
I tried using data-option-label="Please Select" following instructions in this link, but no luck.
The DropDownList enables you to configure its default item. The defaultItem property type has to match the data type. For example, if the data property contains a list of objects, the defaultItem has to be defined as an object with the same textField and valueField as the data items.
The Kendo UI for Angular DropDownList is a form component that lets you choose a single predefined value from a list. It is a richer version of the <select> element and supports data binding, filtering, templates, and default items.
Well, you can either define it as a data attribute (more information here)
Template
<select kendo-drop-down-list k-option-label="'item1'" ng-model="selectedElement" k-options="options" >
</select>
or set the optionLabel option in the $scope
Controller
...
$scope.options = {
optionLabel: "Item...",
dataTextField: 'label',
dataValueField: 'id',
dataSource: {
data: [
{
"label": "Please Select..."
},
{
"id": "linear",
"label": "Sample Linear"
},
{
"id": "bar",
"label": "Sample Bar"
}
]
}
};
...
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With