<!--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/2015.1.429/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2015.1.429/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/2015.1.429/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;
}
#multiselect-list {
display: none !important;
}
</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 treeView;
var dataSourceForTreeView = [{
text: "Item 1",
id: "Item 1",
items: [{
id: "Item 1.1",
text: "Item 1.1"
}, {
id: "Item 1.2",
text: "Item 1.2"
}, {
id: "Item 1.3",
text: "Item 1.3"
}]
}, {
text: "Item 2",
id: "Item 2",
items: [{
id: "Item 2.1",
text: "Item 2.1"
}, {
id: "Item 2.2",
text: "Item 2.2"
}, {
id: "Item 2.3",
text: "Item 2.3"
}]
}, {
id: "Item 3",
text: "Item 3"
}];
function createMultiSelect() {
// Create kedno multiselect
multiSelect = $("#multiselect").kendoMultiSelect({
optionLabel: "Select Legal Topics...",
dataTextField: "text",
dataValueField: "value",
animation: false,
change: function(event) {
debugger;
var array1 = multiSelect.value();
var array2 = multiSelect.dataSource.data();
$.grep(array2, function(el) {
if ($.inArray(el.value, array1) == -1) {
var bar = treeView.findByText(el.value);
treeView.dataItem(bar).set("checked", false);
}
});
}
}).data("kendoMultiSelect");
// Kendo multiselect in read only mode
// multiSelect.readonly();
}
function createTreeView() {
// Create Tree view control
treeView = $('#mytree').kendoTreeView({
dataSource: {
data: dataSourceForTreeView
},
checkboxes: {
checkChildren: false
},
check: onCheck,
select: function(e) {
debugger;
var bar = treeView.findByText(e.node.innerText.split("\n")[0]);
var node = treeView.dataItem(bar);
if (node.dirty && node.checked) {
node.set("checked", false);
} else {
node.set("checked", true);
}
onCheck();
},
change:function(){
treeView.select().find(".k-state-selected").removeClass("k-state-selected");
}
}).data("kendoTreeView");
$('#mytree ').data('kendoTreeView').expand(".k-item");
}
// function that gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
if (nodes[i].parent().parent()) {
checkedNodes.push({
text: nodes[i].parent().parent().id + " > " + nodes[i].id,
value: nodes[i].id
});
} else {
checkedNodes.push({
text: nodes[i].id,
value: nodes[i].id
});
}
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck() {
var checkedNodes = [];
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
multiSelect.dataSource.data(checkedNodes);
multiSelect.value(checkedNodes);
}
$(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>
No comments:
Post a Comment