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: http://stackoverflow.com/a/23029167/2001735 — Lars Höppner, Sep 02 '14 at 22:05
that one is using kendo-combo-box, which is a different directive, but thanks anyways... — Alan Souza, Sep 02 '14 at 22:08

George K · Accepted Answer · 2015-05-25T10:38:48.207

9

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

...

edited May 25 '15 at 10:38

answered Sep 03 '14 at 09:56

George K

1,763
1
9
17

1

`k-option-label="item1"` is wrong since option-label is a string so you need to add ' around it like `k-option-label="'item1'"` – Robert May 21 '15 at 11:46
@GeorgeK: hey do you know how to dynamic change the optionLabel? I tried $scope.options.optionLabel = 'new display...'. The UI doesnt get updated – user308553 Aug 26 '16 at 15:08
You will need to use k-rebind*. Here is a demo that demonstrates this http://dojo.telerik.com/ipuzo * - http://docs.telerik.com/kendo-ui/AngularJS/introduction#widget-update-upon-option-changes – George K Aug 31 '16 at 09:02

Angular + Kendo: Default placeholder for drop down list

1 Answers1