Skip to content

Commit 06f41a7

Browse files
ManiRam94ManiRam94
authored
Merge pull request #6852 from syncfusion-content/EJ2-980754-Section-4
980754: Revise UG Documentation Content for Blazor Platform(Section-4)
2 parents 80bf534 + 1ecb59e commit 06f41a7

14 files changed

+769
-382
lines changed

‎blazor/pivot-table/connecting-to-data-source/elasticsearch.md‎

Lines changed: 104 additions & 63 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md‎

Lines changed: 130 additions & 79 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/mongodb.md‎

Lines changed: 82 additions & 27 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/mysql.md‎

Lines changed: 85 additions & 27 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/oracledb.md‎

Lines changed: 80 additions & 28 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/postgreSQL.md‎

Lines changed: 78 additions & 26 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/connecting-to-data-source/snowflakedb.md‎

Lines changed: 78 additions & 25 deletions
Large diffs are not rendered by default.

‎blazor/pivot-table/how-to/images/blazor-pivottable-tooltip-for-row-and-column-headers.png‎

-32.7 KB
Loading

‎blazor/pivot-table/how-to/show-custom-tooltip-for-row-and-column-headers.md‎

Lines changed: 132 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ documentation: ug
99

1010
# Show tooltip for row and column headers in Blazor Pivot Table
1111

12-
You can create and display the tooltip for each row and column header(s) in the pivot table by using an external tooltip component.
12+
This guide explains how to display tooltips for row and column headers in the Blazor Pivot Table using an external tooltip component. By leveraging the tooltip component, users can view additional details about headers when hovering over them, enhancing the interactivity of the Pivot Table. The example below demonstrates how to achieve this with clear and concise code.
1313

