Hyper link in ASP.NET Core Pivot Table component

26 Feb 202622 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.

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:

• showHyperlink: It allows to set the visibility of hyperlink in all cells.
• showRowHeaderHyperlink: It allows to set the visibility of hyperlink in row headers.
• showColumnHeaderHyperlink: It allows to set the visibility of hyperlink in column headers.
• showValueCellHyperlink: It allows to set the visibility of hyperlink in value cells.
• showSummaryCellHyperlink: It allows to set the visibility of hyperlink in summary cells.
• headerText: It allows to set the visibility of hyperlink based on header text.
• conditionalSettings: It allows to set the visibility of hyperlink based on specific condition.

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 across all cells currently visible in the table. To enable this functionality, set the showHyperlink property to true within the e-hyperlinkSettings.

Once enabled, hyperlinks will be 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();
}

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: Specifies the value field name for which the hyperlink should be shown when the condition is met.
• conditions: Specifies the operator type such as Equals, GreaterThan, LessThan, etc.
• value1: Sets the starting value for the condition.
• value2: Sets the ending value for the condition (used in range-based comparisons).

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();
}

Header based hyperlink

The pivot table supports displaying hyperlinks in cells based on 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 below code example, 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.

NOTE

The dot(.) character in FY 2015.Q1.Units Sold is used by default to identify the header levels in the pivot table’s row and column. It can be changed by setting the headerDelimiter in the valueSortSettings property to any other delimiter instead of the default separator.

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();
}

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.

It provides two parameters:

• currentCell: Refers to the clicked cell element, which can be modified as needed.
• cancel: If set to true, prevents any changes from being applied to the cell.
• data: Contains detailed information about the clicked cell, including its value, row and column headers, position, and whether it’s 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 enable 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();
}