Hi,
My requirment is using TreeView Layout, when a User left-clicks on a cell of a row (Node) the particular element must be in focus and editable.
Here is my code snippet -
{
click: function (e, button) {
var node = e.diagram.findNodeForData(button.part.data);
//Doesnot focus on node or Textblock
e.diagram.select(node);
//e.diagram.select(node.elt(3));
e.diagram.commandHandler.editTextBlock(node.elt(3));
}
Each Node has 3 different TextBlocks that have values in the respective columns
I want the ability to capture the particular textblock on click for eg: in the screenshot - I want the value at node.elt(3) to be captured when user clicks on the date cell, and makes it editable
The clicked cell, should on have focus enabled on it.
Currently, if i set selectionAdorned: true, the entire node is in focus on click. My requirement is to focus only on the cell
eg :
Here when the mouse clicks on the Date Cell, the cell is in focus and editable.
I think you are using the wrong term. “Focus” means where keyboard events go, not being colored to attract attention, which often is termed “highlighting”.
The blue rectangle is the default selection adornment: GoJS Selection -- Northwoods Software
There is also support for general highlighting: GoJS Highlighting -- Northwoods Software
You might find this sample interesting: Minimal GoJS Sample
This table is made with tree layout and each row has three textblocks -
onClick (single click) of any textblock the block should be highlighted -
I referred to the shapeClicked function, but selection of only a textblock within a row is not working in case of tree layout.
Once a textblock is selected -on keyboard event - when user presses tab key, the highlight should be on the next textblock
for example - node1.elt(1) - \t --> node1.elt(2) - \t -->node1.elt(3) - \t -->node2.elt(1) .. so on
onClick (single click) of any textblock the block should be highlighted -
On mouse click how to I capture the textblock - node.elt() property?
It will he helpful if you can provide a sample code for the same.
Are you setting the click event handler on each TextBlock? If so, the second argument to the event handler will be that TextBlock.
You will need to customize the text editor. You can see how the built-in one is implemented: extensions/TextEditor.js or extensionsJSM/TextEditor.ts
Note how the text editor handles the Tab key. You can also decide whether to start editing another TextBlock, and if so, which one. I think you’ll want to call CommandHandler.editTextBlockafter everything else has finished editing, so call it in a function passed to setTimeout.
