Hyperlink in ASP.NET MVC Pivot Table

27 Aug 202614 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 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	null	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.

Precedence: When ShowHyperlink is true, individual show*Hyperlink flags are ignored. HeaderText and PivotViewConditionalSettings are evaluated after the cell-type filters.

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 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 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

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowHyperlink(true)).Render()

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 HyperlinkSettings. This ensures that only the row headers will display hyperlinks, while other cell types remain unaffected.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowRowHeaderHyperlink(true)).Render()

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 HyperlinkSettings object. This ensures that only the column headers will display hyperlinks, while other cell types remain unaffected.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowColumnHeaderHyperlink(true)).Render()

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 HyperlinkSettings object. This ensures that only the value cells will display hyperlinks, while other cell types remain unaffected.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
.DrilledMembers(drilledmembers =>
 {
     drilledmembers.Name("Country").Items(ViewBag.countryMembers).Add(); drilledmembers.Name("Year").Items(ViewBag.yearMembers).Add();
 }).FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowValueCellHyperlink(true)).Render()

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 HyperlinkSettings object. This ensures that only the summary cells will display hyperlinks, while other cell types remain unaffected.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
.DrilledMembers(drilledmembers =>
 {
     drilledmembers.Name("Country").Items(ViewBag.countryMembers).Add(); drilledmembers.Name("Year").Items(ViewBag.yearMembers).Add();
 }).FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowSummaryCellHyperlink(true)).Render()

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 shows 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

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .DrilledMembers(drilledmembers =>
 {
     drilledmembers.Name("Country").Items(ViewBag.countryMembers).Add(); drilledmembers.Name("Year").Items(ViewBag.yearMembers).Add();
 }).FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings.HeaderText("FY 2015.Q1.Units Sold")).Render()

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 (double): Sets the starting (or only) value for the condition.
• Value2 (double): Sets the ending value for range-based comparisons (Between, NotBetween). Ignored for other operators.

URL source: The hyperlink target for condition-based cells is taken from a column on the data source whose name matches the value field defined in Measure. If your data source does not contain such a column, the cell is rendered as plain text.

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

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .DrilledMembers(drilledmembers =>
 {
     drilledmembers.Name("Country").Items(ViewBag.countryMembers).Add(); drilledmembers.Name("Year").Items(ViewBag.yearMembers).Add();
 }).FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings
 .ConditionalSettings(format =>
{
    format.Conditions(Syncfusion.EJ2.PivotView.Condition.Between).Measure("Sold").Value1(100).Value2(200).Add();
})).Render()

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 option 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 Condition.Equals, Condition.GreaterThan, Condition.LessThan, etc.
• Value1: Specifies the start value.
• Value2: Specifies the end value.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .DrilledMembers(drilledmembers =>
 {
     drilledmembers.Name("Country").Items(ViewBag.countryMembers).Add(); drilledmembers.Name("Year").Items(ViewBag.yearMembers).Add();
 }).FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkSettings(hyperlinksettings => hyperlinksettings
 .ConditionalSettings(format =>
{
    format.Conditions(Syncfusion.EJ2.PivotView.Condition.LessThan).Label("France").Value1(1000).Add();
})).Render()

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 MVC Pivot Table Hyperlink Demo. The cancel property is set to false to allow this interaction.

CSHTML

@Html.EJS().PivotView("PivotView").Height(300).DataSourceSettings(dataSource => dataSource.DataSource((IEnumerable<object>)ViewBag.DataSource).ExpandAll(false)
 .FormatSettings(formatsettings =>
 {
     formatsettings.Name("Amount").Format("C0").MaximumSignificantDigits(10).MinimumSignificantDigits(1).UseGrouping(true).Add();
 }).Rows(rows =>
 {
     rows.Name("Country").Add(); rows.Name("Products").Add();
 }).Columns(columns =>
 {
     columns.Name("Year").Caption("Year").Add(); columns.Name("Quarter").Add();
 }).Values(values =>
 {
     values.Name("Sold").Caption("Units Sold").Add(); values.Name("Amount").Caption("Sold Amount").Add();
 })).HyperlinkCellClick("hyperlink").HyperlinkSettings(hyperlinksettings => hyperlinksettings.ShowRowHeaderHyperlink(true).CssClass("e-custom-class")).Render()

<style>
    .e-custom-class {
        color: #008cff;
        text-decoration: underline;
    }

   .e-custom-class:hover {
        color: red;
        text-decoration: none;
    }
</style>

<script>
 function hyperlink(args) {
        args.cancel = false;
        args.currentCell.setAttribute("data-url", "https://ej2.syncfusion.com/");//here we have redirected to EJ2 Syncfusion on hyperlinkcell click
    }
</script>

Event.cs

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