Jqgrid treegrid node connection lines to show parent child link

Question

I am using Jqgrid Treegrid to display some hierarchical data. I came across two different tree implementations having a feature of showing a parent-child link via some lines connected to nodes. One such implementation is by Jquery Jeasyui library, you can find it here

Second somewhat similar implementation is Tabelizer - here

Now the question is how can we implement this feature in Jqgrid treegrid?

there is a div with class="tree-wrap tree-wrap-ltr" at the beginning of each row, with each level down it has a style="width:18px;" and keeps adding the 18px at each level.

Means level 0  style=width:18px
levle 1  style=width:36px
level 2  style=width:54px

and so on

I was thinking maybe some nifty js loop can go through each div and add some border attribute that can in turn be visible as level connectors. The catch is to check when a node is a last child and when a node below is a sibling to let the multiple lines flow down in parallel.

Any better ideas?

Answer 1

jqGrid uses left property of the div with the icon (or right in case of usage direction: "rtl" option) to place the icon before items of TreeGrid. The width of every level is 18px see the part of code. So I don't see any easy way to implement your requirements.

You can try to place additional <div> or some background-image with corresponding left position to have the look which you need, but it will be not easy. It's clear that one will need to change the icons/image on expanding/collapsing of rows. Unfortunately jqGrid don't provide any additional callbacks/events in case of expanding/collapsing. So one will have to "subclass" the methods. See the answer for the corresponding code example. In any way the implementation of required behavior will be not easy and I don't recommend you to start to do this if the requirement is not really important for your projects.