different tree view icons and enable/disable checkboxes in jstree - javascript

I need to change the tree view icons and enable/disable checkboxes
please view the code below :
function LoadJSTree() {
$.noConflict();
$(function () {
$('#demoTree').jstree({
'checkbox': {
'keep_selected_style': false,
'two_state': true
},
"types": {
"#": {
"max_children": 1,
"max_depth": 4,
"valid_children": ["root"]
},
"root": {
"icon": "/static/3.1.1/assets/images/tree_icon.png",
"valid_children": ["default"],
"check_node": false,
},
"default": {
"valid_children": ["default", "file"],
"check_node": true,
"uncheck_node": true
},
"disabled":{
"check_node": false,
"uncheck_node": false
},
"file": {
"icon": "glyphicon glyphicon-file",
"valid_children": [],
"check_node": true,
"uncheck_node": true
}
},
"plugins": ["types"],
'core': {
'data': [
{
"text": "Root node", "type": "root", "parent":"#", "children": [
{ "text": "Child node 1", "type": "default" },
{ "text": "Child node 2", "type": "default" },
{ "text": "Child node 3", "type": "default" },
{ "text": "Child node 4", "type": "default" },
{ "text": "Child node 5", "type": "default" },
{ "text": "Child node 6", "type": "default" },
{ "text": "Child node 7", "type": "default" },
{ "text": "Child node 8", "type": "default" }
]
}
],
},
'plugins': ["checkbox"]
});
It doesn't seem to work.
The tree is displayed using same folder icons for every node and check box always present for every node, shouldn't it come disabled for "root" node?
Could you please let me know what's wrong?

You have listed plugins twice in your config:
"plugins": ["types"],
...
'plugins': ["checkbox"]
Change that to a single entry:
"plugins": ["checkbox", "types"]
However keep in mind there is no option (in v.3, if that is the version you are using) to prevent actions based on the type of the node. But using the most recent jsTree commit you can disable checkboxes on a per node basis using the state property of the node (you can also disable the whole node) - if that is what you need have a look here:
jsTree disable some of the checkboxes

Related

.openDialog() method doesnt load page in TFS 2017

I have a button on 2017 TFS work item form. It should open a dialog.
I used this Microsoft documentation (https://learn.microsoft.com/en-us/vsts/extend/develop/using-host-dialog) and made the following code:
$(us_button[0]).click(function(){
VSS.getService(VSS.ServiceIds.Dialog).then(function(dialogService) {
var extensionCtx = VSS.getExtensionContext();
// Build absolute contribution ID for dialogContent
var contributionId = extensionCtx.publisherId + "." + extensionCtx.extensionId + ".info";
// Show dialog
var dialogOptions = {
title: "My Dialog",
width: 800,
height: 600
};
dialogService.openDialog(contributionId, dialogOptions);
});
});
I also added an info element in manifest as Microsoft’s guide suggests.
It does open a window, but never loads the page info.html.
The only thing debug says is (no stack) null.
Manifest file:
{
"manifestVersion": 1,
"id": "usButton",
"version": "1.0.56",
"name": "usButton",
"publisher": "Logrocon",
"icons": {
"default": "img/logo.png"
},
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"tags": [
"Work Item",
"Work Item control"
],
"files": [
{
"path": "img",
"addressable": true
},
{
"path": "dist",
"addressable": true
},
{
"path": "scripts/main.js",
"contentType": "text/javascript",
"addressable": true
},
{
"path": "info.html",
"addressable": true
},
{
"path": "usButton.html",
"addressable": true
}
],
"categories": [
"Plan and track"
],
"scopes": [
"vso.work_write"
],
"contributions": [
{
"id": "usButton",
"type": "ms.vss-work-web.work-item-form-control",
"targets": [
"ms.vss-work-web.work-item-form"
],
"properties": {
"name": "usButton",
"uri": "usButton.html",
"height": 40,
"inputs": [
{
"id": "FieldAppTestBtn",
"description": "Autocalculate Remaining Work.",
"type": "WorkItemField",
"properties": {
"workItemFieldTypes": ["Double"]
},
"validation": {
"dataType": "String",
"isRequired": true
}
}
]
}
},
{
"id": "info",
"targets": [],
"description": "The content to be displayed in the dialog",
"type": "ms.vss-web.control",
"properties": {
"uri": "info.html"
}
}
]
}
You didn't import the extension SDK and run VSS.init() method in the info.html. Update it to below and then try again:
<!DOCTYPE html>
<html style="background-color:inherit;height:100%;">
<head>
<title>Continious delivery actions</title>
<script src="dist/VSS.SDK.min.js"></script>
</head>
<body style="background-color:inherit;height:100%;">
<div><table><tr><td>ID</td><td>Поле</td><td>Значение</td></tr></table></div>
<script>
VSS.init();
</script>
</body>
</html>

How do I join multiple columns into one in footable?

I have a FooTable that gets a part number returned as 3 separate cells. I'd like to combine them into one cell but I'm unsure of how the formatter and parser work for FooTable. my table html is just an empty table, everything is handledin the javascript. How would I go about doing this?
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{"formatter": function(value){
return //I'm thinking this is where the code would go to join the next 3 columns? in the format ##.###.##
}},
{ "name": "PartCategory", "title": "PC" },
{ "name": "PartNumber1", "title": "PN1" },
{ "name": "PartNumber2", "title": "PN2", },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});
You can simply add data-hide="all" to the first two columns of those three:
{ "name": "", "title": "", data-hide="all"},
{ "name": "", "title": "", data-hide="all"},
{ "name": "Part Info", "title": "Part Information" }
Merge those in php (which you are good at) and just show them in here as one col in your dataset and Voila.
The simpler version if you can change the dataset is to not add those columns at all.
Another option if you cannot/don't want to change your server side code is to get the data and change it js and then bind them to rows afterwards.
var rows = $.getJSON("../dist/scripts/testGetParts.php");
foreach(row in rows) {
//merge those cols here in the third one
}
And then:
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "name": "PartCategory", "title": "PC", data-hide="all" },
{ "name": "PartNumber1", "title": "PN1", data-hide="all"},
{ "name": "Part Info", "title": "Part information" },
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": rows
});
});
Not sure how you do it persay in footable, in kendo you would do it like so.
$(document).ready(function() {
jQuery(function($){
$('.table').footable({
"expandFirst": false,
"columns": [
{ "name": "PartID", "title":"PartID", "visible":false },
{ "title":"PartNumber", formatter: function(data){
return data.PartCategory +"."+ data.PartNumber1 +"." + PartNumber2;
}},
{ "name": "PartName", "title": "Name", },
{ "name": "DescShort", "title": "Description", },
{ "name": "SupplierName", "title": "Supplier", },
{ "name": "SupplierPartNumber", "title": "Supplier Part #", }
],
"rows": $.getJSON("../dist/scripts/testGetParts.php")
});
});
});

