jQuery Fancy Tree with Local Array Data - javascript

I am trying to implement jQuery FancyTree http://wwwendt.de/tech/fancytree/demo/ with local array data
Referred from https://code.google.com/p/fancytree/
This is the code. But it is not working, No Script Error.But Tree is empty!!!
Even i copied the jQuery, UI versions of the file they using in a demo
site. Still nothing works
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
children: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>

I have noticed that source:[] is how you initializes the tree in $("#tabTree").fancytree() initialization call, so your example would be:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.custom.js" type="text/javascript"></script>
<link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
<script src="jquery.fancytree.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#tree").fancytree({
onActivate: function (node) {
// A DynaTreeNode object is passed to the activation handler
// Note: we also get this event, if persistence is on, and the
// age is reloaded.
alert("You activated " + node.data.title);
},
source: [ // Pass an array of nodes.
{title: "Item 1" },
{ title: "Folder 2", isFolder: true,
children: [
{ title: "Sub-item 2.1" },
{ title: "Sub-item 2.2" }
]
},
{ title: "Item 3" }
]
});
});
</script>
</head>
<body>
<div id="tree">
</div>
</body>
</html>
btw, in case you noticed it, the documentation is quite messy, as they are refactoring the code, the documentation is half what's left from dynatree and the new conventions of fancytree. So expect more weird stuff like that :-)

are the Scriptpath right?
Do you download "jquery.js, jquery-ui.custom.js, ui.fancytree.css and jquery.fancytree.js" ?

Related

Get current data (object/json) from Bootstrap-Treeview

I am using Bootstrap-Treeview. I need a tree with checkboxes. And i want to send all tree to the server in treview format when button is pressed. But i can't understand how to extract actual data from treeview.
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
];
$('#tree').treeview({
data: object,
showCheckbox: true,
})
.on('nodeSelected', function (event, data) {
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
console.log('object =' + JSON.stringify(object));
console.log('tree =' + JSON.stringify($('#tree').data('treeview')));
console.log('tree 2 =' + JSON.stringify($('#tree')));
console.log('tree 3 =' + JSON.stringify($('#tree').treeview(true)));
});
};
</script>
</head>
<body>
<div id="tree">twetwe</div>
</body>
</html>
After page loads i check any checkbox and than click on any item, so console.log is called. But there is no info about actual state of all treeview. I need that information about all nodes :
{"text":"Child 2","nodeId":3,"parentId":0,"selectable":true,"state":{"checked":false,"disabled":false,"expanded":false,"selected":true}}
Its not possible to get all the nodes of the tree as such because no public method is available on the treeview object that would give the current state of the whole tree .i.e all the nodes.
However it is possible to extract that data indirectly say by combining outputs of treeview.getCollapsed() and treeview.getExpanded() methods into a single object.
<html xmlns="http://www.w3.org/1999/html">
<head>
<link href="bootstrap-treeview.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="bootstrap-treeview.min.js"></script>
<script>
window.onload = function () {
var object = [
{text: "Parent 1",
nodes: [{text: "Child 1",
nodes: [{text: "Grandchild 1"}]
},
{text: "Child 2"}
]
},
{text: "Parent 2"} ];
$('#tree').treeview({
data: object,
showCheckbox: true,
}).on('nodeSelected', function (event, data) {
console.log( getAllNodes() );
console.log( JSON.stringify(getAllNodes() ));
console.log('node selected = ' + JSON.stringify(event) + '; data = ' + JSON.stringify(data));
});
};
function getAllNodes(){
var treeViewObject = $('#tree').data('treeview'),
allCollapsedNodes = treeViewObject.getCollapsed(),
allExpandedNodes = treeViewObject.getExpanded(),
allNodes = allCollapsedNodes.concat(allExpandedNodes);
return allNodes;
}
</script>
</head>
<body>
<div id="tree">twetwe</div>`enter code here`
</body>
</html>
However please note that the resultant object is not similar in structure to input object that was supplied to treeview as data. Resultant object may be reformatted to construct an object similar to input object.

Extend Kendo Widget in Kendo-AngularJS application

I am trying to get my extended Kendo Widget to work with AngularJS.
With Kendo only my extended widget works fine you will see from the code below, but with Angular it wouldn't.
This is my code:
http://dojo.telerik.com/AbeZO/7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Menu Extended</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.2.805/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script>
(function ($) {
var MyMenu = window.kendo.ui.Menu.extend({
init: function (element, options) {
window.kendo.ui.Menu.fn.init.call(this, element, options);
},
options: {
name: "MyMenu",
},
extendedFunctionality: function() {
return "extended functionality";
}
});
kendo.ui.plugin(MyMenu);
alert('menu extended');
})(jQuery);
</script>
</head>
<body>
<div ng-app="app" ng-controller="MyCtrl">
<p>Telerik Menu with Angular</p>
<ul kendo-menu k-data-source="menuData" k-rebind="menuData"></ul>
<p>My extended Menu with Angular</p>
<ul kendo-my-menu k-data-source="menuData" k-rebind="menuData"></ul>
</div>
<p>My extended menu with Kendo only</p>
<ul id="kendomymenu"></ul>
<script>
$("#kendomymenu").kendoMyMenu({
dataSource: [
{
text: "Item 4",
},
{
text: "Item 5",
},
{
text: "Item 6",
}
],
select: function () {
alert(this.extendedFunctionality());
},
});
angular.module("app", [ "kendo.directives" ]).controller("MyCtrl", function($scope){
$scope.menuData = [
{
text: "Item 1",
},
{
text: "Item 2",
},
{
text: "Item 3",
}
];
})
</script>
</body>
</html>
How to get it to work?
The menu is special cased by widget name and that's why its data source isn't assigned. You better create a custom directive for that:
.directive("kendoMenuDirective", function() {
return {
restrict: "A",
link: function(scope, element, attr) {
var dataSource = scope.$eval(attr.kDataSource);
$(element).kendoMyMenu({
dataSource: dataSource
});
}
};
});
Here is an updated version of your demo: http://dojo.telerik.com/#korchev/uNiDe

