How to get collapsible nested row groups with serverside data, that only loads when opened

xperiencex33

Let's imagine we have customers and we want to group them by their city and their gender.

Currently, I load every customer and then I create the row groups - but I want to achieve the following:

When the dataTable initiates, you just see the row groups for the cities - Tokyo (3), Berlin (7) and Paris (9) for example (but there is no data loaded)

After I open the collapsed row groups Tokyo, I want it to load all the customers from Tokyo - but it could also be in row groups again - in this case, 2 women and 1 man for example.

How could I achieve that, since I can't create row groups without any data to group.

Thank you for every helpful input

kthorngren

This would require a custom solution. First you will need to fetch the group info via jQuery ajax(). The rows displayed by RowGroup are not part of the Datatable data. RowGroup inserts them into the HTML table for display only. Likely you will need to use the draw event to keep the RowGroup information displayed otherwise it will be removed anytime the table is searched, paged or sorted.

You will need to add click events for the group rows. Then fetch the data for the group in the event handler. In the ajax() susccess function use row.add() to populate the Datatable.

The above is probably missing steps needed.

Kevin