Angular + Kendo: Default placeholder for drop down list

Question

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.

not sure if it's the same issue but you could try with an input instead of the select: stackoverflow.com/a/23029167/2001735 — Lars Höppner
that one is using kendo-combo-box, which is a different directive, but thanks anyways... — Alan Souza

George K George K · Accepted Answer · 2014-09-03T09:56:05

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"
            }
        ]
    }
};

...

Angular + Kendo: Default placeholder for drop down list

1 Answers