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">
Multi-node and multi-tree select tree view facilitated by e.preventDefault()
<hr>
<ul id='mytree'>
<li>Abra
<ul>
<li>1. Once</li>
<li>2. Upon
<ul>
<li>there</li>
<li>was a
<ul>
<li>yada</li><li>yada</li><li>soup vendor</li>
</ul>
</li>
<li>spring</li>
</ul>
</li>
<li>3. A time</li>
</ul>
</li>
<li>Cadabra</li>
</ul>
<hr>
<input type="radio" name="modegroup" value="1">Multi-node<br>
<input type="radio" name="modegroup" value="2" checked>Multi-tree<br>
CSS
.my-selected-state { background-color:blue; color:white }
body {font-family:sans-serif}
JavaScript
$('#mytree').kendoTreeView({
select: function(e) {
var SELECTOR = '.my-selected-state';
var SELCLASS = 'my-selected-state';
var node = $(e.node).closest('.k-item');
var kin = node.find('>div span.k-in');
var isSel = kin.is(SELECTOR);
var multinode = 1; // any number of node in any number of paths
var multitree = 2; // any number of paths, however each node must be in separate subtrees
var mode = $('input[name=modegroup]:checked').val();
if (mode == multitree) {
// uncomnment to ensure specificity, i.e. only one node in a given path
node.find(SELECTOR).removeClass(SELCLASS);
$.map(node.parentsUntil('.k-treeview ', '.k-item'), function(kitem) {
$(kitem).find('>div span.k-in').filter(SELECTOR).removeClass(SELCLASS);
});
}
if (!isSel) {
kin.addClass(SELCLASS)
} else {
kin.removeClass(SELCLASS)
}
e.preventDefault(); // prevent default selection behaviour, which means this node can be clicked again to deselect .cm-state
}
});
$('#mytree ').data('kendoTreeView').expand(".k-item");