Hi,
I am trying to explore capabilities on TreeView Layout -
My requirement is to have dropdown capability to column with LOVs from which the user can select a value
For eg :
And Tab index Navigation to traverse/highlightg cell on the TreeView when user presses Tab key on their keyboard similar to keyboard navigation
For eg :
Regards
For a drop-down editor, you’ll need to implement a custom text editor. Please read:
GoJS HTML Interaction -- Northwoods Software
Here’s an example:
Text Editing Examples
That makes use of this extension:
https://gojs.net/latest/extensions/TextEditorSelectBox.js
Which binds the TextBlock.choices property.
I don’t know if you want to make that the default text editor, as that sample does.
By coincidence I just posted an example of how to implement your own tabbing: Simulating hover/focus on element - GoJS - Northwoods Software (nwoods.com) Of course you need to figure out what to do when the user hits the Tab key.
Thank Walter,
I was able to implement the drop-down editor, but is there a way I can change styling on the drop down?
eg: here, I want the dropdown to be the same size (height and width) as the textblock
Additionally, I am trying to add a contextMenu that adds a new row with respect to the existing row.
eg: Here, add child should add a child node to Node - “Folder2”
I am able to get the Node info but not the Link Info of the selected Node as to add a new node wrt it.
Hope you can help me with this
// a context menu is an Adornment with a bunch of buttons in them
var ContextMenu =
$("ContextMenu",
makeButton("Add Child",
(e, obj) => {
var contextmenu = obj.part;
var part = contextmenu.adornedPart;
alert(getInfo(part.data));
})
);
function getInfo(d) {
var str = "Node " + d.key + ": " + d.name + "\n"+ "Link:+ "+ d +"\nfrom " + d.from + " to " + d.to;
return str;
}
Regards
You need to set the style of the select box. See where some of the style is set in the show function of the TextEditorSelectBox?
If you have a Node, there may be zero or one or many Links connected with it. Call one of the methods such as Node.findLinksConnected or Node.findTreeChildrenLinks or perhaps other methods of the Node class.
Hi Walter,
How do I get selected Node or the parent Node Object within the onClick function?
function nodeClicked(e, obj) {
// I am able to get the current (Selected) node info by obj.part.data but not the node object or the parent node
}
Regards
obj.part is the Part, which in your case is a Node.
Use one of the Node methods for finding connected Links or Nodes.
Hi Walter, my requirement is to add a sibling node to the selected node using ContextMenuButton
Here is the logic I have written to add the sibling node as per your suggestion.
But the parentNode is empty - Can you kindly tell me what am I doing wrong here
var count = 333;
function addSiblingNode(e, obj) {
var node = obj.part;
// Here, the parentNode is empty
var parentNode = node.findTreeParentNode();
if (parentNode !== null) {
count = count + 1;
var data = { category: "AddNode", key: count, name: "", icon: "", type: "", date: "" };
var link = { from: parentNode.data.key, to: count }
e.diagram.model.addNodeData(data);
e.diagram.model.addLinkData(link);
}
}
Regards
Your ContextMenuButton code is correct – note how the button is inside an Adornment of the Node, not the adorned Node itself, so you need to get the Adornment.adornedPart to get the Node.
Thanks Walter, that was helpful.
I had another question
Is there a way to freeze columns for TreeView?
For eg:
If I freeze the “Name” Column - the scroll should not scroll the said column (“Name”) and keep it static and scroll over the rest of the columns
After Column Freeze
I found the scrollingTable extension but it is not very similar to my requirement so I am facing difficulty implementing.
Regards
You’ll want to make that second column not-visible by making not-visible each node’s object that goes in the second column. (That goes for the header(s) too, of course.) Whatever code you have for specifying the width of each object for each column will also need to be adapted to skip not-visible columns.
This sounds a little complicated to me -
what I was thinking is maybe if we could have the “Name” column as a separate panel and the rest of the columns as a separate panel, that way maybe we can have the “Name” column static and enable scrollbar over the rest of the columns?
Or is it not possible?
If you started from the Tree View sample, GoJS Tree View, or one derived from that, then you will see that each row corresponds to one Node. Select a Node, and a row is selected. Delete a Node and a row disappears. Reparent a Node and a row moves up or down to be under the new parent Node.
So there’s no easy way to split up pieces of each Node to belong to different Groups or anything like that.
