I am having trouble with the Hierarchical Data Source in conjunction with the TreeView and nesting. The goal is to show a treeview with root items like "employees", "profiles" and sub items being the acutal items. So every root item is using a different data source. This is not working, as the root nodes are not expanding while the data source seems to load perfectly.
Here's the code:
$(document).ready(function() {
var userProfileDataSource = new kendo.data.HierarchicalDataSource( {
transport: {
read: function (options) {
var items = [
{
text: "userprofile 1",
hasChildren: false
},
{
text: "userprofile 2",
hasChildren: false
}
];
options.success(items);
}
}
}),
categories = new kendo.data.HierarchicalDataSource({
transport: {
read: function(options) {
options.success([
{
text: "Employees",
hasChildren: false
},
{
text: "UserProfiles",
children: userProfileDataSource,
hasChildren: true
}
]);
}
}
});
$("#navigation-treeview").kendoTreeView( { dataSource: categories } );
});
JSFiddle
Any ideas?
Related
I want to add another node to the kendotreeview but that would be dynamic unlike the other two being static/Hardcoded.
Here is the code for it:
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
});
var treeview = $("#treeview-left").data("kendoTreeView");
treeview.add(new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: ResolveUrl("/Analysis/GetData/"),
dataType: "jsonp",
}
},
}));
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
How I can proceed with this?
There is a API example that shows how to add nodes to the TreeView.
Kendo TreeView API
I want to bind the Local and Remote Datas to the same Kendo UI Control.
Here I am using Kendo treeview.
Here First 2 nodes are Hardcoded(Local data) and the third needs to from Database(Remote Data).So now how to handle this.
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
So How to bind it using Kendo TreeView ?
You can't have both a local and remote data source on the same element. The best option would be a remote data source only and have it return all of the options you're looking for.
I want to populate the Kendo TreeView in which 2 nodes are local dataSource and the last node should be remote Datasource
Here is my code:
$("#AftermarketTreeView").kendoTreeView({
dataTextField: ["text", "text", "MC_ANALYSIS_NAME"],
dataSource: {
data: [
{
text: "Initiate",
items: [
{ text: "Parts Selection", haschildren: false },
{ text: "Assumptions", haschildren: false },
{ text: "Team", haschildren: false },
]
},
{
text: "Analyze",
items: [
{ text: "Part Attributes", haschildren: false },
{ text: "Aftermarket Evaluation", haschildren: false }
]
},
{
text: "Monto Carlo",
items: [
{ text: "Monto Carlo", haschildren: true }
]
}
],
schema: {
model: {
hasChildren: "items",
children: {
schema: {
data: "items",
model: {
hasChildren: "haschildren",
children: {
schema: {
// override the schema.data setting from the parent
data: function (response) {
return response;
}
},
transport: {
read: {
url: ResolveUrl("/CreateMaintainAnalysis/GetMontoCarloData/"),
dataType: "jsonp",
data:onDataSendAnalysisID,
}
},
}
}
}
}
}
}
}
});
Using above code I am getting structure as below
Where Initiate and Analyze are Local DataSource and Monto Carlo is Remote DataSource but I don't want the node again to be Monto Carlo under it that should be the direct remote DataSource from Database
so help me in this to solve
Thanks in Advance!!!
you can change your read property to a function:
read: function(options) { /* here you can do the ajax call for the remote dataSource and then you can merge the local dataSource with the remote dataSource, you can create a new array to accomplish this. */ }
You can see a example in here.
The idea is to use options.success(result); the result is the merged dataSource (remote and local).
I am trying to create a drag and drop between two tree list both of which is bound to a hierarchicaldatasource.
The drag and dropping is working but I can't get the drop into the right row in the datasource. It appends to the end and that's not what I want. I'm sure it's straightforward but I'm still a newbie with JS and Kendo.
Here is the code. This a prototype of my actual code so I can get the basics. Help is very much appreciated.
$( document ).ready(function() {
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [{
text: "Furniture",
items: [{
text: "Tables & Chairs"
}, {
text: "Sofas"
}, {
text: "Occasional Furniture"
}]
}, {
text: "Decor",
items: [{
text: "Bed Linen"
}, {
text: "Curtains & Blinds"
}, {
text: "Carpets"
}]
}]
});
var newDataSource = new kendo.data.HierarchicalDataSource({
data: [{
text: "Level 1",
items: [{
text: "Level 1a"
}]
}]
});
var treeView2 = $("#treeView2").kendoTreeView({
dragAndDrop: true,
dataSource: newDataSource,
dataTextField: "text",
drop: function (e) {
if (e.valid) {
//Get what row we are on.
console.log("TV2 : Dropped", e.sourceNode);
var item = $("#treeView2").data('kendoTreeView').dataItem(e.sourceNode);
var data = treeView2.data();
data.kendoTreeView.dataSource.add({
text: item.text
});
}
e.preventDefault();
},
dragend: function(e) {
console.log("Drag end", e.sourceNode, e.dropPosition, e.destinationNode);
}
});
$("#treeView1").kendoTreeView({
dragAndDrop: true,
dataSource: inlineDefault,
dataTextField: "text",
drag: function (e) {
if (!$("#treeView1").data('kendoTreeView').dataItem(e.sourceNode).hasChildren) {
e.setStatusClass('k-add');
var selectedRow = treeview.findByText(e.sourceNode.textContent);
$("#treeView1").data("kendoTreeView").remove(selectedRow);
} else {
e.setStatusClass('k-denied');
}
},
drop: function (e) {
if (e.valid) {
var item = $("#treeView1").data('kendoTreeView').dataItem(e.sourceNode);
var data = treeView2.data();
var treeView2DS = $("#treeView2").data("kendoTreeView").dataSource;
var treeView1 = $("#treeView1").data("kendoTreeView");
//get the Data source
treeView2DS.fetch(function(){
var dataItem = treeView2DS.at(0);
console.log(dataItem.text); // displays "Jane Doe"
var dataItemWhichDoesNotExist = treeView2DS.at(3);
console.log(dataItemWhichDoesNotExist); // displays "undefined"
});
debugger;
data.kendoTreeView.dataSource.add({
text: item.text
});
var treeview = $("#treeView1").data("kendoTreeView");
var bar = treeview.findByText(item.text);
treeview.remove(bar);
e.setValid(true);
}
e.preventDefault();
},
});
});
I am doing a project using Kendo UI controls. In project left side "treeview" and right side "kendogrid" are placed.
Here my requirement is to filter the grid based on treeview nodes, and need to do multi-selection.
For example:eg:10249,10248 Based on this nodes filter the grid.
Here is my fiddle: http://jsfiddle.net/RHh67/7/
Here is tried code:
var tree= $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: [{
id: 1, text: "My Project", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "OrderID", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "10248" },
{ id: 4, text: "10249" },
{ id: 5, text: "10250" },
{ id: 6, text: "10251" },
{ id: 7, text: "10252" }
]
}]
}]
}).data("kendoTreeView");
tree.dataSource.bind("change", function (e) {
var ds = $("#grid").data("kendoGrid").dataSource;
ds.filter([
{"logic":"or",
"filters":[
{
"field":"OrderId",
"operator":"eq",
}
]}
]);
});
Can any one help me find where exactly I am wrong?
The handler for change on the tree should do:
Get selected checkboxes.
Build a filter condition for ticked checkboxes.
Apply filter to the DataSource.
Something like:
$("#treeview").on("change", function (e) {
var selected = $('#treeview :checked').closest('li');
var ds = grid.dataSource;
var filter = {
logic : "or",
filters: []
};
$.each(selected, function (idx, elem) {
var item = tree.dataItem(elem);
if (parseInt(item.text)) {
console.log("item.text", item.text);
filter.filters.push({
field : "OrderID",
operator: "eq",
value : parseInt(item.text)
});
}
});
console.log("filter", filter);
ds.filter(filter);
});
Running here