Angular + Kendo: Default placeholder for drop down list
12,643
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"
}
]
}
};
...
Author by
Alan Souza
Amateur accordionist and UI/UX developer at Hewlett Packard Enterprise in Palo Alto, California.
Updated on June 16, 2022Comments
-
Alan Souza almost 2 years
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.