Search code examples
javascriptangularjskendo-uitelerikkendo-dropdown

Angular + Kendo: Default placeholder for drop down list


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.


Solution

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

    ...