CODEWITHSUNDEEP
angularjskendo-ui
user308553
user308553

Reputation: 1250

kendo angular changing dropdown option label

Before my kendo dropdown get populated with options, I want the optionLabel to be 'Wait for loading'. Then after it get populated I want to change the label to '--select--'.

My failed attempt:

html:

                    <select k-ng-disabled="table.LevelDropDown.disabled"
                            ng-disabled="table.LevelDropDown.disabled"
                            kendo-drop-down-list
                            k-data-text-field="'value'"
                            k-data-value-field="'GUID'"
                            k-options="table.LevelDropDown.options"
                            k-data-source="table.LevelDropDown.list"
                            k-ng-model="table.LevelDropDown.currentSelected"></select>

in controller (initial object state):

[...]

        LevelDropDown: {
            currentSelected: null,
            disabled: true,
            list: [{value: null, GUID: null}],
            options: {
                optionLabel: "Wait for loading"
            },
            resetFields: function () {
                $scope.LevelDropDown.currentSelected = null;
                $scope.LevelDropDown.list = [{ value: null, GUID: null }];
                $scope.LevelDropDown.disabled = true;
                $scope.LevelDropDown.options.optionLabel = "Wait for loading";

            }

Then somewhere in the code I would try to change the displaying label to '--select--'

 $scope.teamPermissions.addModalFields.OrgAccessLevelDropDown.options.optionLabel = "--Select--";

Upvotes: 0

Views: 1098

Answers (1)

DontVoteMeDown
DontVoteMeDown

Reputation: 21465

Try using this function on dataBound event:

var changeOptionLabel = function(text) {
    var ddl = $("select").data("kendoDropDownList");
    ddl.optionLabel.text(text)
    ddl.options.optionLabel = text;
    ddl.refresh();
    ddl.select(0);
};

Demo

Upvotes: 2

Related Questions