Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 962
Alan Souza Avatar asked Sep 02 '14 22:09

Alan Souza


People also ask

How do I set the default value of kendo DropDownList?

The DropDownList enables you to configure its default item. The defaultItem property type has to match the data type. For example, if the data property contains a list of objects, the defaultItem has to be defined as an object with the same textField and valueField as the data items.

What is Kendo DropDownList?

The Kendo UI for Angular DropDownList is a form component that lets you choose a single predefined value from a list. It is a richer version of the <select> element and supports data binding, filtering, templates, and default items.


1 Answers

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

...

like image 108
George K Avatar answered Sep 24 '22 20:09

George K