Set the selected option by value in the Kendo DropDownList

Question

I have a kendo ui dropdownlist with angularjs in my html:

<select kendo-drop-down-list="dropdownlistCatalogs" k-options="optionsDropDownListCatalogs" data-role="dropdownlist" style="display: none;">
   <option value="2" selected="selected">Test1</option>
   <option value="3">Test2</option>
   <option value="4">Test3</option>
</select>

In the angularjs controller, everytime i click on an item in the dropdownlist, i call this function to remove the selected item from the dropdown control:

function removeItemFromDropDown(e) {
   var index = e.item.index();
   var selectedItem = $scope.dropdownlistCatalogs.dataItem(e.item.index());
   $scope.optionsDropDownListCatalogs.dataSource.remove(selectedItem);
}

Now, i want set the selected option to non existing item to show an empty value.

I have tried with:

$scope.dropdownlistCatalogs.value(-1);

but not working

How can i set the dropdownlist by value()?

Answer 1

I'm not sure much about angularjs and if things are different. I see $scope in there which I guess is of angular, since i dont see it defined anywhere. But Usually value will help you with this if using jquery

Add a default blank value at the top with id:-1 and set the default value as 1.

On click of a button, you can change the value to -1

It would look like this :

var data = [
    { "text": "" , id: -1 }, 
    { "text": "aaa",id: 1 },
    { "text": "bbb",id: 2 },
    { "text": "ccc", id:3}
];

$("#ddl").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "id",
    dataSource: data,
    index: 3
});

$("#button").on("click", function ()  {

    var dropdownlist = $("#ddl").data("kendoDropDownList");

    dropdownlist.value(-1);
});

Here is an working example