Category / Section
How to enable hyperlink and trigger events for the corresponding cells?
1 min read
This KB illustrates that how to enable hyperlink and trigger events for the respective cells.
Solution:
You can enable hyperlink and trigger events for the current clicking cells by using the following code example.
JS
<div id="PivotGrid1" style="height: 380px; width: 72%; display:block; float:left; overflow: auto" />
<script type="text/javascript">
$(function () {
$("#PivotGrid1").ejPivotGrid({
hyperlinkSettings: {
enableValueCellHyperlink: true,
enableRowHeaderHyperlink: true,
enableColumnHeaderHyperlink: true,
enableSummaryCellHyperlink: true
},
valueCellHyperlinkClick: "CellClickEvent",
rowHeaderHyperlinkClick: "CellClickEvent",
columnHeaderHyperlinkClick: "CellClickEvent",
summaryCellHyperlinkClick: "CellClickEvent",
url: "../wcf/PivotGridService.svc",
layout: ej.PivotGrid.Layout.Normal
});
CellClickEvent = function (evt) {
alert("Cell click event is fired.");
}
});
</script>
MVC
@Html.EJ().Pivot().PivotGrid("PivotGrid1").Url("../wcf/PivotGridService.svc").ClientSideEvents(events=>events.ValueCellHyperlinkClick("CellClickEvent").RowHeaderHyperlinkClick("CellClickEvent").ColumnHeaderHyperlinkClick("CellClickEvent").SummaryCellHyperlinkClick("CellClickEvent")).HyperlinkSettings(hypLink => hypLink.EnableColumnHeaderHyperlink(true).EnableRowHeaderHyperlink(true).EnableValueCellHyperlink(true).EnableSummaryCellHyperlink(true))
<script type="text/javascript">
CellClickEvent = function (evt) {
alert("Cell click event is fired.");
}
</script>
ASP
<ej:PivotGrid ID="PivotGrid1" runat="server" Url="../wcf/PivotGridService.svc">
<HyperlinkSettings EnableColumnHeaderHyperlink="true" EnableRowHeaderHyperlink="true" EnableSummaryCellHyperlink ="true"EnableValueCellHyperlink="true" />
<ClientSideEvents ValueCellHyperlinkClick="CellClickEvent" RowHeaderHyperlinkClick="CellClickEvent"ColumnHeaderHyperlinkClick="CellClickEvent" SummaryCellHyperlinkClick="CellClickEvent" />
</ej:PivotGrid>
<script type="text/javascript">
CellClickEvent = function (evt) {
alert("Cell click event is fired.");
}
</script>
