How to expand specific rows

[Ton That Hung]

Hi Syncfusion Team,

I'm using the Pivot Table component: https://stackblitz.com/edit/react-fjqex1?file=index.html,index.js

I want to expand specific rows on the initial load.

Example: Q1> France and Q2 > France

Image:

I've researched your docs and set

drilledMembers: [

{ name: 'Quarter', items: ['Q1', 'Q2'] },

{ name: 'Country', items: ['France'] },

],

but only Q1 and Q2 are expanded, France is not expanded as expected.

How do I config to reach my requirement?

Thank you in advance for your support.

[Rajeshkannah G]

Hi Ton,

You can expand the next level row header, by specifying its level name along with its parent separated by a delimiter. The “delimiter” in the drilled members, which is used to separate between parent and child level to perform the drill up and down. Please look at the following code example.

Code Example

let dataSourceSettings = {

  enableSorting: true,

  drilledMembers: [

    { name: 'Quarter', items: ['Q1', 'Q2'] },

    { name: 'Country', items: ['Q1.France', 'Q2.France'], delimiter: '.' },

  ],

  columns: [

    { name: 'Year' },

    { name: 'Order_Source', caption: 'Order Source' },

  ],

  rows: [{ name: 'Quarter' }, { name: 'Country' }, { name: 'Products' }],

  values: [

    { name: 'In_Stock', caption: 'In Stock' },

    { name: 'Sold', caption: 'Units Sold' },

    { name: 'Amount', caption: 'Sold Amount' },

  ]

}

Output screenshot

Meanwhile , we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/react-fjqex1-utcqri?file=index.html,index.js

Please let us know if you have any queries.

Regards,

Rajeshkannah G

[Ton That Hung]

Thanks for your support.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Thanks for the update. Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.

[Ton That Hung]

Hi Angelin Faith Sheeba, 

I have an advanced request: I want to have an option in the menu called "Expand Up To Here." The function of this option is that when it is clicked, it expands the selected row and all of its children until they can no longer be expanded.

Link sample: https://stackblitz.com/edit/react-fjqex1-czkrct?file=pivot-data%2FPivot_Data.json,index.js

Example: when I right-click and select "Expand Up To Here at "Q1", expand the "Q1" row and all its child rows.

Is it actually feasible to achieve this requirement?

Best regards,

Hung Ton.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Using ContextMenuItems property in the gridSettings, you can customize your own context menu items to the pivot table row headers. In this below code example, we have expanded all the row headers to its end level using context menu option based on your requirement.

Code Example:

function contextMenuClick(args) {

    if (args.item.id === 'expand_all' && args.rowInfo.rowData[0].level == 0) {

      // Get all the members of the clicked row header here.

      var members = Object.keys(pivotObj.engineModule.fieldList[args.rowInfo.target.getAttribute('fieldName')].members);

      // Splice the clicked row header here.

      var index = members.indexOf(args.rowInfo.cell.textContent);

      const splicedMember = members.splice(index, 1);

      pivotObj.dataSourceSettings.expandAll = true;

      // Filter the items that were already in drilled members.

      var arr = members.filter(

        (a) =>

          pivotObj.dataSourceSettings.drilledMembers[0] &&

          !pivotObj.dataSourceSettings.drilledMembers[0].properties.items.includes(a)

      );

      for (var j = 0; j < arr.length; j++) {

        var indexes = members.indexOf(arr[j]);

        const splicedMembers = members.splice(indexes, 1);

      }

      pivotObj.dataSourceSettings.drilledMembers = [

        { name: args.rowInfo.target.getAttribute('fieldName'), items: members },

      ];

      pivotObj.refreshData();

    }

  }

 

<PivotViewComponent

          gridSettings={{

            contextMenuItems: [

              {

                id: 'expandUpToHere', text: 'Expand Up To Here',

                target: 'td.e-rowsheader',

                items: [

                  { text: 'Expand All', id: 'expand_all' }

                ],

              }],

            contextMenuClick: contextMenuClick.bind(this),

          }}

        ></PivotViewComponent>

Output screenshot:

Right click on the row header to display the context menu.

Meanwhile, we have prepared a sample with above information for your reference.

Sample: ​https://stackblitz.com/edit/react-fjqex1-wpv8k4?file=pivot-data%2FPivot_Data.json,index.js

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba

[Ton That Hung]

Hi Angelin Faith Sheeba,

Thanks for your support.

It seems like I didn't describe the concept well enough for you to fully understand the requirements. In your example, only level 0 is applied, which means if I want to expand all children of an item at level 1 (Q1>France) or level 2, level 3 ,..., this algorithm does not meet the requirements.

Example: Expand all at Q1>France

Furthermore, when expanding all at a node, besides expanding itself and all its children, the expanded/collapsed state of other nodes must be maintained.

In your example: after I reload the page, I expand Q2 ==> expand all at Q1, Q1 is expanded all(as expected), but Q3 and Q4 are also expanded(not expected) and Q2 is collapsed(not expected)

Best regards,

Hung Ton

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Thank you for the information. The sample provided in our previous update is solely for expanding level 0 headers with all their children using the context menu option. Based on the query, we believe your requirement is to use the context menu option to expand any header level and all its children. If this is the case, we are looking into possibilities for meeting your requirements. And we will provide further updates within two business days (July 7, 2023).

If your request differs from what we expected, please let us know in detail, preferably with a screenshot illustration. It will allow us to investigate your requirement and provide solution as earlier as possible.

Regards,

Angelin Faith Sheeba.

[Ton That Hung]

Thanks for your update.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Sorry for the delay. We are preparing the samples based on your requirement and we will update the details in two business days (July 11, 2023).

We appreciate your patience until then.

Regards,

Angelin Faith Sheeba.

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Thanks for the patience. We have prepared a sample to expand any level of row headers and their children based on your requirement. Please refer the below sample.

Sample: https://stackblitz.com/edit/react-fjqex1-jfv5jm?file=pivot-data%2FPivot_Data.json,index.js

Regards,

Angelin Faith Sheeba.

[Ton That Hung]

It works very well.

Thanks for your hel

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Ton,

Thanks for the update. Please contact us if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.