JSFiddle - React, Tailwind, and code Playground

by vrluckyin India

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css">
<script src="https://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
<input id="dropdownlist" />

JavaScript

function dropdownlist_filtering(e) {
  //get filter descriptor
  var filter = e.filter;

  // handle the event
}
 function filtering (e) {
   console.log('filtering..........', e.filter);
   //prevent default filtering
   if (e.filter == undefined) {
     //ddlProject.dataSource.filter({});
     e.filter = {
       field: "ProjectDescription",
       ignoreCase: true,
       operator: "startswith",
       value: "2"
     };
     return true;
   }
   e.preventDefault();

   //apply custom filter
   dropdownlist.dataSource.filter({
     logic: "or",
     filters: [
       {
         field: "ProjectNum",
         operator: "contains",
         value: e.filter.value
       },
       {
         field: "ProjectDescription",
         operator: "contains",
         value: e.filter.value
       }
     ]
   });
 }
$("#dropdownlist").kendoDropDownList({
  	dataSource: 
    	[ 
      		{'ProjectId':1, 'ProjectNum':'Apples', 'ProjectDescription':'Apples' }
          ,{'ProjectId':2,'ProjectNum':'Orange 1', 'ProjectDescription':'dApples D 2' } 
     ],
    filter: "startswith",
  	dataTextField: "ProjectDescription",
  	dataValueField: "ProjectId",
  	optionLabel: 'Select Project...',
  	height: 300
});
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
dropdownlist.bind("filtering", filtering);