Hyper link in ASP.NET MVC Pivot Table component

26 Feb 202612 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 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 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 HyperlinkSettings.

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

Condition based hyperlink

The pivot table has an option to show hyperlink in the cells based on specific conditions. It can be configured using the ConditionalSettings class through code behind, during initial rendering. The settings required are:

• Measure: Specifies the value field name, in-order to set the visibility of hyperlink for the same when condition is met.
• 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.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();
}

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

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

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 MVC Pivot Table Hyperlink Demo. The cancel property is set to false to enable 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();
}