Sorting Kendo UI Jquery treeview child items in each parent item A-Z
Hey all I am trying to find the correct way to order/sort my child names in order from A-Z.
Currently my treeview looks like this:
And this is how I would like to sort it:
The data is coming in via JSON like so (using the above example):
[{
"Name": "AU",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Gitlab",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "B",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "GitHubCommits",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "GitHub",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Re",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Ir",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Ru",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "LoveA",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "LoveH",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
},.........
]
Note that the JSON above does not come in any type of order and there are also other category's but I left those out for simplicity sake. The Category names themselves are in order by me doing this:
dataSource: {
data: resultData,
schema: {
model: {
children: 'items'
},
parse: (data) => {
let newData = [];
//Re-order catagory names A-Z
data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);
....
The rest of the above code looks like this::
data.forEach(item => {
let parent = newData.find(parentItem => parentItem.text === item.Category);
if (!parent) {
//The beginning of the tree category
parent = {
id: 2,
text: item.Category,
expanded: true,
items: [],
imageUrl: "" + item.Icon + ""
};
newData.push(parent);
}
parent.items.push({
//Each "child" under the above category
id: 3,
text: item.Name,
imageUrl: "" + item.Icon + ""
});
});
return [{
id: 1,
text: 'Categories',
expanded: true,
items: newData
}];
}
}
}
});
How would I, using the code above, sort also the child items under each category name?
I've tried already adding this to the code:
sort: {
field: "Name",
dir: "asc"
}
But that does not seem to do anything?
Solution
Add this:
newData.forEach(item => {
if (item.items || item.items.length) {
item.items.sort((a, b) => (a.text > b.text) ? 1 : -1);
}
});
... before the return in parse event.
Demo:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/treeview/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<div>
<div id="treeview-left"></div>
</div>
</div>
<script>
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
"Name": "AU",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Gitlab",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "B",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "GitHubCommits",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "GitHub",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Code Repos",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Re",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Ir",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "Ru",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Academic",
"Icon": null,
"ProviderId": 2
}, {
"Name": "LoveA",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}, {
"Name": "LoveH",
"Description": null,
"Id": "xxx",
"DocumentType": null,
"Category": "Dating",
"Icon": null,
"ProviderId": 2
}],
schema: {
model: {
children: 'items'
},
parse: (data) => {
let newData = [];
//Re-order catagory names A-Z
data.sort((a, b) => (a.Category > b.Category) ? 1 : -1);
data.forEach(item => {
let parent = newData.find(parentItem => parentItem.text === item.Category);
if (!parent) {
//The beginning of the tree category
parent = {
id: 2,
text: item.Category,
expanded: true,
items: [],
imageUrl: "" + item.Icon + ""
};
newData.push(parent);
}
parent.items.push({
//Each "child" under the above category
id: 3,
text: item.Name,
imageUrl: "" + item.Icon + ""
});
});
newData.forEach(item => {
if (item.items || item.items.length) {
item.items.sort((a, b) => (a.text > b.text) ? 1 : -1);
}
});
return [{
id: 1,
text: 'Categories',
expanded: true,
items: newData
}];
}
}
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
</script>
<style>
.demo-section{
display:flex;
justify-content:space-evenly;
}
</style>
</div>
</body>
</html>Note that GitHubCommits will never come on top of GitHub in a common text sorting. Also note that the code i suggested only works for one level of items, for more levels it will need to be recursive.
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors