JSTree not displaying in container - javascript

I am trying to incorporate a JSTree structure into my javascript project; however, the tree doesn't seem to be displaying/rendering in its parent container. Here is the code that I am using to display the tree:
let tree=this.tree_div.find('#treeDiv');
tree.jstree(
{
"json_data":
{
"data": [
{
"data": "First",
"children": [{"data": "First"},{"data":"Second"},{"data": "Third"}]
},
{
"data": "Second",
"children": [{"data":"First"},{"data":"Second"},{"data": "Third"}]
},
{
"data": "Third",
"children": []
}
],
},
"plugins": ["checkbox","themes", "html_data", "ui"]
}
).bind("select_node.jstree", function(e, data){});
console.log(tree[0]);
In this example, #treeDiv is the div that is contained by the parent container.
In the last line where the value of the tree is printed, the following line comes up in the console:
To my understanding, this implies that the tree is being successfully initialized and set up, but it still isn't displaying on the web page. Any input would be appreciated. Thanks.

The most plausible explanation here would be that you are initializing the tree using the older jsTree API, while using the newer jsTree library.
Old JSON API: https://old.jstree.com/documentation/json_data
New JSON API: https://www.jstree.com/docs/json/
The newer API has a different object structure for populating the tree. Some of the functions and events remain the same, however many other things including the configuration object has changed.
myTree.jstree({ 'core' : {
'data' : [
'Simple root node',
{
'text' : 'Root node 2',
'state' : {
'opened' : true,
'selected' : true
},
'children' : [
{ 'text' : 'Child 1' },
'Child 2'
]
}
]
} });

Related

Angularjs JSON treeview, json format issue

I'm trying to implement a JSON treeview with this plugin
My issue is this line :
$scope.structure = { folders: [
{ name: 'Folder 1', files: [{ name: 'File 1.jpg' }, { name: 'File 2.png' }], folders: [
{ name: 'Subfolder 1', files: [{ name: 'Subfile 1' }] },
{ name: 'Subfolder 2' },
{ name: 'Subfolder 3' }
]},
{ name: 'Folder 2' }
]};
In my case, I'm reading a file that returns me a JSON format
[
{
"item": {
"title": "Kids"
},
"children": [
{
"item": {
"title": "HELLO"
},
"children": []
}
]
}
]
I thought using JSON.parse(myFileContent) should have been enough for having the same data structure as in the $scope.structure but the data isn't displaying, i'm not getting errors.
How can I parse my file content to make it work ?
First, the structure should be an object, since the directive differentiates "folders" from "files". So, considering you already define child elements inside a children property, you could wrap your array (assuming it's called content) into an object like so:
$scope.structure = {
"children": content
};
Then, you'll need to override the default values for the property names in which the directive will try to get the values.
$scope.structureOptions = {
foldersProperty: "children",
displayProperty: "item.title"
};
And last, you add the tree-view-options attribute to the HTML element.
<div tree-view="structure" tree-view-options="structureOptions"></div>

Unable to select rows programatically in drawCallback() of DataTables

I am using the latest datatables with select extension. I am trying to select multiple rows programatically after the table is rendered. I am trying to achieve this in the drawCallback() as below:
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name",
"drawCallback": function( settings ) {
var api = new $.fn.dataTable.Api( settings );
api.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
}
});
But, I am getting an Uncaught TypeError: Cannot read property 'style' of undefined error.
Here is the link for live version - http://live.datatables.net/yemiqafu/2/
P.S: I have used [id='Bradley Greer'] as selector since there is a space in the id. I had to do this for live demo and this is not the reason for the error that is thrown.
SOLUTION
Option drawCallback is not a correct place to perform row selection.
Ideally, you should use initComplete option instead, but there was an issue with Select extension that was fixed 10/7/15 which prevented Select to work in initComplete. Until then you can use the workaround below for HTML sourced data or use nightly build of DataTables and Select extension.
For table with data from HTML source you can select your rows after DataTables initialization.
var table = $('#example').DataTable({
"select": {
"style": 'multi'
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "age" },
{ "data": "start_date" },
{ "data": "salary" }
],
"rowId": "name"
});
table.rows(["[id='Bradley Greer']", "[id='Ashton Cox']"]).select();
DEMO
See this example for code and demonstration of a workaround for table with HTML sourced data.
See this example for code and demonstration of using nightly JS/CSS builds for table with Ajax sourced data. This example could be used for HTML sourced data as well.

Convert XML Data to Json Format AngularJS

