Hey all I am using KendoListBox and needing to loop through it and remove the selected [checked] items once I un-check the full category.
let apiData = {
"object_list": [{
"Name": "facebook",
"Description": null,
"Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
}, {
"Name": "twitter",
"Description": null,
"Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
}, {
"Name": "Google",
"Description": null,
"Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Search Engines"
}]
};
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: {
data: apiData,
schema: {
model: {
children: 'items'
},
parse: (data) => {
// The new data array to be used by treeview
let newData = [];
data.object_list.forEach(item => {
// Look for an already created parent for that categoty
let parent = newData.find(parentItem => parentItem.text === item.Cat);
// If not found...
if (!parent) {
// ... create a new one...
parent = {
id: 2,
text: item.Cat,
expanded: true,
items: [],
spriteCssClass: "folder"
};
// ... and add it to the final data array.
newData.push(parent);
}
// Add the new item to the parent
parent.items.push({
id: 3,
text: item.Name,
spriteCssClass: "image"
});
});
// Return the root object with its new child items
return [{
id: 1,
text: 'Categories',
expanded: true,
spriteCssClass: "rootfolder",
items: newData
}];
}
}
}
});
$("#Sources").kendoListBox();
function onCheck(e) {
let checkedNodes = [],
checkedNode = e.node.innerText,
intx = 0,
listBox = $("#Sources").data("kendoListBox");
//console.log(e.node.innerText);
if (e.node.ariaChecked == "false") {
console.log("Its just now been selected *REMOVED*");
var node = listBox.dataSource.get("twitter");
//let listBoxItem = listBox.dataItems().find(item => item.text === e.node.innerText);
let listBoxItem = listBox.dataItems().find(item => "twitter" === "twitter");
console.log("listbox item: ", listBoxItem);
var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);
if (textSpliced.length >= 1) {
$.each(textSpliced, function(tS) {
console.log("splice: ", textSpliced[tS]);
listBox.dataSource.remove(textSpliced[tS]);
});
} else {
/*
$("#Sources option").each(function(i){
alert($(this).text() + " : " + $(this).val());*/
//if (listBoxItem) {
//console.log("list: ", listBoxItem);
//listBox.dataSource.remove(listBoxItem);
//}
//}
// });
}
} else {
console.log("Its just now been selected *ADDED*");
listBox = $("#Sources").data("kendoListBox");
var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);
if (textSpliced.length >= 1) {
$.each(textSpliced, function(tS) {
console.log(textSpliced[tS]);
listBox.add({
text: textSpliced[tS],
value: textSpliced[tS]
});
});
} else {
listBox.add({
text: checkedNode,
value: checkedNode
});
}
}
}#treeview .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
#filterText {
width: 100%;
box-sizing: border-box;
padding: 6px;
border-radius: 3px;
border: 1px solid #d9d9d9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<div id="treeview"></div>
<select id="Sources"></select>I can do this
listBox.dataItems().find(item => item.text === e.node.innerText)
And be able to delete any 1 checked item. But if its more than 1 I am unable to figure out what I am missing.
So I tried doing this:
var text = e.node.innerText;
var textSpliced = text.split("\n").slice(1);
if (textSpliced.length >= 1) {
$.each(textSpliced, function(tS) {
console.log("splice: ", textSpliced[tS]);
listBox.dataSource.remove(textSpliced[tS]);
});
} else {}
But of course that did not produce any results - did not delete the items in the kendoListBox.
Try this new approach:
let apiData = {
"object_list": [{
"Name": "facebook",
"Description": null,
"Id": "eb8cb0c8c32d1201bff30cf54S4f30889abb23f92b1f7",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
}, {
"Name": "twitter",
"Description": null,
"Id": "732fe66cce4365bc5074384f09b34e787f3f3efe8b55",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Social Networks"
}, {
"Name": "Google",
"Description": null,
"Id": "8b11d6f7b74bf71a7ddbc62dcfead27087e0f3e047e",
"DocumentType": null,
"ProviderId": 2,
"Cat": "Search Engines"
}]
};
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: {
data: apiData,
schema: {
model: {
children: 'items'
},
parse: (data) => {
// The new data array to be used by treeview
let newData = [];
data.object_list.forEach(item => {
// Look for an already created parent for that categoty
let parent = newData.find(parentItem => parentItem.text === item.Cat);
// If not found...
if (!parent) {
// ... create a new one...
parent = {
id: 2,
text: item.Cat,
expanded: true,
items: [],
spriteCssClass: "folder"
};
// ... and add it to the final data array.
newData.push(parent);
}
// Add the new item to the parent
parent.items.push({
id: 3,
text: item.Name,
spriteCssClass: "image"
});
});
// Return the root object with its new child items
return [{
id: 1,
text: 'Categories',
expanded: true,
spriteCssClass: "rootfolder",
items: newData
}];
}
}
}
});
$("#Sources").kendoListBox();
function onCheck(e) {
let listBox = $("#Sources").data("kendoListBox"),
treeView = $("#treeview").data("kendoTreeView"),
selection = [],
getSelection = (items) => {
items.forEach(item => {
if (item.hasChildren) getSelection(item.items);
else if (item.checked) selection.push(item);
});
};
listBox.remove(listBox.items());
getSelection(treeView.dataSource.data());
if (selection.length) {
selection.forEach(item => {
listBox.add({
text: item.text,
value: item.value
});
});
}
}#treeview .k-sprite {
background-image: url("../content/web/treeview/coloricons-sprite.png");
}
.rootfolder {
background-position: 0 0;
}
.folder {
background-position: 0 -16px;
}
.pdf {
background-position: 0 -32px;
}
.html {
background-position: 0 -48px;
}
.image {
background-position: 0 -64px;
}
#filterText {
width: 100%;
box-sizing: border-box;
padding: 6px;
border-radius: 3px;
border: 1px solid #d9d9d9;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.common.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.rtl.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.default.min.css">
<link rel="stylesheet" type="text/css" href="https://kendo.cdn.telerik.com/2021.1.330/styles/kendo.mobile.all.min.css">
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/angular.min.js"></script>
<script type="text/javascript" src="https://kendo.cdn.telerik.com/2021.1.330/js/jszip.min.js"></script>
<script type="text/javascript" src="http://cdn.kendostatic.com/2021.1.330/js/kendo.all.min.js"></script>
<div id="treeview"></div>
<select id="Sources"></select>