Search results

Hyperlink

Pivot Grid allows you to show hyperlink option to the link data for individual cells that display in the pivot grid. Also, the hyperlink can be enabled separately for row header, column header, value, and summary cells using the hyperlinkSettings. It can be configured through code behind, during initial rendering. The settings available to show hyperlink to the cells are:

  • 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 grid.

The Pivot Grid has an option to show hyperlink option to all the cells that are currently displaying. To show hyperlink option, you need to set showHyperlink to true.

tagHelper
AllCells.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings showHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

The Pivot Grid has an option to show hyperlink option to row header cells that are currently displaying. To show hyperlink option for row headers alone, you need to set showRowHeaderHyperlink to true.

tagHelper
RowHeader.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings showRowHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

The Pivot Grid has an option to show hyperlink option to columns header cells that are currently displaying. To show hyperlink option for column headers alone, you need to set showColumnHeaderHyperlink to true.

tagHelper
ColumnHeader.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" expandAll="false">
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings showColumnHeaderHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    return View();
}

The Pivot Grid has an option to show hyperlink option to value cells that are currently displaying. To show hyperlink option for values alone, you need to set showValueCellHyperlink to true.

tagHelper
ValueCells.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" 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-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings showValueCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

The Pivot Grid has an option to show hyperlink option to summary value cells that are currently displaying. To show hyperlink option for summary values alone, you need to set showSummaryCellHyperlink to true.

tagHelper
SummaryCells.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" 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-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings showSummaryCellHyperlink="true"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

The Pivot Grid has an option to show hyperlink option to the cells based on specific conditions. It can be configured using the conditionalSettings option through code behind, during initial rendering. The settings required to sort are:

  • measure: Specifies the value field name to get visibility of hyperlink option for specific measure.
  • condition: Specifies the operator type such as equals, greater than, less than, etc.
  • value1: Specifies the start value.
  • value2: Specifies the end value.
tagHelper
Conditions.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" 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-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings>
        <e-conditionalsettings>
            <e-format measure="Sold" conditions="Between" value1="150" value2="200"></e-format>
        </e-conditionalsettings>
    </e-hyperLinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

The Pivot Grid has an option to show hyperlink option to the cells based on specific row or column. It can be configured using the headerText option through code behind, during initial rendering.

tagHelper
Headers.cs
<ejs-pivotview id="PivotGrid" height="300">
    <e-datasource data="@ViewBag.data" 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-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Production 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-datasource>
    <e-hyperlinkSettings headerText= "FY 2015.Q1.Units Sold"></e-hyperlinkSettings>
</ejs-pivotview>
public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.data = data;
    ViewBag.yearMembers = new string[] { "FY 2015" };
    ViewBag.countryMembers = new string[] { "France" };
    return View();
}

See Also