Dynamic hierarchical header Grid

Hierarchical header is an header column/row that its meaning must be derived from multiple levels. Below is an example of hierarchical headers:

|                     IP Group 1                   |
|        |        |
|   RX       |     TX    |    RX       |     TX    |

Obviously, the meaning of column 1 cannot determined by its immediate header Rx. The meaning is RX of of IP Group 1 (received packets by IP address of IP Group1 ).  For the example above, hierarchical header is easy to implement by merging cell (1, 1) + (1,4), cell(2,1) + cell(2,2), (2,3) + (2,4), (2,3) + (2,4).

Static hierarchical headers is easy to implement as we know exactly what cells to merge.

Dynamic hierarchical headers is much harder as user or event can add/delete at any level.

For example, if a new computer w/ 3 NIC cards added to network, you get a whole new IP Group 2 w/ 3 IPs, each IP has 2 columns, making it 6 columns total. If just an IP got added to IP Group 1, you get 2 more columns. To make the worst, there are combined events such as adding a new group and removing a IP from existing group…

Using positional computation is not practical here.

So I invented Tree-To-Grid layout method.
Using a tree to represent the hierarchical headers for both column and row header (row header can be hierarchical too). All adding/removing  are done logically via the tree. If user wants to add a IP Group, get column root node and add to it. If a event wants to add just an IP to an IP Group, it searches for the IP Group in the tree, then add to it.

How to draw:
– Intialization: Traverse the tree once to get number of columns/rows from tree. To eliminate add/remove column/row frequently, we reset all merge cells; use number of columns/rows obtained previously to initialize the grid.
– Assume that all child node occupies 1 column or row.  Through recursion, we will be able to find out from what cell to what cell a parent node occupies and merge them accordingly.

Issues to consider (not cover here, may be next post):
– Match data with header
– Reverse lookup: cell to header tree node
– …

Dynamic hierarchical header Grid

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s