My fancytree looks like the following. It is running but i want to add some features, first page load all checkbox is selected and all tree opened. How can i do it?
$("#definition-tree").fancytree({
checkbox: true,
selectMode: 3,
icons: false,
source: convertData(#Html.Raw(ViewBag.ResumeSettingDefinitions)),
select: function (event, data) {
var selNodes = data.tree.getSelectedNodes();
var selKeys = $.map(selNodes,
function (node) {
return parseInt(node.key);
});
selectedResumeSettingDefinitionsId = selKeys;
},
click: function (event, data) {
if ($.ui.fancytree.getEventTargetType(event.originalEvent) == "title") {
data.node.toggleExpanded();
data.node.render();
}
},
keydown: function (event, data) {
if (event.which === 32) {
data.node.toggleSelected();
return false;
}
}
});
I've found two ways to expand all tree nodes. To select all nodes I've found only one.
In my answer I'll be using the code from your jsfiddle-link.
OPTION 1
Use expanded:true on a per-node-basis during initialization, meaning you'd have to add that option to every node that is expandable:
$(function(){
$("#tree").fancytree({
checkbox: true,
source: [
{title:"Node 1"},
{title:"Node 2"},
{title:"Folder 3", folder:true, expanded:true, children: [
{title:"Node 3.1"},
{title:"Node 3.2"}
]},
{title:"Folder 2", folder:true}
]
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<div id="tree"></div>
In theory this would have my preference, because you wouldn't need an extra function to accomplish your goal. The downside of this is of course that you would have to add the option for every expandable node, and since I haven't found an option to select all nodes during initialization, you would still need an extra function for that anyway.
So with that in mind, my practical preference goes to option 2.
OPTION 2
Use an extra function after initialization, to both expand and select all nodes in the tree:
$("#tree").fancytree("getTree").visit(function(node) {
node.setExpanded(true);
node.setSelected(true);
});
$(function(){
$("#tree").fancytree({
checkbox: true,
source: [
{title:"Node 1"},
{title:"Node 2"},
{title:"Folder 3", folder:true, children: [
{title:"Node 3.1"},
{title:"Node 3.2"}
]},
{title:"Folder 2", folder:true}
]
});
$("#tree").fancytree("getTree").visit(function(node) {
node.setExpanded(true);
node.setSelected(true);
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.fancytree/2.27.0/skin-win8/ui.fancytree.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.fancytree/dist/jquery.fancytree-all-deps.min.js"></script>
<div id="tree"></div>
jsfiddle: http://jsfiddle.net/sturLzes/
Sources:
https://github.com/mar10/fancytree
http://wwwendt.de/tech/fancytree/doc/jsdoc/
http://wwwendt.de/tech/fancytree/demo/sample-api.html
http://wwwendt.de/tech/fancytree/demo/sample-select.html
Related
Need help here. I create a simple demo here and what I want to achieve from dataBound if checked='yes' node is selected and disable(apply k-state-disable) from edit. I try to set (selected,true) & (disabled,true) but seem it not working.
DEMO IN DOJO
<select id="multiselect"></select>
$("#multiselect").kendoMultiSelect({
dataSource: {
data: [
{id:1, Name: "John 1", checked: 'no'},
{id:2, Name: "John 2", checked: 'yes'},
{id:3, Name: "John 3", checked: 'no'},
{id:4, Name: "John 4", checked: 'yes'},
{id:5, Name: "John 5", checked: 'no'},
{id:6, Name: "John 6", checked: 'no'}
]
},
dataTextField: "Name",
dataValueField: "id",
dataBound: function(e) {
var multiselect = $("#multiselect").data("kendoMultiSelect");
var x = multiselect.dataSource.view();
for (var i = 0; i < x.length; i++) {
if (x[i].checked == "yes") {
//x[i].set("selected", true);
//x[i].set("disabled ", true);
//x[i].prop("disabled", true).addClass("k-state-disabled");
}
}
},
});
I want to suggest another way for achieve that. Avoid changing DOM in dataBound whenever possible. So I would like to suggest using itemTemplate option and select event:
You can apply .k-state-disabled class within the itemTemplate option:
itemTemplate: '<span # if (data.checked === "yes") { #class="k-state-disabled"# } #>#: Name #</span>'
That will make the option look like disabled. But it is still possible to select it in the list, so you can use select event to prevent that:
select: function(e) {
if (e.dataItem.checked === 'yes') {
e.preventDefault();
}
},
Using e.preventDefault() inside that event will prevent user from selecting the option which matches the condition.
Updated Demo
You need to handle select and deselect events:
function onDeselect(e) {
if (e.dataItem.checked == 'yes') {
e.preventDefault();
}
}
function onSelect(e) {
if(e.dataItem.checked == 'yes') {
e.preventDefault();
}
};
$("#multiselect").kendoMultiSelect({
select: onSelect,
deselect: onDeselect,
//...
});
working demo
I am using fancytree with sortable extensions and I found 2 problems which I am trying to fight for hours. Maybe someone might help me.
The goal is to be able to sort between elements in the same nest level, but now I am only able to sort root nodes.
Second think is more important and I have no idea why it works like that. When I am trying to get fancytree nodes (of course i would like to get them in current sorted order), all the time I get same order without relying on view display.
I am using these event to get nodes: $('#tree').fancytree("getTree").toDict()
html:
<div id="tree"></div>
Javascript:
$(function() { // on page load
$("#tree").fancytree({
debugLevel: 0,
selectMode: 1,
extensions: ["dnd"],
source: [{
title: "Node 1",
key: "1",
"baloney": 44
},
{
title: "Node 2",
key: "2432"
},
{
title: "Folder 2",
key: "2",
folder: true,
children: [{
title: "Node 2.1",
key: "3",
myOwnAttr: "abc"
},
{
title: "Node 2.2",
key: "4"
},
{
title: "Node 2.3",
key: "5"
}, {
title: "Node 2.4",
key: "6"
}, {
title: "Node 2.5",
key: "7"
}
]
}
],
dnd5: {
preventForeignNodes: true,
preventRecursiveMoves: true, // Prevent dropping nodes on own descendants
preventVoidMoves: true, // Prevent dropping nodes 'before self', etc.
dragStart: function(node, data) {
return true;
},
dragEnter: function(node, data) {
return true;
},
dragDrop: function(node, data) {
data.otherNode.moveTo(node, data.hitMode);
},
activate: function(event, data) {
},
draggable: {
appendTo: "body",
connectToSortable: '#tree > ul',
containment: "parent",
revert: "invalid"
}
},
});
$('#tree > ul').sortable({
connectWith:"#fancytree",
out: function(event, ui) {
if (event.originalEvent.type === "mousemove") {
$(ui.item).data('drugout', true);
}
}
});
});
And here is fiddle link: Link
You need to add sortable to the child nodes also. Add the below code to fancytree initialization. This function basically observes child node expands and then activates sortable for the child nodes.
expand: function() {
$('.fancytree-has-children').siblings().sortable();
},
I have updated the jsfiddle also. Check the link: https://jsfiddle.net/3zmLfe1h/11/
Answer to your 2nd Question: I am not sure about it but I guess maybe fancytree is saving the order in some way and returning it to you whenever you are trying to get it. You can get all the values using jQuery and Sortable though.
I have a Kendo TreeList. The collapse event is bound to an onCollapse() method, the expand event is bound to an onExpand() method.
In words: the first column consists of levels. The default level is 0 and is expanded as default and shows (all of it's children) all rows of level 1. When expanding a level 1 row, its children (level 2) are shown. At the same time, the column has to stretch a bit (to show the next level number). When expanding another level 1 row, the column does not need to stretch but when a row of level 2 is expanded, the first column has to stretch again for showing level 3 and so on.
Therefore, I use treeList.autoFitColumn(0). This causes an auto fit after every second expand whenever I expand rows of same level (that is not what I expect because expanding same level means the column did grow after the first expand but not after the second expand.
An alternative could be changing the width manually, but I cannot find something like treeList.columns[0].setWidth(x).
The behavior you are seeing is happening because the collapse and expand events are firing before the width of the content has actually changed.
What you can do to circumvent this is to "delay" the auto-fit until after the current code finished running. You do this by using setTimeout with a 0 timeout. This places the execution of the function inside the setTimeout at the end of the execution queue.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.911/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.911/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
resizable: true,
columns: [
{ field: "Name" },
{ field: "Text" }
],
dataSource: [
{ id: 1, Name: "Name 1", Text: "Sample text 1", parentId: null },
{ id: 2, Name: "Name 2", Text: "Sample text 2", parentId: null },
{ id: 3, Name: "Name 3", Text: "Sample text 3", parentId: 1 },
{ id: 4, Name: "Very long name 4", Text: "Sample text 4", parentId: 2 }
],
expand: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
},
collapse: function(e) {
setTimeout(() => treeList.autoFitColumn(0), 0);
}
});
var treeList = $("#treeList").data("kendoTreeList");
treeList.autoFitColumn(0);
</script>
</body>
</html>
I use Webix 2.5.14. There was a problem with a component Richselect.
In this form there is a richselect with options.
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
....
]
});
I click on the button and opens a form for editing, and I need to select an element in the richselect area, for example with id = 3.
How to do it? setValue () adds a new one (element), but doesn't select what i need.
You need to use
$$("rule").setValue(3); // 3 - id of record
It is a bit counterintuitive, but you need to use the "id" of record in the setValue command, not the value.
See my example:
webix.ui({
view: "form",
id:"addAccessForm",
borderless: true,
elements: [
{
view: "richselect",
id:"rule",
label: 'Rule',
value:1,
options:[
{id:1,value:"R"},
{id:2,value:"W"},
{id:3,value:"RW"},
{id:4,value:"RW+"}
]
},
{ view:"button", value: "Select Value", click:function(){
$$("rule").setValue(2);
}}
]
});
or if you prefer http://webix.com/snippet/5df7e1b1
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" ?