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

...

Share:
12,643
Alan Souza
Author by

Alan Souza

Amateur accordionist and UI/UX developer at Hewlett Packard Enterprise in Palo Alto, California.

Updated on June 16, 2022

Comments

  • Alan Souza
    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.