Kendo Dropdown Validations

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>