Hi Team,
I am using file manager and I wanted to sort tree view elements in file manager based on some custom logic. Now by default it is sorting based on name. Is there any way to implement custom sorting?
Hi All,
I need to create a dropdownlist & kendoTreeList inside a kendo grid even though the grid is not set to edit mode.
User should be able to select the value from the dropdown list & the kendo Treelist.
kindly give me the approach to implement this.
please share me the links of any examples .
Thanks in advance. :)
I was configuration a directory in a directory by used File Manager.
After that whenever click the sub directory, parent directory move to left (created 'k-treeview-toggle').
What's that?
DEMO: multiple click the 'folder2'
Hello,
I'm my angular app I'm trying to achieve drag and drop from treeview to grid.
I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.
Is this possible?
Thanks in advance
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. 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"}
This is solved and doesn't need to be answered. I just put it here in case someone runs into the same problem.
A treeview item says it has children altough there are no children by using "hasChildren":
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title>Title</title>
<script src=
"https://code.jquery.com/jquery-3.2.1.min.js"
integrity=
"sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin=
"anonymous"
></script>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.blueopal.min.css"
/>
<script src=
"http://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"
></script>
<script src=
"http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"
></script>
</head>
<script>
$(document).ready(
function
() {
// Bind dropdownlist
$(
"#mytree"
).kendoTreeView({
animation:
false
,
dataSource: [
{
'id'
:
'1'
,
'text'
:
'One child entry'
,
'expanded'
:
'true'
,
"items"
: [ {
'id'
:
"2"
,
'text'
:
"No child entry"
,
"items"
: []} ] }
],
select:
function
(e) {
var
treeItem =
this
.dataItem(e.node);
if
(treeItem.hasChildren) { alert (
"Entry has children"
); }
else
{ alert (
"Entry has no children"
); }
}
});
});
</script>
<body>
<div id=
"mytree"
style=
"clear: both;"
></div>
</body>
</html>
You can run this code and click on the treeview entry "No child entry". It will tell you it has children! Why? The problem is on the predefinition in the datasource: ... ,"items": []
Remove that and it will work fine. I thought the Treeview Widget would take that over or replace it. But since it outputs wrong result, don't use it that way.
I need some help using a hierarchicalDataSource with a treeview control. It works fine as an array but I can't figure out how to make it work with a datasource.
Essentially my datasource is a two level structure.
date:
eventId:
Here are two different datasources in my app.js file.
window.calendarData = new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: "https://...",
dataType: "json"
}
},
schema: {
model: {
id: "eventId",
hasChildren: "items",
fields: {
eventId: {
editable: false
},
date: {
editable: true
},
items: {
model: {
id: "eventId",
fields: {
eventId: {
editable:false
},
lastname: {
type: "string",
editable: true
}
}
}
}
}
}
}
});
window.calendarDataLocal = new kendo.data.HierarchicalDataSource({
data: [
{
eventId: 0,
date: '2015-08-01',
items: [
{
eventId: 1,
lastname: "poulin",
},
{
eventId: 2,
lastname: "smith",
}
]
},
{
eventId: 3,
date: '2015-08-02',
items: [
{
eventId: 4,
lastname: "jones"
}
]
}
]
});
Here is the control I'm putting it into.
<div id="mainCalendar">
</div>
<script>
$(document).ready(function () {
$("#mainCalendar").kendoTreeView({
dataSource: window.calendarData,
dataTextField: ["date", "lastname"]
})
});
</script>
If I use window.calendarDataLocal, it works, the other way what happens is the two main nodes (identified by date) show up but the lower level items show up as undefined.
Essentially my data is made up
​
<
style
>
.k-treeview .k-checkbox { opacity: 1; width: auto; }
</
style
>
ktvGradeLevelFilter = $("#gradeLevelFilterTree").kendoTreeView({
dataTextField: ["text", "GradeLevelID"],
dataSource: {
transport: {
read: function (options) {
$.getJSON(Helpers.toServicesUrl("/GetfltEWSGradeLevel"),
{
username: Context.UserName,
districtId: Context.DistrictId,
// schoolType: "H"
schoolType: schoolTypeParm //ktvSchoolFilter.getSelectedSchoolType()
},
function (data) {
gradeLevelData = data.GetfltEWSGradeLevelResult.RootResults;
gradeLevelData = [{
text: "Grade Level(Counts by Risk Factor)",
items: gradeLevelData,
expanded: false
}];
options.success([]);
ktvGradeLevelFilter.dataSource.data(gradeLevelData);
}).fail(function (jqXHR) {
options.error(jqXHR);
});
}
},
schema: {
model: {
children: "items"
}
}
},
checkboxes: {
checkChildren: true
}
}).data("kendoTreeView");