How to sync drill actions across multiple pivot tables

This article explains how to sync drill actions across multiple Pivot Tables

Sync Drill Actions across Multiple Pivot Tables

In certain scenarios, you might have two pivot tables and want to synchronize the expand/collapse actions of a specific field between them. This can be accomplished using the actionComplete event and pivot instances in the Syncfusion EJ2 Pivot Table component.

Here is a step-by-step guide on how to implement this:

1. First, define your two pivot tables in your HTML file. Assign them unique IDs, for example, “PivotView1” and “PivotView2”. Also, set the actionComplete event for the first pivot table to a function, for example, actionComplete.

Index.cshtml

<ejs-pivotview id="PivotView1" height="300" actioncomplete="actionComplete"></ejs-pivotview>
<ejs-pivotview id="PivotView2" height="300"></ejs-pivotview>

2. In your JavaScript file, define the actionComplete function. This function will be triggered whenever an action is completed in the first pivot table.

   function actionComplete(args) {
        const pivotObject1 = document.getElementById("PivotView1").ej2_instances[0];
        const pivotObject2 = document.getElementById("PivotView2").ej2_instances[0];
        if (args.actionName == 'Drill down' || args.actionName == 'Drill up') {           
            for (var i = 0; i < pivotObject1.dataSourceSettings.drilledMembers.length ; i++)
            {
                if (pivotObject1.dataSourceSettings.drilledMembers[i].name === 'Country')
                {
                    if (pivotObject2.dataSourceSettings.drilledMembers.length &gt; 0 &amp;&amp; pivotObject2.dataSourceSettings.drilledMembers[i].name === 'Country')
                    {
                       pivotObject2.dataSourceSettings.drilledMembers[i] = pivotObject1.dataSourceSettings.drilledMembers[i];
                    }
                     else{
                    pivotObject2.dataSourceSettings.drilledMembers.push(pivotObject1.dataSourceSettings.drilledMembers[i])
                    }
                }
            }
        }
        pivotObject2.refreshData();
    }
}

The following steps explain the above code snippet:

1. First, we retrieve the pivot instances of the two pivot tables, such as pivotObject1 and pivotObject2, using HTML id.
2. Then, we check if the completed action is either Drill down or Drill up. If it is, we iterate through the drilledMembers in the dataSourceSettings of the first pivot table.
3. If the members of the Country field are drilled (i.e., France), we update the second pivot table drilledMembers based on the first pivot table drilledMembers.
4. Finally, we use the refreshData method to programmatically refresh the second pivot table with the updated drilledMembers.

The following screenshot, which portrays the results of the code snippet mentioned above,

Sceenshot

View Sample in GitHub

Conclusion:

I hope you enjoyed learning how to sync drill actions across multiple pivot tables.

You can refer to our ASP.NET Core Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our ASP.NET Core Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!