14-
In the following example, the [OnRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OnRender) event is used for obtaining the header cell information, which is then used within the [ContentTemplate](https://blazor.syncfusion.com/documentation/tooltip/template) property of the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component.
14+
## Implementation
15+
16+
To show tooltips for row and column headers, use the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component. The [OnRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_OnRender) event retrieves header cell information, which is displayed within the [ContentTemplate](https://blazor.syncfusion.com/documentation/tooltip/template) of the tooltip. This setup ensures tooltips appear when users hover over row or column headers, providing relevant details like field names or header text.
1517

1618
```cshtml
1719
@using Syncfusion.Blazor.PivotView
@@ -20,122 +22,145 @@ In the following example, the [OnRender](https://help.syncfusion.com/cr/blazor/S
2022
@using System.Text.Json;
2123
2224
<SfPivotView @ref="pivot" ID="PivotView" TValue="ProductDetails">
23-
<PivotViewDataSourceSettings DataSource="@dataSource">
24-
<PivotViewColumns>
25-
<PivotViewColumn Name="Year"></PivotViewColumn>
26-
<PivotViewColumn Name="Quarter"></PivotViewColumn>
27-
</PivotViewColumns>
28-
<PivotViewRows>
29-
<PivotViewRow Name="Country"></PivotViewRow>
30-
<PivotViewRow Name="Products"></PivotViewRow>
31-
</PivotViewRows>
32-
<PivotViewValues>
33-
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
34-
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
35-
</PivotViewValues>
36-
<PivotViewFormatSettings>
37-
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
38-
</PivotViewFormatSettings>
39-
</PivotViewDataSourceSettings>
40-
<PivotViewEvents TValue="ProductDetails" Created="Created"></PivotViewEvents>
25+
<PivotViewDataSourceSettings DataSource="@dataSource">
26+
<PivotViewColumns>
27+
<PivotViewColumn Name="Year"></PivotViewColumn>
28+
<PivotViewColumn Name="Quarter"></PivotViewColumn>
29+
</PivotViewColumns>
30+
<PivotViewRows>
31+
<PivotViewRow Name="Country"></PivotViewRow>
32+
<PivotViewRow Name="Products"></PivotViewRow>
33+
</PivotViewRows>
34+
<PivotViewValues>
35+
<PivotViewValue Name="Sold" Caption="Units Sold"></PivotViewValue>
36+
<PivotViewValue Name="Amount" Caption="Sold Amount"></PivotViewValue>
37+
</PivotViewValues>
38+
<PivotViewFormatSettings>
39+
<PivotViewFormatSetting Name="Amount" Format="C"></PivotViewFormatSetting>
40+
</PivotViewFormatSettings>
41+
</PivotViewDataSourceSettings>
42+
<PivotViewEvents TValue="ProductDetails" DataBound="DataBound"></PivotViewEvents>
4143
</SfPivotView>
4244
43-
<SfTooltip @ref="tooltipRef" MouseTrail="true" WindowCollision="true" OpenDelay="500" ID="pivot-tooltip" Target="@("td.e-rowsheader" + "," + "th.e-columnsheader")" OnRender="OnTooltipRender">
44-
<ContentTemplate>
45-
@{
46-
if (cellData != null)
47-
{
48-
if (cellData.FormattedText != "Grand Total")
49-
{
50-
if (cellData.Axis == "row")
51-
{
52-
<div>
53-
<div>
54-
<p class="inline-p">FieldName:</p>
55-
<p class="inline-p">@cellData.ValueSort["axis"]</p>
56-
</div>
57-
<div>
58-
<p class="inline-p">Text:</p>
59-
<p class="inline-p">@cellData.FormattedText</p>
60-
</div>
61-
</div>
62-
}
63-
else
64-
{
65-
<div>
66-
<div>
67-
<p class="inline-p">Text:</p>
68-
<p class="inline-p">@cellData.FormattedText</p>
69-
</div>
70-
</div>
71-
}
72-
}
73-
else
74-
{
75-
<div>
76-
<div>
77-
<p class="inline-p">Text:</p>
78-
<p class="inline-p">@cellData.FormattedText</p>
79-
</div>
80-
</div>
81-
}
82-
}
83-
}
84-
</ContentTemplate>
45+
<SfTooltip @ref="tooltipRef" MouseTrail="true" WindowCollision="true" OpenDelay="500" ID="pivot-tooltip" Target="@("td.e-rowsheader" + "," + "th.e-columnsheader" + "," + "th.e-valuesheader")" OnRender="OnTooltipRender">
46+
<ContentTemplate>
47+
@{
48+
if (cellData != null)
49+
{
50+
if (cellData.FormattedText != "Grand Total")
51+
{
52+
if (cellData.Axis == "row")
53+
{
54+
<div>
55+
<div>
56+
<p class="inline-p">FieldName:</p>
57+
<p class="inline-p">@cellData.ValueSort["axis"]</p>
58+
</div>
59+
<div>
60+
<p class="inline-p">Text:</p>
61+
<p class="inline-p">@cellData.FormattedText</p>
62+
</div>
63+
</div>
64+
}
65+
else
66+
{
67+
<div>
68+
<div>
69+
<p class="inline-p">Text:</p>
70+
<p class="inline-p">@cellData.FormattedText</p>
71+
</div>
72+
</div>
73+
}
74+
}
75+
else
76+
{
77+
<div>
78+
<div>
79+
<p class="inline-p">Text:</p>
80+
<p class="inline-p">@cellData.FormattedText</p>
81+
</div>
82+
</div>
83+
}
84+
}
85+
}
86+
</ContentTemplate>
8587
</SfTooltip>
8688
8789
<style>
88-
.inline-p {
89-
display: inline;
90-
}
90+
.inline-p {
91+
display: inline;
92+
}
9193
</style>
9294
9395
<script>
94-
function getTableCellNode(ID, left, top) {
95-
var element = document.getElementById(ID);
96-
var cellElement = document.elementFromPoint(left, top);
97-
if (cellElement) {
98-
var colIndex = Number(cellElement.getAttribute('aria-colindex'));
99-
var rowIndex = Number(cellElement.getAttribute('index'));
100-
}
101-
var cellInfo = {};
102-
cellInfo['index'] = rowIndex;
103-
cellInfo['aria-colindex'] = colIndex;
104-
return JSON.stringify(cellInfo);
105-
}
96+
function getTableCellNode(ID, left, top) {
97+
var targetElement = document.getElementById(ID);
98+
var pointElement = document.elementFromPoint(left, top);
99+
var headerCell = closest(pointElement, "td.e-rowsheader");
100+
var columnIndex, rowIndex;
101+
if (headerCell) {
102+
columnIndex = Number(headerCell.getAttribute('aria-colindex')) - 1;
103+
rowIndex = Number(headerCell.getAttribute('index'));
104+
} else {
105+
var columnHeaderCell = closest(pointElement, "th.e-columnsheader");
106+
columnIndex = Number(columnHeaderCell.getAttribute('aria-colindex')) - 1;
107+
rowIndex = Number(columnHeaderCell.getAttribute('index'));
108+
}
109+
var cellDetails = {
110+
index: rowIndex,
111+
'aria-colindex': columnIndex
112+
};
113+
114+
return JSON.stringify(cellDetails);
115+
}
116+
117+
function closest(element, selector) {
118+
var el = element;
119+
if (typeof el.closest === 'function') {
120+
return el.closest(selector);
121+
}
122+
while (el && el.nodeType === 1) {
123+
if (matches(el, selector)) {
124+
return el;
125+
}
126+
el = el.parentNode;
127+
}
128+
return null;
129+
}
106130
</script>
107131
108132
@code {
109-
private SfPivotView<ProductDetails> pivot;
110-
private List<ProductDetails> dataSource { get; set; }
111-
private SfTooltip tooltipRef;
112-
private AxisSet cellData;
113-
114-
protected override void OnInitialized()
115-
{
116-
this.dataSource = ProductDetails.GetProductData().ToList();
117-
}
118-
119-
public void Created()
120-
{
121-
if (tooltipRef != null)
122-
{
123-
tooltipRef.RefreshAsync();
124-
}
125-
}
126-
127-
// Event function used to update the tooltip content while hovering each row and column headers in the pivot table.
128-
public async void OnTooltipRender(TooltipEventArgs args)
129-
{
130-
Dictionary<string, int> cellInfo;
131-
string returnValue = await JSRuntime.InvokeAsync<string>("getTableCellNode", new object[] { "PivotView", args.Left, args.Top });
132-
if (returnValue != null)
133-
{
134-
// You can get the cell information for the row and column headers here to display in the tooltip.
135-
cellInfo = JsonSerializer.Deserialize<Dictionary<string, int>>(returnValue);
136-
cellData = pivot.PivotValues[cellInfo["index"]]?[cellInfo["aria-colindex"]];
137-
}
138-
}
133+
private SfPivotView<ProductDetails> pivot;
134+
private List<ProductDetails> dataSource { get; set; }
135+
private SfTooltip tooltipRef;
136+
private AxisSet cellData;
137+
138+
protected override void OnInitialized()
139+
{
140+
this.dataSource = ProductDetails.GetProductData().ToList();
141+
}
142+
143+
public void DataBound()
144+
{
145+
if (tooltipRef != null)
146+
{
147+
tooltipRef.RefreshAsync();
148+
}
149+
}
150+
151+
// Event function used to update the tooltip content while hovering each row and column headers in the pivot table.
152+
public async void OnTooltipRender(TooltipEventArgs args)
153+
{
154+
Dictionary<string, int> cellInfo;
155+
156+
string returnValue = await JSRuntime.InvokeAsync<string>("getTableCellNode", new object[] { "PivotView", args.Left, args.Top });
157+
if (returnValue != null)
158+
{
159+
// You can get the cell information for the row and column headers here to display in the tooltip.
160+
cellInfo = JsonSerializer.Deserialize<Dictionary<string, int>>(returnValue);
161+
cellData = pivot.PivotValues[cellInfo["index"]]?[cellInfo["aria-colindex"]];
162+
}
163+
}
139164
}
140165
141166
```

‎blazor/pivot-table/images/code-web-app.jpeg‎

97.3 KB
Loading

0 commit comments

Comments
 (0)