How to specify an optionLabelTemplate Kendo UI DropDownList with AngularJS

Question

I am having difficulty using the optionLabelTemplate on a dropdownlist through an angular options binding in KendoUI.

Version: Kendo UI v2015.1.430

Markup:

         <select kendo-drop-down-list
                k-options="DropDownOptionsTest"></select>

Script:

    var TestData = new kendo.data.ObservableArray([{value:"one", id:1}, {value:"two", id:2}]);
    $scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabelTemplate: '<span>SelectText...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

Result: No options label appears, first option is automatically selected.

Can someone please explain to me why that doesn't work and how I can make it work?

Answer 1

If I understand correctly what you are trying to do is display a default text ("SelectText...") when the drop down list is first rendered and there is no selection. The way to do this is with the optionLabel attribute. You can also use the optionLabelTemplate you are already using in order to customise the markup of the option label but only if an option label already exists. Therefore, while this doesn't work:

$scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabelTemplate: '<span>Select Text...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

This does:

$scope.DropDownOptionsTest = {
        dataSource: TestData,
        optionLabel: 'Select Text...'
        optionLabelTemplate: '<span>Select Text...</span>',
        dataTextField: "value",
        dataValueField: "id"
    };

Please note that in this case the optionLabel will be disregarded, since the optionLabelTemplate determines what will be rendered by the drop down list, it still needs to be there nevertheless. Finally, you can also use the value of your optionLabel in your optionLabelTemplate with something like this (although I can't think of any use case where you might need to do something this complex):

$scope.DropDownOptionsTest = {
        dataSource: $scope.testData,
        optionLabel: 'Select one...',
        optionLabelTemplate: function(optionLabel){return '<span>' + optionLabel + '</span>'},
        dataTextField: "value",
        dataValueField: "id"
    };