Hyperlink in ASP.NET Core Pivot Table

28 Aug 202624 minutes to read

The Pivot Table component provides built-in support for displaying hyperlinks within individual cells. This feature allows users to link data in specific cells, enhancing interactivity and navigation. Common use cases include linking a value cell to a related detail report, opening an external resource from a row header, or highlighting summary cells that match a business rule.

Hyperlinks can be selectively enabled for various cell types, including:

• Row headers
• Column headers
• Value cells
• Summary cells

You can control hyperlink behavior using the e-hyperlinkSettings property, which can be defined during the initial rendering through the code-behind.

Available hyperlink settings

The following properties are available in HyperlinkSettings. Each property is optional; combine them to control which cells display hyperlinks.

Property	Type	Default	Description
ShowHyperlink	boolean	false	Shows or hides hyperlinks in all cells.
ShowRowHeaderHyperlink	boolean	false	Shows or hides hyperlinks in row headers.
ShowColumnHeaderHyperlink	boolean	false	Shows or hides hyperlinks in column headers.
ShowValueCellHyperlink	boolean	false	Shows or hides hyperlinks in value cells.
ShowSummaryCellHyperlink	boolean	false	Shows or hides hyperlinks in summary cells.
HeaderText	string	''	Shows hyperlinks for cells whose header text matches the specified value.
ConditionalSettings	Condition	Condition.NotEquals	Shows hyperlinks for cells whose values match the specified conditions.
cssClass	string	''	Applies a custom CSS class to hyperlink elements for user-defined styling.

By default, the hyperlink options are disabled for all cells in the pivot table.

User defined style can be applied to hyperlink using cssClass property in e-hyperlinkSettings.

Hyperlink for all cells

The pivot table provides an option to display hyperlinks for all cells in the table. To enable this functionality, set the ShowHyperlink property to true within the e-hyperlinkSettings.

Prerequisite: The Pivot Table must have at least one row, column, and value field configured so that all cell types render with content.

Once enabled, hyperlinks are shown consistently in row headers, column headers, value cells, and summary cells.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

AllCells.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Hyperlink for row headers

The pivot table provides a way to display hyperlinks specifically in row header cells that are currently visible. To enable this functionality, set the ShowRowHeaderHyperlink property to true within the e-hyperlinkSettings. This ensures that only the row headers will display hyperlinks, while other cell types remain unaffected.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showRowHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

RowHeader.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Hyperlink for column headers

The pivot table provides an option to display hyperlinks specifically in column header cells that are currently visible. To enable this functionality, set the ShowColumnHeaderHyperlink property to true within the e-hyperlinkSettings object. This ensures that only the column headers will display hyperlinks, while other cell types remain unaffected.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showColumnHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

ColumnHeader.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Hyperlink for value cells

The pivot table provides support for displaying hyperlinks specifically in value cells that are currently visible. To enable this option, set the ShowValueCellHyperlink property to true within the e-hyperlinkSettings object. This ensures that only the value cells will display hyperlinks, while other cell types remain unaffected.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.countryMembers"></e-field>
            <e-field name="Year" items="@ViewBag.yearMembers"></e-field>
        </e-drilledmembers>
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showValueCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

ValueCells.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

Hyperlink for summary cells

The pivot table provides support for displaying hyperlinks specifically in summary cells that are currently visible. To enable this option, set the ShowSummaryCellHyperlink property to true within the e-hyperlinkSettings object. This ensures that only the summary cells will display hyperlinks, while other cell types remain unaffected.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.countryMembers"></e-field>
            <e-field name="Year" items="@ViewBag.yearMembers"></e-field>
        </e-drilledmembers>
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showSummaryCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

SummaryCells.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

Header-based hyperlink

The pivot table supports displaying hyperlinks in cells that match specific row or column headers. This functionality can be enabled using the HeaderText property, which is configured through code-behind during initial rendering.

In the example below, the value FY 2015.Q1.Units Sold is assigned to HeaderText, which means the pivot table will show hyperlinks only in cells that match this specific header combination.

