JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<input type=text id='search-term'/>
<div id='searchable-tree'></div>
<label for='search-term'>Search</label>
CSS
span.k-in > span.highlight {background:red}
JavaScript
/* Highlight treeview nodes, basis: kendoUI 1.322, jQuery1.7.1 */
$('#search-term').on('keyup', function () {
$('span.k-in > span.highlight').each(function(){
$(this).parent().text($(this).parent().text());
});
if ($.trim($(this).val()) == '') { return; }
var term = this.value.toUpperCase();
var tlen = term.length;
$('#searchable-tree span.k-in').each(function(){
var text = $(this).text();
var p = text.toUpperCase().indexOf(term);
if (p >= 0) {
var s1='', s2='';
var high = '<span class="highlight">' + text.substr(p,tlen) + '</span>';
if (p > 0) {
s1 = text.substr(0,p);
}
if (p+tlen < text.length) {
s2 = text.substring(p+tlen)
}
$(this).html(s1+high+s2);
}
});
}) ;
$('#searchable-tree').kendoTreeView(
dataSource = [
{
text: "Item 1",
items: [
{ text: "Item 1.1"} ,
{ text: "Item 1.2"}
]},
{
text: "Item 2"
},
{
text: "Months",
items: [
{ text: "January"},
{ text: "February"},
{ text: "March"},
{ text: "April",
items: [
{ text: 'Rain'},
{ text: 'Sleet'},
{ text: 'Sunshine'},
{ text: 'Wind'}
]},
{ text: "May"},
{ text: "June"},
{ text: "July"},
{ text: "August"},
{ text: "September",
items: [
{ text: 'Rain'},
{ text: 'Sleet'},
{ text: 'Sunshine'},
{ text: 'Bertha'}
]},
{ text: "October"},
{ text: "November"},
{ text: "December"}
]}
]);
var tv = $('#searchable-tree').data('kendoTreeView');
tv.expand(".k-item");