Declare is not defined error in DOJO

I am getting the error "Declare is not define error" while opening my application with FireBug. I am using DOJO framework and want to started writing the code. Please help me to find the issue.
define(["dojo/_base/lang",
],
function (lang){
return declare ("app.Sample",{
testM : function test(){
alert('hi');
}
}
);
}
);
<html>
<head>
<link rel="stylesheet" href="src/dijit/themes/claro/claro.css" media="screen">
</head>
<script>
var dojoConfig = {baseUrl:"src" ,packages: [{ name: "dojo",
location: "dojo" },{ name: "dijit", location: "dijit" },{ name: "dojox", location: "dojox" },{ name: "app", location: "app"},],
parseOnLoad: true, useXDomain:true, async: true, debugAtAllCosts: true};
</script>
<script src="src/dojo/dojo.js"></script>
<body>
<script type="text/javascript">
require([
'app/Sample']);
</script>
</body>
</html>
I found this problem. I have to import dojo/_base/declare. That was missing in my code.

uncaught typeerror object object object has no method 'kendoUi' Error in Parsing

This is My JSonSctipt file code:
var data = [
{
"SearchResult": {
"assets": [
{
"agent": "6.1.0",
"id": 1,
"model": "Gateway1",
"modelId": 2,
"name": "Name",
"serialNumber": "Serial01"
},
{
"agent": "M2M",
"id": 2,
"model": "Gateway1",
"modelId": 3,
"name": "Name",
"serialNumber": "Serial02"
}
],
"searchCriteria": {
"paginationEnabled": false,
"rowsPerPage": -1,
"startRow": -1,
"totalAvailableRows": -1,
"alternateId": {
"#xsi.nil": "true"
},
"modelNumber": {
"#xsi.nil": "true"
},
"name": "*",
"serialNumber": {
"#xsi.nil": "true"
}
}
}
}
];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
data: function(rawData) {
return rawData[0].SearchResult.assets;
}
}
}
});
Thsi is My Index.html file
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<script src="kendo/js/kendo.dataviz.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
</body>
</html>
when i run this code uncaught typeerror object object object has no method 'kendoUi' Error I m getting so am Unable to Display data In Grid please tell me how i will fix it or can any one Please tell me how i will Json parsing In Kendo UI
It looks like you are trying to use Kendo Grid, which is a part of Kendo Web, but only have a reference to Kendo Mobile (i.e. kendo.mobile.min.js). You need to add a script reference to either kendo.web.min.js or kendo.all.min.js. Take a look at this jsfiddle, paying particular attention to the External Resource (i.e. kendo.all.min.js)
P.S. SO won't let me post a link to jsfiddle without some code, so here is part of the code again, to satisfy their requirements:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<bo
<div id="grid"></div>
</body>

jQuery Autocomplete > Select > Link

I have this code implemented and I like how straight forward it is because I plan to add ALOT to the Source -- however for the life of me I cannot figure out how to add the selected one as a Link.
EG > Begin Typing > Autofill works > Select > Go to that URL
Current Code:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: ["NYC", "LA", "Philly", "Chitown", "DC", "SF", "Peru"]
});
});
</script>
</head>
<body style="font-size:62.5%;">
<input id="autocomplete" />
</body>
</html>
I found a few discussions about this on here, but none of the code suggestions had worked. How do I add a URL associated with the values above; I'd love if I could keep the same syntax and near the values just add; EG: "peru" www.peru.com
You could add a url property to each object in the source array and then set window.location to that URL when the user selects an item:
$(document).ready(function() {
$("input#autocomplete").autocomplete({
source: [
{ value: "NYC", url: 'http://www.nyc.com' },
{ value: "LA", url: 'http://www.la.com' },
{ value: "Philly", url: 'http://www.philly.com' },
{ value: "Chitown", url: 'http://www.chitown.com' },
{ value: "DC", url: 'http://www.washingtondc.com' },
{ value: "SF", url: 'http://www.sanfran.com' },
{ value: "Peru", url: 'http://www.peru.com' }
],
select: function (event, ui) {
window.location = ui.item.url;
}
});
});

Categories