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

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

pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081

    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

  • pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

    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)

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081

    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

  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    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

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081
    edited April 6

    @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

  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    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

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081

    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

  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    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

  • pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

    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)

  • LapointeLapointe Posts: 373Questions: 70Answers: 4

    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)

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081
    Answer ✓

    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:

    Kevin

  • pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

    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.

  • pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

    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

  • kthorngrenkthorngren Posts: 13,112Questions: 25Answers: 3,081

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

    Kevin

  • pinakmathkar4pinakmathkar4 Posts: 13Questions: 2Answers: 0

    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

Sign In or Register to comment.