Mobx observable deep object

I looking for best solution how to implement #observable on deep json object structure (for example a tree) data tree could be go really deep. and each node has many properties, but I need to observe only one property in tree node. Simply if I do
#observable questionnaire = {}
it works, but i think that is waist. I need observe only 'selected' property.
Here is json structure. Please correct me if i'm wrong here is questionnaire object simplified.
[
{
"id": "1",
"title": "level 1",
"description": "text",
"type": "Question",
"selected": false,
"childNodes": [
{
"title": "level 2",
"description": "text",
"type": "Question",
"selected": false,
"childNodes": [
{
"title": "level 3",
"description": null,
"type": "Question",
"selected": false,
"childNodes": [
{
"title": "level 4 1",
"childNodes": [],
"description": null,
"type": "Checkbox",
"selected": false
},
{
"title": "level 4 2",
"childNodes": [],
"description": null,
"type": "Checkbox",
"selected": false
},
{
"title": "level 4 3",
"childNodes": [],
"description": null,
"type": "Checkbox",
"selected": false
},
...
]
}, ...
One way is to have a Node class implemented as follows:
class Node {
#observable selected = false;
#observable childNodes = asFlat([]);
constructor(data) {
// Recursively create `Node` objects for all children.
data.childNodes = data.childNodes.map(child => new Node(child));
Object.assign(this, data);
}
}
Then you create a Node object from your top-level json object: new Node(json).
This solution will only observe selected and childNodes. It's not ideal because you need to wrap your json object in Node objects. But I can't think of any other way to do it.

Disable Multiple Selection in JSTree is not working

I am using JSTree in my application with following code.
this.CreateTreeView = function () {
$('#jstree_demo_div').jstree({
'core': {
'multiple': false,
'data': [
{ "id": "ajson1", "parent": "#", "text": "Simple root node" },
{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
]
}
});
}
As shown in my code i am trying to disable multiple selection.
Now when i use following code to select node.
$("#jstree_demo_div").jstree().select_node("ajson3");
$("#jstree_demo_div").jstree().select_node("ajson4");
Still it select both node. So it becomes like multiple selection from Javascript.
I am putting this question just to confirm that is it correct working of JSTree?
I know that i can deselect all node before selecting any node using deselect_all function.
But according to me if multiple selection is set to false then selecting node from javascript also should select only one node.
Please correct me if i am wrong.
select_node will select a node regardless of the multiple setting.
The setting only limits user interaction, select_node is a lower level method and will not be limited, so you (the developer) can modify the selection programmatically without limitation.
If you want to use the same function that is triggered by user interaction (and is therefore limited by multiple) use activate_node.
just use this configuration
this.CreateTreeView = function () {
**"plugins" : [
"checkbox",
],**
$('#jstree_demo_div').jstree({
'core': {
**'multiple': false,**
'data': [
{ "id": "ajson1", "parent": "#", "text": "Simple root node" },
{ "id": "ajson2", "parent": "#", "text": "Root node 2" },
{ "id": "ajson3", "parent": "ajson2", "text": "Child 1" },
{ "id": "ajson4", "parent": "ajson2", "text": "Child 2" },
]
},
**'checkbox' : {
'deselect_all': true,
'three_state' : false,
}**
}); }
'checkbox' : {
'deselect_all': true,
'three_state' : false,
}
works fine!
To Disable checkbox multi-select in JStree this code also work perfectly :
var tmp=null; /// to prevent recursion
treeobj.on("check_node.jstree uncheck_node.jstree", function(e, data) {
if(tmp!=data.node.id){
tmp=data.node.id;
treeobj.jstree("uncheck_all", null);
treeobj.jstree("check_node",data.node.id);
}
})

jQuery.Dunatree.How to load JSON tree using AJAX?

I'm using jQuery.dynatree plugin, how to load JSON formatted data using AJAX?
I do all as said in documentation:
<script>
$(function() {
$( "#Tree" ).dynatree({
title:"Thetree",
imagePath:'/jquery/css/',
selectMode:1,
initAjax:{
url:"http://127.0.0.1:2013/jsfolderstree"
}
});
});
</script>
The JS scripts is correctly connected to the HTML page, witout errors.
The requested URL by AJAX returns valid JSON:
[{
"key": "0x55638DB3",
"children": [
{
"key": "0x5D43E57C",
"children": [
{
"key": "0x70A4C1CE",
"children": [
{
"key": "0x799E9590",
"children": [],
"expand": true,
"tooltip": "This is group 5",
"isFolder": true,
"title": "Group 5"
},{
"key": "0x78C952A8",
"children": [],
"expand": true,
"tooltip": "This is group 6",
"isFolder": true,
"title": "Group 6"
}],
"expand": true,
"tooltip": "This is group 3",
"isFolder": true,
"title": "Group 3"
}],
"expand": true,
"tooltip": "This is group 1",
"isFolder": true,
"title": "Group 1"
},{
"key": "0x45B98999",
"children": [
{
"key": "0x6C829354",
"children": [],
"expand": true,
"tooltip": "This is group 4",
"isFolder": true,
"title": "Group 4"
}],
"expand": true,
"tooltip": "This is group 2",
"isFolder": true,
"title": "Group 2"
},{
"key": "0x47BE4570",
"children": [],
"expand": true,
"tooltip": "This is group 7",
"isFolder": true,
"title": "Group 7"
}],
"expand": true,
"tooltip": "Main level of tree",
"isFolder": true,
"title": "Root"
}]
But in result I have message "Loading Error" amd nothing more...
Where is my mistake?
I need load some JSON tree to the web-page, the tree must have methods to get selected node, and visual selection by mouse, that is that I need. Maybe need to use more simple plugins?
Thanks!
If you using jQuery ajax to load a JSON data,jQuery will resolve JSON data by JSON.parse method.
So don't put your JSON data in [], it will call parse error in jQuery ajax method.
{
"key": "0x55638DB3",
"children": [{...}]
....
}

Categories

Resources