Kendo Dropdown Validations - kendo-ui

Question

var test = $("#TestDropdown").kendoDropDownList({
dataTextField: "test",
dataValueField: 'testing',
filter: "contains",
autoBind: false,
minLength: 2,
dataSource: {
transport: {
read: {
url:
complete: function (jqXHR, textStatus) {
}
},
},
schema: {
test: {editable: true, type: "string"},
testing: {editable: true, type: "number"},
}
}
});
Say my dropdown list have 3 values, red , yellow, green.
If green is currently selected how can i create validation that it cant be changed to yellow, or is this possible?

Answer 1

You can follow method from documentation
select: function(e) {
if (e.dataItem.isDeleted) {
e.preventDefault(); // it will stop from selection
}
},
$("#dropdownlist").kendoDropDownList({
dataSource: [
{ id: 1, name: "Apples", isDeleted: false},
{ id: 3, name: "Mangoes", isDeleted: true},
{ id: 2, name: "Oranges" , isDeleted: false}
],
dataTextField: "name",
dataValueField: "id",
select: function(e){
if(e.dataItem.isDeleted){
e.preventDefault();
}
},
template: kendo.template($("#template").html())
});
$(".k-button").click(function(){
var dropdown = $("#dropdownlist").data("kendoDropDownList");
var oranges = dropdown.dataSource.get(2);
oranges.set("isDeleted", true);
})
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1018/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1018/js/kendo.all.min.js"></script>
<input id="dropdownlist" /> <button class="k-button"> Mark Oranges as deleted</button>
<script id="template" type="text/x-kendo-template">
<span class="#: isDeleted ? 'k-state-disabled': ''#">
#: name #
</span>
</script>