I am trying to use Treeview directive from AngularJS. The stored procedure is returning xml.The tree view directive takes json format. The Controller will get the data from service.I am stuck trying to convert xml to json in service.
Following is the xml structure:
<Company Data="New Company">
<Manager Data="Working">
<Employee Data="ABC" />
<Employee Data="DEF" />
<Employee Data="GHI">
<SubEmployee Data="Approval">
<Stuff Data="Financial" />
<Stuff Data="Consol" />
</SubEmployee>
<SubEmployee Data="Rolled-Over">
<Stuff Data="Corporate" />
</SubEmployee>
</Employee>
</Manager>
</Company>
Below is the expected JSON :
[
{
label: "New Company",
id: "Company",
children: [
{
label: "Working",
id: "Manager",
children: [
{
label: "ABC",
id: "Employee",
children: [
]
},
{
label: "DEF",
id: "Employee",
children: [
]
},
{
label: "GHI",
id: "Employee",
children: [
{
label: "Approval",
id: "SubEmployee",
children: [
{
label: "Financial",
id: "Stuff",
children: [
]
},
{
label: "Consol",
id: "Stuff",
children: [
]
}
]
},
{
label: "RolledOver",
id: "SubEmployee",
children: [
{
label: "Corporate",
id: "Stuff",
children: [
]
}
]
}
]
}
]
}
]
You have two choices:
Return the data from the API in the JSON format you require
Convert the XML to JSON in your angular application using javascript.
I would recommend option 1 if that is possible. For option 2 take a look at this question which disucsses XML/JSON conversion in Javascript
"Convert XML to JSON (and back) using Javascript"
If you read the answers on the above link you will see why option 1 is preferable. Converting between these formats can be problematic.
If you have JQuery available in that page you can convert the XML into a DOM object by doing var data = jQuery(data);. Then, use jQuery selectors to extract the data you need out of it.
Some examples:
// Extract an attribute from a node:
$scope.event.isLive = jQuery(data).find('event').attr('state') === 'Live';
// Extract a node's value:
$scope.event.title = jQuery('title', data).text();
A little late but I am also having to look at this option since I will be working with a CMS that only parses into XML. Which at this stage of the game I have no clue why... but I digress.
Found this on D-Zone and it seems to have potential:
https://dzone.com/articles/convert-xml-to-json-in-angular-js
Basically, you make the request to get the XML, then convert it to JSON within another function. Granted you are still pulling XML data but you will be able to work with JSON which will save you a lot of time.
EX from Site (Requires 3rd party Plugin X2JS)
var app = angular.module('httpApp', []);
app.controller('httpController', function ($scope, $http) {
$http.get("Sitemap.xml",
{
transformResponse: function (cnv) {
var x2js = new X2JS();
var aftCnv = x2js.xml_str2json(cnv);
return aftCnv;
}
})
.success(function (response) {
console.log(response);
});
});
One more note, if you are using Angular like me then someone has already created a nice plugin service to use:
https://github.com/johngeorgewright/angular-xml

Programmatically Adding Nodes to a JsTree

I've been doing some troubleshooting and haven't been able to do what I thought would be a fairly simple operation, adding a node to a jstree programmatically. Currently I've been attempting to do this in the simplest way I can imagine:
$('#irrigationClimateStations')
.jstree({
'plugins' : ['themes', 'json_data', 'ui', 'crrm'],
'json_data': {
"data" : [
{
"data" : "A node",
"metadata" : { id : 23 },
"children" : [ "Child 1", "A Child 2" ]
}
]
},
'themes': {
'theme': 'weather'
}
});
The tree is created successfully, but when I attempt to add another node, nothing happens (and I receive no errors from jstree):
var newNode = {
'attr' : { 'id' : this.model.get('id') },
'data': {
'title': this.model.format('station_na'),
'icon': media_url + this.model._iconRootURL + 'weather-station-16x16.png'
}
};
// Add the tree element to the end of the tree
$.jstree._reference('#irrigationClimateStations').create_node("#irrigationClimateStations", "last", newNode);
I haven't been able to decipher the API based on the documentation or the source code> I've also tried creating the node using "Method 2" alluded to in the core documentation:
var parent = $('#irrigationClimateStations').jstree('get_selected');
$('#irrigationClimateStations').jstree("create", parent, "last", newNode, false, false);
Any help? I am running jstree v 1.0-rc3

KendoUI TreeView Dynamic JSON

I'm attempting to use the KendoUI by Telerik and get a treeview to bind to dynamic JSON from a generic handler.
In my generic handler, I'm using Newtonsoft.Json to convert a List to my JSON results, which works just great and even works with a different KendoUI control (charts).
Here is what I have as far as the javascript to build the treeview:
var treeSource = new kendo.data.DataSource({
transport: {
read: {
url: "Services/CategoryHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "GET"
}
}
});
$("#treeview").kendoTreeView({
dataSource: treeSource
});
Here is a shortened example of the returned JSON:
[
{
"text":"Node 1",
"expanded":true,
"items":null
},
{
"text":"Node 2",
"expanded":true,
"items":null
}
]
"items" will be sub collections in the tree.
When I add the items directly to the datasource such as:
var treeview = $("#treeview").kendoTreeView({
dataSource: [
{ text: "Item 1", expanded: true, items: [
{ text: "Item 1.1" },
{ text: "Item 1.2" },
{ text: "Item 1.3" }
] },
{ text: "Item 2", items: [
{ text: "Item 2.1" },
{ text: "Item 2.2" },
{ text: "Item 2.3" }
] },
{ text: "Item 3" }
]
})
It works just fine. It just does not work when I call a service which writes out the JSON, and what I mean by it does not work, is no data shows up, it is blank.
Any thoughts to what I might be missing or guidance to how I can verify my data is even being returned from the service and even filling my DataSource properly?
Thanks
IMPORTANT As November 8th, 2012 KendoUI already supports it.
The Kendo TreeView does not support binding to a data source yet. The good news is that this is in the plans and will be implemented soon (next release).
It works for me with a trick. I am using the dynamic ViewBag with Json serialized at the controller and therefore, nodes are being drawn great.
My issue is that the events don't seem to work ok. For instance I want to catch the onDrop and rise an alert to show the actual values of such node, and instead it displays the text for ALL nodes. This is driving me crazy by the way.
This is my code, hope can help someone.
function onDrop(e) {
alert(treeView.text(e.sourceNode));
}
A Template must be assigned in order to work:
template: "<span rel='#= item.Id #'> #=item.text #</span>",

Categories

Resources