[DOCS #57] Nested Rows with Collapsed Rows and sub rows

Tags: #<Tag:0x00007efc65101c48> #<Tag:0x00007efc65101ab8>
#1

Hello,

based on this example found in this forum -> https://jsfiddle.net/a0tknwo6/

is it possible to have all the nested rows collapsed when expanding the first level ?

attached picture of desired result.

image
image.png850×239 8.5 KB

#2

Hi @martin

we do not have any official API for collapsing yet. And currently, you can only collapse parent rows (top rows) http://jsfiddle.net/4etrvgk1/ (all or defined).

#3

Hello, thank you for the answer.

I was wonder when expanding the parent rows, if it is possible to have all child rows collapsed by default without doing it programatically, collapsing all children when a parent is expanded ?

If there is no such option, how we can achieve that through coding ?
Is there any event before/after collapse ?
And, how to find the children to call collapseChildren ?

Thanks.

#4

nestedRows uses trimRows to hide rows. You can make a call to trimRows to hide the lower rows, but you’d also need to switch the ht_nestingButton lement from + to -. The ht_nestingCollapse class is added when there’s - and if values is + you get ht_nestingExpand class attached.

However, there is no guarantee that it won’t break any other process and has to be tested.

#5

Thank you, will try it out.

#6

Hey, wanted to update, we have added custom hooks to CollapseUI, and the code seems working and no bugs.

beforeToggleExpandChildren:function (row) {
    let collapseUI = this.getPlugin('nestedRows').collapsingUI;
    let rowData = this.runHooks('modifyRowData', this.toPhysicalRow(row));
    rowData && rowData.__children && rowData.__children.forEach(child => collapseUI.collapseChildren(child))
},
#7

Great to hear that. Thank you for the update.