javascript - Jqgrid treegrid node connection lines to show parent child link -

javascript - Jqgrid treegrid node connection lines to show parent child link -

i using jqgrid treegrid display hierarchical data. came across 2 different tree implementations having feature of showing parent-child link via lines connected nodes. 1 such implementation jquery jeasyui library, can find here

second similar implementation tabelizer - here

now question how can implement feature in jqgrid treegrid?

there div class="tree-wrap tree-wrap-ltr" @ origin of each row, each level downwards has style="width:18px;" , keeps adding 18px @ each level.

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

and on

i thinking maybe nifty js loop can go through each div , add together border attribute can in turn visible level connectors. grab check when node lastly kid , when node below sibling allow multiple lines flow downwards in parallel.

any improve ideas?

jqgrid uses left property of div icon (or right in case of usage direction: "rtl" option) place icon before items of treegrid. width of every level 18px see the part of code. don't see easy way implement requirements.

you can seek place additional <div> or background-image corresponding left position have need, not easy. it's clear 1 need alter icons/image on expanding/collapsing of rows. unfortunately jqgrid don't provide additional callbacks/events in case of expanding/collapsing. 1 have "subclass" methods. see the answer corresponding code example. in way implementation of required behavior not easy , don't recommend start if requirement not of import projects.

javascript jquery jqgrid treegrid