How to pass and retrieve custom data in Pivot Table?

[Simon Soong]

	A	B
Account 1 [linkto="account1_link"]	10	10
Account 2  [linkto="account2_link"]	14	15

dataSource = [
  {account: 'Account 1', name: 'A', value: '10', link: 'account1_link'},
  {account: 'Account 1', name: 'B', value: '10', link: 'account1_link'},
  {account: 'Account 2', name: 'A', value: '14', link: 'account2_link'},
  {account: 'Account 2', name: 'B', value: '15', link: 'account2_link'}
];

I have simple Pivot Table like the above. I would like to make my row headers a hyperlink. What can I do to get "account1_link" in my row header?

Thanks

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Simon,

You can use the enginePopulated event to apply hyperlink to a specific field. Then, based on your requirements. And you can bind the Url link to a certain field using the hyperlinkCellClick event. Please see the code example below.

Code Example:

var pivotObj = new ej.pivotview.PivotView({

enginePopulated: function (args) {

    for (var i = 0; i < args.pivotValues.length; i++) {

      for (

        var j = 0;

        args.pivotValues[i] != null && j < args.pivotValues[i].length;

        j++

      ) {

        if (

          args.pivotValues[i][j] != null &&

          args.pivotValues[i][j].axis == 'row' &&

          args.pivotValues[i][j].actualText !== 'Grand Total'

        ) {

          args.pivotValues[i][0].enableHyperlink = true; // here you can enable the hyperlink to specific field cells

        }

      }

    }

  },

 

  hyperlinkCellClick: (args) => {

    if (args.currentCell.querySelector('a') && args.data.actualText!=="Grand Total") {

      args.currentCell

        .querySelector('a')

        .setAttribute(

          'data-url',

          pivotObj.dataSourceSettings.dataSource[args.data.index[0]]['link']

        );

      args.cancel = false;

    }

  }

});

Meanwhile, we have prepared a sample for your reference.

Sample: https://stackblitz.com/edit/kq1aff-4ifx6w?file=index.js

Please see the below UG document for more information on the “hyperlinkCellClick " event.

Document: https://ej2.syncfusion.com/javascript/documentation/pivotview/hyper-link/#event

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Simon Soong]

Hi, thanks for your reply. However this is not my case. The 'link' can be different for each row rather than hard coded as a string 'link'.

I'm thinking the 'link' for each row would be retrieved from API as dataSource.

Any solution to that?

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Simon,

In the given data source, we have a “link” property that contains unique anchor links for each row displayed in the pivot table.  Please see the screenshot below for more information. While performing hyperlink cell click, the links were connected to the corresponding row headers using the hyperlinkCellClick event. As a result, whenever you click the row headers, your browser will open a specific link. For your convenience, we've included a video link.

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/hyperlink368516127

Screenshot:

Please let us know if you have any concerns.

Regards,

Angelin Faith Sheeba.

[Simon Soong]

Greetings,

Thanks for the solution. This is exactly what I want to achieve.

Regards,

Simon Soong

[AngelinFaithSheeba PaulvannanRajadurai]

Hi Simon,

Please let us know if you have any other queries. We are always happy to assist you.

Regards,

Angelin Faith Sheeba.