How to use code ?
Answer : Create demo.html and file and copy below code into file and run demo.html file.*********************************************************************************
*********************************************************************************
<!--Created by Nilav Patel (nilavpatel1992@gmail.com, nilavpatel.blogspot.com)-->
<html>
<head>
<title>Kendo Multi select and tree view combine control</title>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<style>
.my-selected-state {
background-color: lightskyblue;
color: white
}
body {
font-family: sans-serif
}
#treeview {
display: none;
}
#multiselectTree {
width: 400px;
border: 2px solid lightskyblue
}
#multiselectTree .k-delete {
display: none;
/*by default kendo tree view is hidden*/
}
#treeview {
background-color: aliceblue;
}
</style>
</head>
<body>
<!--Kendo multiselect tree view start-->
<div id="multiselectTree">
<!--Kendo multiselect start-->
<div id="lblSelectTree">
<select id="multiselect" multiple="multiple" placeholder="select leagal topics">
<option value="" disabled selected>Select your option</option>
</select>
</div>
<!--Kendo multiselect end-->
<!--kendo tree view start-->
<div id="treeview">
<div id='mytree'>
</div>
</div>
<!--Kendo tree view end-->
</div>
<!--Kendo multiselect tree view end-->
</body>
<script>
// Global variable for selected values
var selectedVlaues = [];
var multiSelect;
var dataSourceForTreeView = [{
text: "Item 1",
items: [{
text: "Item 1.1"
}, {
text: "Item 1.2"
}, {
text: "Item 1.3"
}]
}, {
text: "Item 2",
items: [{
text: "Item 2.1"
}, {
text: "Item 2.2"
}, {
text: "Item 2.3"
}]
}, {
text: "Item 3"
}];
function createMultiSelect() {
// Create kedno multiselect
multiSelect = $("#multiselect").kendoMultiSelect({
optionLabel: "Select Legal Topics...",
dataTextField: "text",
dataValueField: "value",
readonly: true,
disabled: true
}).data("kendoMultiSelect");
// Kendo multiselect in read only mode
multiSelect.readonly();
}
function createTreeView() {
// Create Tree view control
$('#mytree').kendoTreeView({
dataSource: {
data: dataSourceForTreeView
},
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;
var multitree = 2;
var mode = 2; //put 1 if need multinode
if (mode == multitree) {
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)
}
// Get collection of selected values
var itemId = e.node.innerText.split("\n")[0];
if (selectedVlaues.filter(e => e.text == itemId).length > 0) {
var temp;
$.each(selectedVlaues, function(ix, val) {
if (val.value == itemId) {
temp = ix;
}
});
if (!isNaN(temp)) {
selectedVlaues.splice(temp, 1);
}
} else {
selectedVlaues.push({
text: itemId,
value: itemId
});
}
// Set selected value to kendo multiselect
multiSelect.dataSource.data(selectedVlaues);
var values = $.map(multiSelect.dataSource.data(), function(dataItem) {
return dataItem.value;
});
multiSelect.value(values);
e.preventDefault();
}
});
$('#mytree ').data('kendoTreeView').expand(".k-item");
}
$(document).ready(function() {
createTreeView()
createMultiSelect()
// Show Treeview on click of multiselect
$("#lblSelectTree").click(function(e) {
$("#treeview").show();
})
// Hide tree view on click of outside control
$('body').click(function(evt) {
if ($(evt.target).parents('#multiselectTree').length == 0) {
$("#treeview").hide();
}
});
});
</script>
</html>
Thanks to Admin for Sharing such useful Information. I really like your Blog. Addition to your Story here I am Contributing 1 more Similar Story Easily Customizable Simple pure CSS Treeview.
ReplyDeleteImpressive web site, Distinguished feedback that I can tackle. Im moving forward and may apply to my current job as a pet sitter, which is very enjoyable, but I need to additional expand. Regards. techwear-x.com
ReplyDelete