You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/pivot-table/how-to/apply-custom-styles-to-pivot-cells.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Apply custom style to pivot cells in Blazor Pivot Table Component
11
11
12
-
The [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event within the [PivotViewEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html), which is triggered whenever the report is modified and the engine is populated, allows you to apply custom styling to row, column and value cells in the pivot table.
12
+
The [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event in the [PivotViewEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html) triggers each time the report changes and the engine updates. This event lets you add your own styles to row, column, and value cells in the Pivot Table.
13
13
14
-
In the following example, a custom style has been applied to the column header **"FY 2015"**and to the row header **"Germany"** and its aggregated value via the [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event by adding the **"e-custom"** class to the `cellData.CssClass` property.
14
+
In the following example, a custom style is applied to the column header **FY 2015** the row header **Germany** and the corresponding value cell for **Amount** under **FY 2016**via the [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event by adding the **e-custom** class to the `cellData.CssClass` property.
15
15
16
16
```cshtml
17
17
@using Syncfusion.Blazor.PivotView
@@ -68,7 +68,7 @@ In the following example, a custom style has been applied to the column header *
68
68
{
69
69
cellData.CssClass = "e-custom";
70
70
}
71
-
if ((cellData.Axis == "column" && cellData.FormattedText == "FY 2017"))
71
+
if ((cellData.Axis == "column" && cellData.FormattedText == "FY 2015"))
Copy file name to clipboardExpand all lines: blazor/pivot-table/how-to/bind-complex-data-to-the-pivot-table.md
+2-2Lines changed: 2 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Convert complex data to flat data and assign it to the Pivot Table
11
11
12
-
By default, flat data can only bind to the pivot table. However, using **ExpandoObject**, you can connect complex data to the pivot table by converting it to flat data via code-behind and binding it to the pivot table using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under[PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
12
+
The Pivot Table component requires flat data for binding. Complex data, such as nested objects or hierarchical structures, must be converted into a flat structure before it can be assigned to the Pivot Table using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property within[PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
13
13
14
-
In the following example, the **ConvertToFlatData()** function is used to convert complex data to flat data and bind it to the pivot table using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property, then bind the field names to the rows and columns based on the converted flat data under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html).
14
+
In the example below, the `ConvertToFlatData` function transforms complex data with nested objects (e.g., `ShipDetails`) into flat data using `ExpandoObject`. The converted data is then assigned to the Pivot Table using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property. Field names are mapped to rows, columns, and values under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to display the data effectively.
Copy file name to clipboardExpand all lines: blazor/pivot-table/how-to/customize-number-and-date-format.md
+12-12Lines changed: 12 additions & 12 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,14 +9,14 @@ documentation: ug
9
9
10
10
# Customize number and date format in Blazor Pivot Table Component
11
11
12
-
User can format the number, date, and time values for each field using [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html) option under [PivotViewDataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). It can be configured through code behind, during initial rendering.
12
+
You can format the number, date, and time values for each field using the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html) option under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). This configuration is applied during component initialization to ensure consistent data presentation across the pivot table.
13
13
14
14
## Number formatting
15
15
16
-
For numbers, the formatting settings required to apply through code behind are:
16
+
For numeric fields, the formatting settings include the following properties:
17
17
18
-
*[Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): It allows to set the field name.
19
-
*[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): It allows to set the format of the respective field.
18
+
*[Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): Specifies the field name to which the formatting should be applied.
19
+
*[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): Defines the number format pattern for the respective field (e.g., 'N2' for two decimal places, 'C' for currency).
20
20
21
21
```cshtml
22
22
@using Syncfusion.Blazor.PivotView
@@ -53,17 +53,17 @@ For numbers, the formatting settings required to apply through code behind are:
53
53
54
54
```
55
55
56
-

56
+

57
57
58
-
## Date and time formatting
58
+
## Date and Time formatting
59
59
60
60
N> This property is applicable only for relational data source.
61
61
62
-
For date and time, the formatting settings required to apply through code behind are:
62
+
For date and time fields, the formatting settings include these properties:
63
63
64
-
*[Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): It allows to set the field name.
65
-
*[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): It allows to set the format of the respective field.
66
-
*[Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Type): It allows to set the type of format to be used for the respective field.
64
+
*[Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): Specifies the field name to which the formatting should be applied.
65
+
*[Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): Defines the date/time format pattern for the respective field (e.g., 'dd/MM/yyyy', 'MMM yyyy').
66
+
*[Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Type): Specifies the format type to be used for the respective field (Date, Time, or DateTime).
67
67
68
68
```cshtml
69
69
@using Syncfusion.Blazor.PivotView
@@ -94,10 +94,10 @@ For date and time, the formatting settings required to apply through code behind
94
94
95
95
```
96
96
97
-

97
+

98
98
99
99
## Limitations of date formatting
100
100
101
-
As per Firefox and Edge browsers standards, most of the date and time formats used in data source aren’t supported. For example: Apr-2000, Apr-01-2000, 01-03-2000, 2000-Apr-01 etc. are not supported. Meanwhile[ISO formats](https://262.ecma-international.org/5.1/#sec-15.9.1.15)will be supported across all browsers.
101
+
According to Firefox and Edge browser standards, most date and time formats used in data sources are not supported. For example: Apr-2000, Apr-01-2000, 01-03-2000, 2000-Apr-01, and similar formats are not recognized. However,[ISO formats](https://262.ecma-international.org/5.1/#sec-15.9.1.15)are supported across all browsers for consistent date handling.
102
102
103
103
N> You can refer to our [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore our [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.
Copy file name to clipboardExpand all lines: blazor/pivot-table/how-to/customizing-loading-indicator.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,9 @@ documentation: ug
9
9
10
10
# Customizing loading indicator in Blazor Pivot Table Component
11
11
12
-
You can customize the appearance of the loading indicator in the pivot table by using the [SpinnerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_SpinnerTemplate) property. This property accepts an HTML string which can be used for appearance customization.
12
+
The pivot table displays a loading indicator during data processing operations such as filtering, sorting, and aggregation calculations. The default loading spinner can be customized to match application design requirements using the [SpinnerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_SpinnerTemplate) property.
13
+
14
+
The [SpinnerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_SpinnerTemplate) property accepts an HTML string that defines the custom loading indicator appearance. This enables control over the visual presentation, including custom styling and animations.
13
15
14
16
N> You can also disable the loading indicator by setting [SpinnerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_SpinnerTemplate) to empty string.
Copy file name to clipboardExpand all lines: blazor/pivot-table/how-to/display-string-value-to-pivot-table-values.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
-
title: Display string value to pivot table values in Blazor | Syncfusion
4
-
description: Learn here all about Display string value to pivot table values in Syncfusion Blazor Pivot Table component and more.
3
+
title: Display string values in Blazor Pivot Table value cells | Syncfusion
4
+
description: Learn how to display custom string values in Pivot Table value cells by using the CellTemplate property in the Syncfusion Blazor Pivot Table component.
5
5
platform: Blazor
6
6
control: Pivot Table
7
7
documentation: ug
8
8
---
9
9
10
-
# Display string value to pivot table values in Blazor Pivot Table
10
+
# Display string values in Blazor Pivot Table value cells
11
11
12
-
End user can display string value to the pivot table's value cell by using the [CellTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html#Syncfusion_Blazor_PivotView_PivotViewTemplates_CellTemplate) property in [PivotViewTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html) class.
12
+
String values can be displayed in value cells by using the [CellTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html#Syncfusion_Blazor_PivotView_PivotViewTemplates_CellTemplate) property of the [PivotViewTemplates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html) class. The template receives an [AxisSet](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AxisSet.html) context that contains the cell information (for example, Axis, Value, ActualText, and FormattedText). Setting [AxisSet.FormattedText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AxisSet.html#Syncfusion_Blazor_PivotView_AxisSet_FormattedText) determines the text rendered for that cell without altering the underlying value.
13
13
14
-
In the following example, each cell value of the **Sold** field's actual value has been converted to**{hours:D2}:{minutes:D2}:{seconds:D2}**format and string values have been assigned to `data.FormattedText`.
14
+
In the following example, each value cell for the **Sold** field is converted to the string format**{hours:D2}:{minutes:D2}:{seconds:D2}**(HH:mm:ss), and the result is assigned to `data.FormattedText` so the cell displays the custom string.
0 commit comments