Hi,
I have been testing GoJS features for a Tree Table functionality.
I was able to achieve some functionalities with TreeView layout.
Few of the features I am looking for is
Keyboard navigation (Tab index - for each cell, an excel like feature to move across rows and columns)
Column Freeze (Excel like feature to freeze a specific column and scroll across other columns)
The challenge I face with the TreeView layout is each row acts as a node, which makes it difficult to seamlessly index through each TextBlock as a ‘different cell’ (see img below) -
And Column Freeze with this layout is not going to work in any direct approach - as discussed
I want to know if these features are possible with GoJS, with any other layout/approach or a custom layout?
If not, any other suggestions to design a Tree Table Layout?
With all of the additional features that you want, it seems that it might be easier to implement everything the same way that a spreadsheet would implement it. Have each cell occupied by a single node. Implement the tree layout yourself by indenting appropriately and showing a button if it’s not a leaf row. Collapsing and expanding subtrees would involve making not-visible or visible all of the cells of the rows in the subtree. Scrolling columns is a matter of controlling the visible status of all nodes in each column.
Based on your suggestion, how do I set up panels that have nodes - as each row cell?
Also can I bind the nodes in each column for column resizing like in a table layout?
I found this example - TreeView Filling Viewport
Based on the example - a row is made up of one Node with multiple text blocks -
Can each row cell be an independent node that acts as a ‘group’ or row?
Resizing of the columns will require implementing a new tool to do that. You can start with the ColumnResizingTool extension. That one works on “Table” Panels, but you will need to adapt it to work on the “Header” Parts and have its resize method modify the corresponding RowColumnDefinition of each “Table” Panel in each Node.
Hi Walter,
The example TreeView Filling Viewport doesn’t really address my issue.
I want each row to be a group of nodes, such that I can add Node properties (such as tooltip, editability, indexing) to each ‘cell’
Using Text blocks instead of nodes limits building a Tree Table layout which I am trying to achieve
The updated sample already demonstrates editability. It is easy to add a toolTip to some or all of the TextBlocks. I’m not sure what you mean by “indexing”.
here in the treeView layout,
the row has three textblocks - If I click on the ‘Date’ textblock on the highlighted node I want to capture the Data date not the whole node data.
Another issue I am facing is to select a particular row on render if it is a child node -
Given isTreeExpanded: false,
If I set select a child node - in this case -File
411
var nodeIndex = 12;
//Index for File 411 const node = nodes.elt(nodeIndex); this.diagram.select(node);
each TextBlock has a click event handler that writes to the console, and if editing, clicking on another TextBlock will finish the current edit and start editing the next one
an HTML button to select a node at random. It will expand what is needed in order to make the node visible, and it scrolls the diagram to make sure the node can be seen
