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.

Greenwell

not sure if it's the same issue but you could try with an input instead of the select: https://mcmap.net/q/1607973/-angular-kendo-combobox-placeholder-text-not-working – Recidivism

I tried also that, but did not solve. – Greenwell

that one is using kendo-combo-box, which is a different directive, but thanks anyways... – Greenwell

Answer 1

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

...

Radices

k-option-label="item1" is wrong since option-label is a string so you need to add ' around it like k-option-label="'item1'" – Cinerary

@GeorgeK: hey do you know how to dynamic change the optionLabel? I tried $scope.options.optionLabel = 'new display...'. The UI doesnt get updated – Samirasamisen

You will need to use k-rebind*. Here is a demo that demonstrates this dojo.telerik.com/ipuzo * - docs.telerik.com/kendo-ui/AngularJS/… – Radices