The dot (.) character in FY 2015.Q1.Units Sold is the default delimiter used to identify the header levels in the row and column axes. To use a different delimiter, configure the HeaderDelimiter property in ValueSortSettings before the Pivot Table renders.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.countryMembers"></e-field>
            <e-field name="Year" items="@ViewBag.yearMembers"></e-field>
        </e-drilledmembers>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings headerText= "FY 2015.Q1.Units Sold"></e-hyperlinkSettings>
</ejs-pivotview>

Headers.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

Condition-based hyperlink

The pivot table supports displaying hyperlinks in specific cells based on defined conditions. This functionality can be configured through code-behind during initial rendering using the ConditionalSettings property.

• Measure (string): Specifies the value field name for which the hyperlink should be shown when the condition is met.
• Conditions (Condition): Specifies the operator type. The supported operators include:
  • Condition.Equals
  • Condition.NotEquals
  • Condition.GreaterThan
  • Condition.GreaterThanOrEqual
  • Condition.LessThan
  • Condition.LessThanOrEqual
  • Condition.Between (uses both Value1 and Value2)
  • Condition.NotBetween (uses both Value1 and Value2)
• Value1: Sets the starting value for the condition.
• Value2: Sets the ending value for range-based comparisons (Condition.Between, Condition.NotBetween). Ignored for other operators.

In the example below, the pivot table is configured to display hyperlinks only in cells where the “Units Sold” field value is between 150 and 500. This highlights specific aggregated values that meet the given condition.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.countryMembers"></e-field>
            <e-field name="Year" items="@ViewBag.yearMembers"></e-field>
        </e-drilledmembers>
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings>
        <e-conditionalsettings>
            <e-format measure="Sold" conditions="Between" value1="100" value2="200"></e-format>
        </e-conditionalsettings>
    </e-hyperLinkSettings>
</ejs-pivotview>

Conditions.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

Condition based hyperlink for specific row or column

You can apply conditions for specific row or column using Label option to show hyperlink option in the pivot table. It can be configured using the ConditionalSettings tag through code behind, during initial rendering. The required settings are:

• Label: Specifies the header name to get visibility of hyperlink option for row or column.
• Conditions: Specifies the operator type such as Equals, GreaterThan, LessThan, etc.
• Value1: Specifies the start value.
• Value2: Specifies the end value.

CSHTML

<ejs-pivotview id="PivotView" height="300">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-drilledmembers>
            <e-field name="Country" items="@ViewBag.countryMembers"></e-field>
            <e-field name="Year" items="@ViewBag.yearMembers"></e-field>
        </e-drilledmembers>
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings>
        <e-conditionalsettings>
            <e-format label="Germany" conditions="Between" value1="500"></e-format>
        </e-conditionalsettings>
    </e-hyperLinkSettings>
</ejs-pivotview>

LabelConditions.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

Event

The pivot table triggers the hyperlinkCellClick event whenever a hyperlink cell is clicked. This event allows you to either customize the clicked cell or retrieve information about it.

Prerequisite: Hyperlink cells must be enabled via HyperlinkSettings; the event does not fire on cells that are not hyperlinks.

It provides the following parameters:

• currentCell: Refers to the clicked cell element, which can be modified as needed.
• cancel: If set to true, prevents the default click behavior from running (for example, navigation). Set to false to let the click proceed normally and your custom code run in addition.
• data: Contains detailed information about the clicked cell, including its value, row and column headers, position, and whether it is a summary cell.
• nativeEvent: Represents the original browser event triggered by the click, useful for advanced event handling.

In the example below, when a hyperlink cell is clicked, a custom attribute (data-url) is added to the cell to redirect users to the Syncfusion ASP.NET Core Pivot Table Hyperlink Demo. The cancel property is set to false to allow this interaction.

CSHTML

<ejs-pivotview id="PivotView" height="300" hyperLinkCellClick="hyperlink")>
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
    <e-hyperlinkSettings showRowHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>

Event.cs

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}