I want to show multiple grouping with Column name(row counts) with collapsible plus and minus sign

pinakmathkar4

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

kthorngren

This thread is one of many that discuss collapsing multiple rowGroups.

See this example from this thread to show the plus and minus buttons.

Kevin

pinakmathkar4

I have gone through then thread is one of many that discuss collapsing multiple row Groups. However I want little bit more enhancement in this thread as
rowgroups with CloumnName : group data name (row counts) . Could you pls help me for getting this example

Office : Edinburgh (9)
Position : Developer (1)
The row with Developer position
Position : Junior JavaScript Developer(1)
The row with Junior JavaScript Developer position
Office : London(1)
Chief Eexcutive office (CEO) (1)
The row with Chief Executives office (CEO) (1)

kthorngren

Sorry in my first link I didn't post the thread link just the example.

I'm not sure what you are looking for. The example linked to seems to show what you are asking. Please provide more details of what you are looking for. I suggest using the browser's debugger or console.log statements to trace the collapsedGroups variable to understand how it affects whether a group is collapsed or not. You can change the behavior using this variable.

Kevin

Lapointe

hi @kthorngren

I have a look on your sample here : http://live.datatables.net/jedelezu/26/edit

Is there a way to expand / collapse all groups and show / hide row group header at the same time (using a global flag like bShowGroup and using it into display function ?
Thanks
Bob

kthorngren

@Lapointe

show / hide row group header

I'm not sure what you mean with this. Are you saying you want to hide the rowGroup tr returned with this statement?

            return $('<tr/>')
                .append( '<td class="details-control"></td>')
                .append( '<td colspan="3">'+group+'</td>' )
                .attr('data-name', group)
                .toggleClass('collapsed', collapsed)
                .toggleClass('shown', !collapsed);
            },          

If so then set the tr display to hidden based on your condition.

This code is used to show or hide the rows in the group. You can incorporate a global flag in the conditional:

rows.nodes().each(function (r) {
    r.style.display = collapsed ? 'none' : '';
});

Kevin

Lapointe

Thanks Kevin

http://live.datatables.net/reyeruho/1/edit

Last point I did not solve is the

            if (type === 'display' && bGroupingDisabled) {
              return '';
            }

is only called at table init and do not react on grouping setting... (do not show name if grouping row are displayed for this sample)

Not very important, but...

Hope everything is fine for you

Thanks again

Bob

kthorngren

One option is to use rows().invalidate() to have Datatables update its data cache which will force columns.render to run. There may be other more efficient ways to do this. See the updated example:
http://live.datatables.net/reyeruho/2/edit

Note also I change if (type === 'display' && bGroupingDisabled) to if (type === 'display' && !bGroupingDisabled) otherwise it displays opposite of what you want.

Kevin

Lapointe

hi @kthorngren

Thanks for your answer.

I did use the correct ! bGroupingDisabled (in local test). Thanks

For rows().invalidate(), I think all row is (re)displayed, not ?

I'll have a look for many rows for performance...

Thanks again

pinakmathkar4

Hi team,

I have gone through the "one of many that discuss collapsing multiple row Groups" thread (" http://live.datatables.net/migixiqi/307/edit "). However I want little bit more enhancement in this thread as. I want to print column name before the category name for multiple row groups below is example in below code .What syntax I can write for printing the Column Name as like (Office,Position) in the below code .the column name should be dynamic , it should not be hardcoded .

// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td colspan="8">'+ Column Name + ​':' + group + ' (' + rows.count() + ')</td>')
​.attr('data-name', all)
​.toggleClass('collapsed', collapsed);
​

for e.g. if the level 0 group column is "office" and column categories are "Edinburgh" and "London" and if the Level 1 group column name is "Position" and column categories are "Developer" ,"Junior JavaScript developer", "Chief Executive office (CEO)"
then I want Output should be as Position : Developer (1). It should be like as below

Office : Edinburgh (9)
Position : Developer (1)
The row with Developer position
Position : Junior JavaScript Developer(1)
The row with Junior JavaScript Developer position
Office : London(1)
Position :Chief Executive office (CEO) (1)
The row with Chief Executives office (CEO) (1)

Lapointe

hi @pinakmathkar4

First of all, please format you message... For read it's better

for example ...
Hi team,

I have gone through the "one of many that discuss collapsing multiple row Groups" thread (" http://live.datatables.net/migixiqi/307/edit "). However I want little bit more enhancement in this thread as. I want to print column name before the category name for multiple row groups below is example in below code .What syntax I can write for printing the Column Name as like (Office,Position) in the below code .the column name should be dynamic , it should not be hardcoded .

// Add category name to the <tr>. NOTE: Hardcoded colspan
return $('<tr/>')
.append('<td colspan="8">'+ Column Name + ​':' + group + ' (' + rows.count() + ')</td>')
​.attr('data-name', all)
​.toggleClass('collapsed', collapsed);

For the rest, not easy to understand... like this ?

(Just with sorting columns)

kthorngren

I think I understand now. See the following example:
http://live.datatables.net/migixiqi/366/edit

It uses the following Datatable APIs to retrieve the column name:

• rowGroup().dataSrc()
• column().header()

Kevin

pinakmathkar4

Thank you very much Kevin for understanding my Scenario . The example shared you is work for me. Once again Thank you very much you make my day.

pinakmathkar4

HI Sir ,

Could you please give me example for data-tables with collapsing multiple row Groups" like - "http://live.datatables.net/migixiqi/366/edit " where it show report using postures sql and asp.net core mvc .

Thanks
Pinak

kthorngren

Take a look at sswm's last example from this thread for multiple groups.

Kevin

pinakmathkar4

Hi Sir,

Could provide full source code for data-tables with collapsing multiple row Groups where data retrieved from PostgreSQL db and bind to datagrid using asp.net core mvc

Thanks
pinak

irifco

Hi
Thanks Lapointe for this
but i've got a problem
I want to separate the group name and the child row, then show it in two tables with a common search.
For instance, one table shows the customer list and the other table shows the customer invoice. And find both by searching for a common data

kthorngren

@irifco Are you looking for something like the solution described in this blog?

Kevin