Skip to content

Commit 345b79b

Browse files
authored
Merge pull request #6479 from syncfusion-content/967538-hyper1hotfix2
967538: Resolve the Exception Occurred While Running HyperlinkCellClicked Event UG Sample
2 parents c7529a0 + 43ac47a commit 345b79b

File tree

1 file changed

+26
-3
lines changed

1 file changed

+26
-3
lines changed

blazor/pivot-table/hyper-link.md

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -384,6 +384,7 @@ It has following parameters - [Cancel](https://help.syncfusion.com/cr/blazor/Syn
384384

385385
```cshtml
386386
@using Syncfusion.Blazor.PivotView
387+
@inject IJSRuntime JSRuntime
387388
388389
<SfPivotView TValue="ProductDetails" ShowFieldList="true">
389390
<PivotViewDataSourceSettings DataSource="@data">
@@ -404,6 +405,25 @@ It has following parameters - [Cancel](https://help.syncfusion.com/cr/blazor/Syn
404405
<PivotViewEvents TValue="ProductDetails" HyperlinkCellClicked="hyperlink"></PivotViewEvents>
405406
</SfPivotView>
406407
408+
<script type="text/javascript">
409+
function navigateFromPivotCellCoordinates(rowIndex, colIndex, baseUrl) {
410+
const element = document.querySelector('[index="' + rowIndex + '"][aria-colindex="' + (colIndex + 1) + '"]');
411+
const cellcontent = element.innerText;
412+
if (element && element.classList.contains('e-rowsheader') && cellcontent != "Grand Total")
413+
{
414+
const finalUrl = `${baseUrl}${encodeURIComponent(cellcontent)}`;
415+
console.log(`Navigating from DOM element at [${rowIndex}, ${colIndex}] to: ${finalUrl}`);
416+
window.location.href = finalUrl;
417+
}
418+
else
419+
{
420+
const finalUrl = "https://syncfusion.com/";
421+
console.log(`Navigating from DOM element at [${rowIndex}, ${colIndex}] to: ${finalUrl}`);
422+
window.location.href = finalUrl;
423+
}
424+
}
425+
</script>
426+
407427
<style>
408428
.e-custom-class,.e-custom-class:hover {
409429
text-decoration: underline !important;
@@ -420,11 +440,14 @@ It has following parameters - [Cancel](https://help.syncfusion.com/cr/blazor/Syn
420440
this.data = ProductDetails.GetProductData().ToList();
421441
//Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details.
422442
}
423-
public void hyperlink(HyperCellClickEventArgs args)
443+
public async Task OnHyperLinkClick(HyperCellClickEventArgs args)
424444
{
425-
args.CurrentCell.SetAttribute("data-url", "https://syncfusion.com/");//here we have redirected to Syncfusion on hyperlinkcell click
445+
int row= (args.Data as AxisSet).RowIndex;
446+
int col= (args.Data as AxisSet).ColIndex;
447+
string baseUrl = "https://en.wikipedia.org/wiki/";
448+
await JSRuntime.InvokeVoidAsync("navigateFromPivotCellCoordinates", row, col, baseUrl);
426449
}
427450
}
428451
```
429452

430-
N> Refer to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore the [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap5) to know how to render and configure the pivot table.
453+
N> Refer to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore the [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap5) to know how to render and configure the pivot table.

0 commit comments

Comments
 (0)