diff --git a/blazor/pivot-table/aggregation.md b/blazor/pivot-table/aggregation.md index 15a0c423c4..017c7c3440 100644 --- a/blazor/pivot-table/aggregation.md +++ b/blazor/pivot-table/aggregation.md @@ -9,27 +9,28 @@ documentation: ug # Aggregation in Blazor Pivot Table Component -N> This feature is applicable only for relational data source. +N> This feature is applicable only for the relational data source. -End user can perform calculations over a group of values (exclusively for value fields bound in value axis) using the aggregation option. By default, values are added (summed) together. The other aggregation types are explained below. +End users can perform calculations on groups of values (specifically for value fields placed in the value axis) by using different aggregation types. By default, values are combined by summing them. Additional aggregation types are described below. -N> The fields with data type such as number supports all aggregation types mentioned below except for **"CalculatedField"**. The fields with data type such as string, date, datetime, boolean, etc., supports **"Count"** and **"DistinctCount"** aggregation types alone. +N> Numeric fields support all aggregation types listed below, except **CalculatedField**. Fields of type string, date, datetime, boolean, and similar types support only **Count** and **DistinctCount** aggregation. | Operator | Description | |------|-------------| -| Sum| Displays the pivot table values with sum.| -| Product| Displays the pivot table values with product.| -| Count| Displays the pivot table values with count.| -| DistinctCount| Displays the pivot table values with distinct count.| -| Min| Displays the pivot table with minimum value.| -| Max| Displays the pivot table with maximum value.| -| Avg| Displays the pivot table values with average.| -| Index| Displays the pivot table values with index.| -| PopulationStDev| Displays the pivot table values with standard deviation of population.| -| SampleStDev| Displays the pivot table values with sample standard deviation.| -| PopulationVar| Displays the pivot table values with variance of population.| -| SampleVar| Displays the pivot table values with sample variance.| -| RunningTotals| Displays the pivot table values with running totals.| +| Sum| Displays the total sum for the selected field values.| +| Product| Displays the product of the selected field values.| +| Count| Displays the number of records for the selected field.| +| DistinctCount| Displays the number of unique records for the selected field.| +| Min| Displays the minimum value for the selected field.| +| Max| Displays the maximum value for the selected field.| +| Avg| Displays the average (mean) of the selected field values.| +| Median| Displays the median value for the selected field.| +| Index| Displays the index value for the selected field data.| +| PopulationStDev| Displays the standard deviation of the population for the selected field.| +| SampleStDev| Displays the sample standard deviation for the selected field.| +| PopulationVar| Displays the variance of the population for the selected field.| +| SampleVar| Displays the sample variance for the selected field.| +| RunningTotals| Displays the running total for the selected field values.| | DifferenceFrom| Displays the pivot table values with difference from the value of the base item in the base field.| | PercentageOfDifferenceFrom| Displays the pivot table values with percentage difference from the value of the base item in the base field.| | PercentageOfGrandTotal| Displays the pivot table values with percentage of grand total of all values.| @@ -42,11 +43,11 @@ N> The fields with data type such as number supports all aggregation types menti ## Assigning aggregation type for value fields through API -For each value field, the aggregation type can be set using the property [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_Type) in [PivotViewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class. Meanwhile, aggregation types like [SummaryTypes.DifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) and [SummaryTypes.PercentageOfDifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) can check for specific field of specific item using [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_BaseField) and [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_BaseItem) properties. Likewise, [SummaryTypes.PercentageOfParentTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) type can check for specific field using [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_BaseField) property. For instance, the aggregation type [SummaryTypes.DifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) would intake the specified field and its corresponding member as input and its value is compared across other members in the same field and also across different fields to formulate an appropriate output value. +For each value field, the aggregation type can be set using the property [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type) in [PivotViewValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class. Meanwhile, aggregation types like [SummaryTypes.DifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_DifferenceFrom) and [SummaryTypes.PercentageOfDifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_PercentageOfDifferenceFrom) can check for specific field of specific item using [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_BaseField) and [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_BaseItem) properties. Likewise, [SummaryTypes.PercentageOfParentTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_PercentageOfParentTotal) type can check for specific field using [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_BaseField) property. For instance, the aggregation type [SummaryTypes.DifferenceFrom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_DifferenceFrom) would intake the specified field and its corresponding member as input and its value is compared across other members in the same field and also across different fields to formulate an appropriate output value. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_Type): It allows to set the aggregate type of the field. -* [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_BaseField): It allows to set the specific field to aggregate the values. -* [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html#Syncfusion_Blazor_PivotView_PivotViewValue_BaseItem): It allows to set the specific member to aggregate the values. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): It allows to set the aggregate type of the field. +* [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_BaseField): It allows to set the specific field to aggregate the values. +* [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_BaseItem): It allows to set the specific member to aggregate the values. ```cshtml @using Syncfusion.Blazor.PivotView @@ -84,13 +85,15 @@ For each value field, the aggregation type can be set using the property [Type]( ![Aggregation in Blazor PivotTable](images/blazor-pivottable-aggregation.png) -N> By default, the aggregation will be considered as [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) to the value fields which had number type and for the value fields which had non-number type such as string, date, datetime, boolean, etc., the aggregation type will be considered as [SummaryTypes.Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html). +N> By default, the aggregation will be considered as [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) to the value fields which had number type and for the value fields which had non-number type values such as string, date, datetime, boolean, etc., the aggregation type will be considered as [SummaryTypes.Count](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Count). ## Show desired aggregation types in its dropdown menu -By default, all the aggregation types are displayed in the dropdown menu available in buttons. However, based on the request for an application, there may be a need to show selective aggregation types on our own. This can be achieved using the [AggregateTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AggregateTypes) property. +By default, the dropdown menu for value fields includes all available aggregation types. However, you can customize this menu to display only specific aggregation types relevant to your application using the [AggregateTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AggregateTypes) property. This allows you to tailor the user experience by limiting the options to those that best fit your use case. - ```cshtml +The following code demonstrates how to configure the pivot table component to display only the **DistinctCount**, **Average**, and **Product** aggregation types in the dropdown menu. + +```cshtml @using Syncfusion.Blazor.PivotView @@ -133,17 +136,19 @@ By default, all the aggregation types are displayed in the dropdown menu availab ## Modifying aggregation type for value fields at runtime -Aggregation types can be changed easily through UI at runtime. The value fields bound to grouping bar and field list appears with a dropdown icon which helps to select an appropriate aggregation type for the respective value field. On selection, the values in the pivot table will be changed dynamically. +You can dynamically modify the aggregation type for value fields in the Pivot Table component through the UI at runtime. Value fields, displayed in the grouping bar and field list, include a dropdown icon that allows you to select from various aggregation types (e.g., **Sum**, **Average**, **Count**). Once you select a new aggregation type, the pivot table updates instantly to reflect the change, providing a seamless experience for data analysis. ![Modifying Aggregation Types via FieldList in Blazor PivotTable](images/blazor-pivottable-aggregation-fieldlist-menu.png)
-
+ ![Modifying Aggregation Types via GroupBar in Blazor PivotTable](images/blazor-pivottable-aggregation-groupbar-menu.png) ## Hiding aggregation type from button text -By default, in value axis each field would be displayed by its name and aggregation type together. To hide aggregation type and display field name alone, set the property [ShowAggregationOnValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowAggregationOnValueField) in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false**. +By default, each field in the value axis is displayed with its name and aggregation type (e.g., "Sum of Units Sold"). To display only the field name (e.g., "Units Sold") and hide the aggregation type, set the [ShowAggregationOnValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowAggregationOnValueField) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false**. + +This customization enhances the clarity of the pivot table’s interface by simplifying the button text, making it more concise and user-friendly. ```cshtml @using Syncfusion.Blazor.PivotView @@ -181,13 +186,14 @@ By default, in value axis each field would be displayed by its name and aggregat ![Hiding Aggregation Types via FieldList in Blazor PivotTable](images/blazor-pivottable-hide-aggregation-via-fieldlist.png)
+ ![Hiding Aggregation Types via GroupBar in Blazor PivotTable](images/blazor-pivottable-hide-aggregation-via-groupbar.png) ## Hiding aggregation type icon from UI -By default, the icon to set aggregation type is enabled in the grouping bar. To disable this icon, set the property [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowValueTypeIcon) in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. +By default, the dropdown icon to change the aggregation type is visible in the grouping bar. To hide this icon, set the [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowValueTypeIcon) property within [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. -N> Icon to change the aggregation type can be hidden only in Grouping Bar but not in Field List at the moment. +N> The aggregation type icon can only be hidden in the Grouping Bar, not in the Field List. ```cshtml @using Syncfusion.Blazor.PivotView @@ -229,19 +235,19 @@ N> Icon to change the aggregation type can be hidden only in Grouping Bar but no ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when clicking and selecting the aggregate type via the dropdown icon in the value field button, which is present in both grouping bar and field list UI. This allows user to identify the current action being performed at runtime. It has the following parameters: +The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when clicking and selecting the aggregate type via the dropdown icon in the value field button, which is present in both grouping bar and field list UI. This allows the user to identify the current action being performed at runtime. It has the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source settings such as input data source, rows, columns, values, filters, format settings and more. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. For example, while performing aggregation, the action name will be shown as **Aggregate field**. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Provides the name of the current action initiated. For example, when selecting aggregation, the action name is **Aggregate field**. -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected value field information. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): Contains information regarding the selected value field. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> This option applies only to actions performed through the field-based UI, such as filtering, sorting, removing a field from the grouping bar, editing, and changing the aggregation type. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Allows restricting the current action. -In the following example, action taken during aggregation type selection via dropdown icon can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +In the following example, an action taken during aggregation type selection via the dropdown icon can be prevented by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. ```cshtml @using Syncfusion.Blazor.PivotView @@ -284,18 +290,17 @@ In the following example, action taken during aggregation type selection via dro } } ``` -### OnActionComplete - -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when a UI action, such as applying aggregation using the dropdown icon via the value field button, which is present in both the grouping bar and the field list UI, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: - -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. For example, after completing the aggregation, the action name will be shown as **Field aggregated**. +### OnActionComplete -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected value field information. +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event is triggered when a UI action is completed, such as changing the aggregation type using the dropdown icon in the value field button, available within both the grouping bar and field list user interfaces. This event enables users to identify which UI action has been completed at runtime. The event provides the following parameters: -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): The current data source settings, including input data source, rows, columns, values, filters, format settings, and related properties. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Specifies the name of the completed action. For example, after changing the aggregation type, the action name will be **Field aggregated**. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Contains information about the selected value field. +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Defines the unique information about the current UI action performed. +N> This option is applicable only when field-based UI actions are performed, such as filtering, sorting, removing a field from the grouping bar, editing, and changing the aggregation type. ```cshtml @using Syncfusion.Blazor.PivotView @@ -337,13 +342,13 @@ N> This option is applicable only when the field based UI actions are performed } } ``` -### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +### OnActionFailure -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. For example, if the action fails while performing the aggregation, then the action name will be shown as **Aggregate field**. +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event is triggered when a UI action fails to produce the expected result. This event provides detailed information about the failure through the following parameters: -* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): Specifies the name of the failed action. For example, if the failure occurs during aggregation, the action name will be **Aggregate field**. +* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): Contains detailed error information related to the failed UI action. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/calculated-field.md b/blazor/pivot-table/calculated-field.md index 7511dd74eb..b8c664fe6e 100644 --- a/blazor/pivot-table/calculated-field.md +++ b/blazor/pivot-table/calculated-field.md @@ -9,14 +9,25 @@ documentation: ug # Calculated Field in Blazor Pivot Table Component -Allows end user to create a new calculated field in the pivot table, based on the available fields from the bound data source or using simple formula with basic arithmetic operators. It can be added at runtime through the built-in dialog, invoked from Field List UI. To do so, set the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true** in the pivot table. End user can now see a "CALCULATED FIELD" button enabled in Field List UI automatically, which on clicking will invoke the calculated field dialog and perform necessary operation. +The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their pivot table for enhanced data visualization and reporting. -Calculated field can also be included in the pivot table through code behind using the [PivotViewCalculatedFieldsSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class. The required properties to create a new calculate field are: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html#Syncfusion_Blazor_PivotView_PivotViewCalculatedFieldSetting_Name): It allows to indicate the calculated field with a unique name. -* [Formula](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html#Syncfusion_Blazor_PivotView_PivotViewCalculatedFieldSetting_Formula): It allows to set the formula. -* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FormatSettings.html#Syncfusion_Blazor_PivotView_FormatSettings_Format): It helps to set the number format for the resultant value. +## Creating calculated fields -N> The calculated field is applicable only for value fields. By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. +Users can create calculated fields in two convenient ways: +- **Interactive Method**: Using the built-in dialog accessible from the Field List UI. +- **Code-Based Method**: Configuring fields programmatically using the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class. + +To enable the calculated field functionality, set the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property to **true**. Once enabled, a "CALCULATED FIELD" button appears in the Field List UI. Clicking this button opens the calculated field dialog, where users can create and manage custom fields using an intuitive interface. + +### Defining calculated fields programmatically + +You can define calculated fields programmatically using the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class. This approach is ideal for pre-configuring specific calculations. The following properties are essential for creating a calculated field: + +- [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCalculatedFieldSetting.html#Syncfusion_Blazor_PivotView_PivotCalculatedFieldSetting_Name): Specifies a unique name for the calculated field. +- [Formula](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCalculatedFieldSetting.html#Syncfusion_Blazor_PivotView_PivotCalculatedFieldSetting_Formula): Defines the mathematical expression using existing field names and arithmetic operators. +- [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FormatSettings.html#Syncfusion_Blazor_PivotView_FormatSettings_Format): Configures the number format for displaying calculated results. + +N> The calculated field feature applies only to value fields. By default, calculated fields created programmatically are added to the field list and calculated field dialog UI. To display a calculated field in the pivot table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. ```cshtml @using Syncfusion.Blazor.PivotView @@ -60,7 +71,9 @@ N> The calculated field is applicable only for value fields. By default, the cal ![Calculated Field in Blazor PivotTable](images/blazor-pivottable-calculated-field.png) -Meanwhile, the user can also view calculated field dialog in UI by invoking [CreateCalculatedFieldDialogAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_CreateCalculatedFieldDialog) method on an external button click. +## Opening the calculated field dialog programmatically + +You can display the calculated field dialog by calling the [CreateCalculatedFieldDialogAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_CreateCalculatedFieldDialog) method when an external button is clicked. This provides additional flexibility for accessing the calculated field functionality. ```cshtml @using Syncfusion.Blazor.PivotView @@ -109,65 +122,108 @@ Meanwhile, the user can also view calculated field dialog in UI by invoking [Cre ![Displaying Calculated Field Button in Blazor PivotTable](images/blazor-pivottable-calc-field.png) -## Editing through the field list and the grouping bar +## Editing through the field list and grouping bar -User can also modify the existing calculated field using the built-in edit option available directly in the field list (or) grouping bar. To do so, click the "Edit" icon available in the calculated field button. Now the calculated field dialog is opened and the current calculated field name, formula and format can be changed at runtime. +You can easily modify existing calculated fields using the built-in edit option available in both the field list and grouping bar. This feature allows you to update formulas, change field names, or adjust formatting without recreating the entire calculated field. + +To edit an existing calculated field: + +1. Locate the calculated field button in either the field list or the grouping bar. +2. Click the **Edit** icon next to the calculated field name. +3. The calculated field dialog opens, displaying the current settings. +4. Make changes to the field name, formula, or format as needed. +5. Click **OK** to apply the changes. ![Editing Calculated Field in Blazor PivotTable](images/blazor-pivottable-editing-calculated-field.png)
-
+ ![Editing Calculated Field Formula in Blazor PivotTable](images/blazor-pivottable-calc-fieldlist-edit.png) -## Renaming the existing calculated field +## Renaming an existing calculated field + +You can rename any existing calculated field directly through the user interface at runtime. This option helps you maintain clear and meaningful names for your calculated fields as your analysis requirements evolve. + +To rename a calculated field: -Existing calculated field can be renamed only through the UI at runtime. To do so, open the calculated field dialog, select the target field and click "Edit" icon. User can now see the existing name getting displayed in the text box at the top of the dialog. Now, change the name based on user requirement and click "OK". +1. Locate the calculated field button in either the field list or the grouping bar. +2. Click the **Edit** icon next to the calculated field name. +3. The calculated field dialog opens, displaying the current field name in the text box at the top. +4. Replace the existing name with your preferred name. +5. Click **OK** to save the new name. - ![Editing in Blazor PivotTable Calculated Field](images/blazor-pivottable-edit-calculate-field.png)
-
+ ![Renaming in Blazor PivotTable Calculated Field](images/blazor-pivottable-renaming-calc-field.png) -## Editing the existing calculated field formula +## Editing an existing calculated field formula + +This option allows you to modify the formulas of existing calculated fields directly through the user interface, ensuring your calculations remain accurate and up to date with changing requirements. -Existing calculated field formula can be edited only through the UI at runtime. To do so, open the calculated field dialog, select the target field and click "Edit" icon. User can now see the existing formula getting displayed in a multiline text box at the bottom of the dialog. Now, change the formula based on user requirement and click "OK". +To edit an existing calculated field formula: + +1. Open the calculated field dialog. +2. Select the calculated field you want to edit from the list. +3. Click the **Edit** icon next to the selected field. +4. The existing formula appears in a multiline text box at the bottom of the dialog. +5. Update the formula according to your requirements. +6. Click **OK** to save your changes. + +The pivot table will automatically refresh to reflect the updated calculations. ![Editing in Blazor PivotTable Calculated Field](images/blazor-pivottable-editing-calculated-field.png)
-
+ ![Editing in Blazor PivotTable Calculated Field Formula](images/blazor-pivottable-edit-calc-field-formula.png) -## Reusing the existing formula in a new calculate field +## Reusing an existing formula in a new calculated field + +This option enables you to quickly create new calculated fields by reusing formulas from existing fields, saving time and ensuring consistency across your calculations. + +To reuse an existing formula: -While creating a new calculated field, if the user wants to the add the formula of an existing calculated field, it can be done easily. To do so, simply drag-and-drop the existing calculated field to the "Formula" section. +1. Open the calculated field dialog to create a new field. +2. Locate the existing calculated field whose formula you want to reuse. +3. Drag the existing calculated field from the tree view. +4. Drop it into the **Formula** section. +5. The formula from the existing field is automatically added to your new calculated field. +6. Modify the formula further if needed, or use it as is. +7. Click **OK** to create the new calculated field. ![Dragging Existing Calculated Field in Blazor PivotTable](images/blazor-pivottable-drag-existing-calculated-field.png)
-
+ ![Dragging Blazor PivotTable Field to Formula](images/blazor-pivottable-drag-calc-field-to-formula.png)
-
+ ![Reusing Existing Calculated Field Formula in Blazor PivotTable](images/blazor-pivottable-reusing-existed-calc-field-formula.png) -## Apply the format to the calculated field values +## Applying formatting to calculated field values + +Formatting calculated field values enhances the readability and insight of your data in the pivot table. You can apply different formats using the calculated field dialog in the UI or programmatically through code. -Values in a new or existing calculated field can be formatted via the calculated field UI or code behind. The [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) property in code-behind can be used to specify the desired format. For more information about the supported formats [refer here](https://blazor.syncfusion.com/documentation/pivot-table/number-formatting). +To format calculated field values in your code, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) class. For more information about supported number formats, refer to the documentation [here](https://blazor.syncfusion.com/documentation/pivot-table/number-formatting). -To apply format to calculated field values at runtime via UI, a built-in dropdown under the "Format" label is available, from which the user can select the pre-defined format options listed below. +### Formatting through the user interface -* **Standard** - Denotes the numeric type. -* **Currency** - Denotes the currency type. -* **Percentage** - Denotes the percentage type. +To apply formatting to calculated field values via the user interface, use the built-in "Format" dropdown available in the calculated field dialog. This dropdown provides the following predefined format options: + +* **Standard** - Displays numbers in their basic numeric form. +* **Currency** - Displays numbers as currency values. +* **Percentage** - Displays numbers as percentage values. * **Custom** - Denotes the custom format. For example: "C2". This shows the value "9584.3" as "$9584.30." -* **None** - Denotes that no format will be applied. +* **None** - Applies no formatting to the values. -N> By default, **None** will be selected from the dropdown. +N> By default, **None** is selected in the dropdown. ![Applying Format to Blazor PivotTable Calculated Field](images/blazor-pivottable-calc-formatstring.png) -In addition, you can specify the desired custom formats by selecting the **Custom** option from the "Format" dropdown. +### Applying custom formatting + +For specific formatting requirements, select the **Custom** option from the "Format" dropdown. This allows you to enter custom format patterns that meet your exact display needs. ![Applying custom format through Blazor PivotTable calculated field dialog UI](images/calculatdfield-apply-custom-format.png) + ## Supported operators and functions for the calculated field formula Below is a list of operators and functions that can be used in the formula to create the calculated fields. @@ -314,14 +370,25 @@ Syntax: Max(number1, number2) ### CalculatedFieldCreate -The event [CalculatedFieldCreate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_CalculatedFieldCreate) fires while closing the dialog on "OK" button click. It allows to customize the new or existing calculated field information obtained from the dialog. It has the following parameters. +The [CalculatedFieldCreate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_CalculatedFieldCreate) event enables you to validate and manage calculated field details before they are applied to the pivot table. This ensures data accuracy and prevents invalid configurations. The event is triggered when the "OK" button is clicked to close the calculated field dialog, allowing you to modify or validate the calculated field information before it is saved. + +**Event Parameters:** + +The event provides the following parameters to facilitate interaction with calculated field data: + +* [CalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_CalculatedField): Contains the calculated field information (new or existing) that was entered in the dialog. + +* [CalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_CalculatedFieldSettings): Provides access to the current [CalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) of the pivot table. + +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_Cancel): A boolean property that prevents the dialog changes from being applied when set to **true**. -* [CalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_CalculatedField): It holds the new or existing calculated field information obtained from the dialog. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_DataSourceSettings): Contains the current data source configuration, including input data, rows, columns, values, filters, and format settings. -* [CalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_CalculatedFieldSettings): It holds the [CalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) property of the pivot report. +* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_FieldName): Specifies the name of the field being created or updated. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.CalculatedFieldCreateEventArgs.html#Syncfusion_Blazor_PivotView_CalculatedFieldCreateEventArgs_Cancel): It is a boolean property and by setting this to true , the customization done in calculated field dialog won’t be applied to the calculated field. +**Example:** +The following example shows how to prevent users from creating calculated fields without setting a format: ```cshtml @using Syncfusion.Blazor.PivotView @@ -371,11 +438,20 @@ The event [CalculatedFieldCreate](https://help.syncfusion.com/cr/blazor/Syncfu ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) when clicking calculated field button, calculated field edit icon and context menu in the tree view inside the calculated field dialog. This allows user to identify the current action being performed at runtime. It has the following parameters: +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event allows you to control and monitor calculated field operations before they are executed, enabling you to validate or restrict user actions as needed. -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +This event is triggered when users interact with calculated field functionality in the following ways: +- Clicking the calculated field button +- Clicking the edit icon for an existing calculated field +- Using the context menu in the tree view within the calculated field dialog -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: +The event provides the following parameters to help you handle these interactions: + +**Event Parameters:** + +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source configuration, including input data, rows, columns, values, filters, format settings, and other pivot table settings. + +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Identifies the specific action the user is attempting to perform. The table below lists the available actions and their corresponding names: | Action | Action Name| |----------------|-------------| @@ -383,13 +459,15 @@ The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo | [Edit icon in calculated field](https://blazor.syncfusion.com/documentation/pivot-table/calculated-field#editing-through-the-field-list-and-the-groupingbar)| Edit calculated field| | [Context menu in the tree view inside the calculated field dialog](./calculated-field)| Calculated field context menu| -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected value field information. +- [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): Provides information about the selected field when the action involves a specific field. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> This parameter is available only when the action involves a specific field, such as filtering, sorting, removing a field from the grouping bar, editing, or changing the aggregation type. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): A boolean property that allows you to prevent the current action from completing. Set this to **true** to stop the action from proceeding. -In the following example, the calculated field button click action, that is, opening of the calculated field dialog can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +**Example:** + +The example below illustrates how to prevent access to the calculated field dialog by canceling the action triggered when a user clicks the calculated field button. This is achieved by setting the **args.Cancel** property to **true** within the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event: ```cshtml @using Syncfusion.Blazor.PivotView @@ -438,25 +516,33 @@ In the following example, the calculated field button click action, that is, ope } } ``` + ### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the calculated field is completely created or edited. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event enables you to track when calculated field operations are successfully completed in the Pivot Table. This event is useful for performing additional actions or logging activities after users create or modify calculated fields. + +The event provides the following parameters to help you handle completed operations: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +**Event Parameters:** -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the updated data source configuration, including input data, rows, columns, values, filters, format settings, and other pivot table settings after the operation is completed. + +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Identifies the specific action completed by the user. The table below lists the available actions and their corresponding names: | Action | Action Name| |----------------|-------------| | [Calculated field button](https://blazor.syncfusion.com/documentation/pivot-table/calculated-field)| Calculated field applied| | [Edit icon in calculated field](https://blazor.syncfusion.com/documentation/pivot-table/calculated-field#editing-through-the-field-list-and-the-groupingbar)| Calculated field edited| +- [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Provides information about the selected field when the action involves a specific field. + +N> This parameter is available only when the action involves a specific field, such as filtering, sorting, removing a field from the grouping bar, editing, or changing the aggregation type. -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected value field information. +- [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Contains detailed information about the completed action. For calculated field operations, this includes the complete calculated field information, its formula, and the field name. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +**Example:** -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if the edit action is completed, this event will be triggered, and the argument will display information such as the entire calculated field information and its formula, including the field name. +The example below demonstrates how to use the [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event to log information when calculated field operations are completed: ```cshtml @using Syncfusion.Blazor.PivotView @@ -505,9 +591,10 @@ N> This option is applicable only when the field based UI actions are performed } } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event is triggered when a UI action fails to produce the expected result. This event provides detailed information about the failure through the following parameters: * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: @@ -517,7 +604,6 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla | [Edit icon in calculated field](https://blazor.syncfusion.com/documentation/pivot-table/calculated-field#editing-through-the-field-list-and-the-groupingbar)| Edit calculated field| | [Context menu in the tree view inside the calculated field dialog](./calculated-field)| Calculated field context menu| - * [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. ```cshtml @@ -578,4 +664,5 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } } ``` + N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/conditional-formatting.md b/blazor/pivot-table/conditional-formatting.md index 8cd80f1ed5..5e97707c05 100644 --- a/blazor/pivot-table/conditional-formatting.md +++ b/blazor/pivot-table/conditional-formatting.md @@ -9,14 +9,14 @@ documentation: ug # Conditional Formatting in Blazor Pivot Table Component -It allows the end user to change the appearance of the pivot table value cells with its background color, font color, font family, and font size based on the specific conditions. +The conditional formatting feature enables users to customize the appearance of pivot table value cells by modifying background color, font color, font family, and font size based on specific conditions. This powerful visualization feature helps highlight important value cells and makes them stand out in the pivot table. To know about **Conditional Formatting** feature in Blazor Pivot Table component, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=C2w2KWKc0f8"%} -The conditional formatting can be applied at runtime through the built-in dialog, invoked from the toolbar. To do so, set the [AllowConditionalFormatting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowConditionalFormatting) and [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) properties in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Also, include the item [ToolbarItems.ConditionalFormatting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) within the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. End user can now see the "Conditional Formatting" icon in toolbar UI automatically, which on clicking will invoke the formatting dialog to perform necessary operations. +The conditional formatting can be applied at runtime through the built-in dialog, invoked from the toolbar. To enable this functionality, set the [AllowConditionalFormatting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowConditionalFormatting) and [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) properties in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Additionally, include the item [ToolbarItems.ConditionalFormatting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) within the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. Users will see the "Conditional Formatting" icon in the toolbar UI automatically, which opens the formatting dialog when clicked. ```cshtml @using Syncfusion.Blazor.PivotView @@ -55,35 +55,38 @@ The conditional formatting can be applied at runtime through the built-in dialog ``` - -![Displaying Conditional Format Icon in Blazor PivotTable Toolbar](images/blazor-pivottable-conditional-format-in-toolbar.png) +![Displaying Conditional Format Icon in Blazor Pivot Table Toolbar](images/blazor-pivottable-conditional-format-in-toolbar.png)

-![Adding New Conditional Format in Blazor PivotTable](images/blazor-pivottable-add-new-conditonal-format.png) +![Adding New Conditional Format in Blazor Pivot Table](images/blazor-pivottable-add-new-conditonal-format.png)

-![Changing Conditional Format Criteria in Blazor PivotTable](images/blazor-pivottable-change-conditional-format-criteria.png) +![Changing Conditional Format Criteria in Blazor Pivot Table](images/blazor-pivottable-change-conditional-format-criteria.png)

-![Displaying Conditional Format in Blazor PivotGrid](images/blazor-pivotgrid-with-conditional-format.png) +![Displaying Conditional Format in Blazor Pivot Table](images/blazor-pivotgrid-with-conditional-format.png) -Conditional formatting can also be included in the pivot table through the code-behind using the [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class. The required properties to apply a new conditional formatting are, +## Configure conditional formatting through code-behind + +Conditional formatting can also be applied programmatically during component initialization using the [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). This approach allows you to define formatting rules directly in the code-behind, ensuring that specific styling conditions are automatically applied when the pivot table loads. The required properties to apply a new conditional formatting are, * [ApplyGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_ApplyGrandTotals): This boolean property allows you to restrict conditional formatting for grand totals in the row and column axes. By default, this property is set to true. * [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure): Specifies the value field name for which style will be applied. * [Conditions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Conditions): Defines the operator type used for conditional formatting, such as equals, greater than, less than, etc. * [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Value1): Specifies the starting value for the conditional formatting. * [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Value2): Specifies the ending value for the conditional formatting range. This property is applicable only for conditions like **Between** and **NotBetween**. -* [PivotViewStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html): Specifies the custom styling applied to the cell. +* [PivotViewStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html): Specifies the custom styling applied to the cell. -The available style properties in [PivotViewStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html) class, to set in value cells are: +The [PivotViewStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html) class includes the following properties, which you can use to customize the appearance of value cells: * [BackgroundColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html#Syncfusion_Blazor_PivotView_PivotViewStyle_BackgroundColor): It allows to set the background color to the value cell in the pivot table. * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html#Syncfusion_Blazor_PivotView_PivotViewStyle_Color): It allows to set the font color to the value cell in the pivot table. * [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html#Syncfusion_Blazor_PivotView_PivotViewStyle_FontFamily): It allows to set the font family to the value cell in the pivot table. * [FontSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewStyle.html#Syncfusion_Blazor_PivotView_PivotViewStyle_FontSize): It allows to set the font size to the value cell in the pivot table. -Meanwhile, user can also view conditional formatting dialog in UI by invoking [ShowConditionalFormattingDialogAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowConditionalFormattingDialog) method on an external button click. +## Opening conditional formatting dialog programmatically + +Users can also access the conditional formatting dialog through external UI elements by calling the [ShowConditionalFormattingDialogAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowConditionalFormattingDialog) method. In the following example, an external button is used to open the conditional formatting dialog programmatically. ```cshtml @using Syncfusion.Blazor.PivotView @@ -140,13 +143,15 @@ Meanwhile, user can also view conditional formatting dialog in UI by invoking [S ``` -![Displaying Conditional Format Button in Blazor PivotTable](images/blazor-pivottable-conditional-format-button.png) +![Displaying Conditional Format Button in Blazor Pivot Table](images/blazor-pivottable-conditional-format-button.png) -![Applying Conditional Format in Blazor PivotTable](images/blazor-pivottable-apply-conditional-format.png) +![Applying Conditional Format in Blazor Pivot Table](images/blazor-pivottable-apply-conditional-format.png) ## Conditional formatting for all fields -It allows end user to apply conditional formatting commonly for all value fields just by ignoring the [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure) property and setting rest of the properties in [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class. +The Pivot Table component allows you to apply conditional formatting to all value fields simultaneously. This approach ensures consistent highlighting and styling of value cells across the entire pivot table, removing the need to configure formatting for each value field individually. + +To format all value fields together, use the [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class without specifying the [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure) property. When the [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure) property is omitted, the formatting rules are automatically applied to every value field in your pivot table, resulting in a uniform appearance for all value cells. ```cshtml @using Syncfusion.Blazor.PivotView @@ -191,11 +196,11 @@ It allows end user to apply conditional formatting commonly for all value fields ``` -![Applying Conditonal Format to Value Field in Blazor PivotTable](images/blazor-pivottable-conditional-format.png) +![Applying Conditional Format to Value Field in Blazor Pivot Table](images/blazor-pivottable-conditional-format.png) ## Conditional formatting for specific value field -It allows the end user to apply conditional formatting to a specific value field by setting the [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure) property with specific value field name in [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class. +To apply conditional formatting exclusively to a particular value field, set the [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewConditionalFormatSetting_Measure) property with the specific value field name in [PivotViewConditionalFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalFormatSetting.html) class. ```cshtml @using Syncfusion.Blazor.PivotView @@ -240,12 +245,12 @@ It allows the end user to apply conditional formatting to a specific value field ``` -![Applying Conditional Format to Specific Field in Blazor PivotTable](images/blazor-pivottable-conditional-format-for-specific-field.png) +![Applying Conditional Format to Specific Field in Blazor Pivot Table](images/blazor-pivottable-conditional-format-for-specific-field.png) ## Editing and removing existing conditional format -Editing and removing existing conditional format can be done through the UI at runtime. To do so, open the conditional formatting dialog and edit the "Value", "Condition" and "Format" options based on the user requirement and click "OK". To remove a conditional format, click the "Delete" icon besides the respective condition. +Editing and removing existing conditional format can be done through the UI at runtime. To do so, open the conditional formatting dialog and edit the "Value", "Condition" and "Format" options based on user requirement and click "OK". To remove a conditional format, click the "Delete" icon besides the respective condition. -![Editing Existed Conditional Format in Blazor PivotTable](images/blazor-pivottable-edit-conditional-format.png) +![Editing Existed Conditional Format in Blazor Pivot Table](images/blazor-pivottable-edit-conditional-format.png) N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/elasticsearch.md b/blazor/pivot-table/connecting-to-data-source/elasticsearch.md index 3eddde37ab..cd91ae16db 100644 --- a/blazor/pivot-table/connecting-to-data-source/elasticsearch.md +++ b/blazor/pivot-table/connecting-to-data-source/elasticsearch.md @@ -1,24 +1,40 @@ --- -title: "Elasticsearch Data Binding in Blazor Pivot Table Component | Syncfusion" +layout: post +title: "Elasticsearch Data Binding in Blazor Pivot Table | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a Elasticsearch database in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to bind data from an Elasticsearch database to the Syncfusion Blazor Pivot Table and more." +platform: Blazor +documentation: ug --- -# Elasticsearch Data Binding +# Elasticsearch Data Binding in Blazor Pivot Table -This section describes how to use [Nest](https://www.nuget.org/packages/Nest) to retrieve data from a Elasticsearch database and bind it to the Blazor Pivot Table. +This guide explains how to connect an Elasticsearch database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [NEST](https://www.nuget.org/packages/Nest) library. It describes two approaches: directly retrieving and binding data to the Pivot Table, and using a Web API service to fetch and display Elasticsearch data efficiently. -## Connecting a Elasticsearch to a Syncfusion® Blazor Pivot Table +## Connecting an Elasticsearch Database to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section explains how to connect the Pivot Table component to an Elasticsearch database by directly retrieving data using the [NEST](https://www.nuget.org/packages/Nest) library. -**2.** To connect a Elasticsearch database using the Nest in our application, we need to install the [Nest](https://www.nuget.org/packages/Nest) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Nest** and install it. +### Step 1: Create a Pivot Table in Blazor +1. Set up a Blazor Pivot Table as described in the [Getting Started](../getting-started) documentation. -![Add the NuGet package "Nest" to the project](../images/Elasticsearch-nuget-package-install.png) +### Step 2: Install the NEST NuGet Package +1. Open the **NuGet Package Manager** in your project solution. +2. Search for the **NEST** package and install it to enable connectivity with the Elasticsearch server. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to Elasticsearch database. You can get the specified database by using the **ElasticClient**. Following that, the **Search** method of the **ElasticClient** is used to retrieve results from the database. Then populate the data collection from the **Hits** of the **SearchResponse** into a list using the **JTokenReader**. +![Add the NuGet package Nest to the project](../images/next-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the Elasticsearch data. +### Step 3: Configure Elasticsearch Connection +1. In the **Index.razor** page, within the `OnInitialized` method, use the **ElasticClient** class from the NEST library to establish a connection to the Elasticsearch database. +2. Use the **Search** method to query an Elasticsearch index and retrieve data. +3. Convert the retrieved data from the `Hits` collection of the `SearchResponse` into a list using `JTokenReader`. + +### Step 4: Bind Data to the Pivot Table +1. Assign the populated list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +2. Configure the Pivot Table report to structure the data retrieved from the Elasticsearch database. +3. Add fields to the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Filters) properties of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to define the report structure, specifying how data fields are organized and aggregated in the Pivot Table. + +Below is the sample code to bind and configure the Pivot Table with Elasticsearch data. ```cshtml @using System.Data @@ -28,7 +44,7 @@ This section describes how to use [Nest](https://www.nuget.org/packages/Nest) to @using Syncfusion.Blazor.PivotView - + @@ -45,7 +61,7 @@ This section describes how to use [Nest](https://www.nuget.org/packages/Nest) to @code { - private static List dataList = new List(); + private static List dataList = new List(); protected override void OnInitialized() { @@ -82,55 +98,45 @@ This section describes how to use [Nest](https://www.nuget.org/packages/Nest) to } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the data fetched from the Elasticsearch database, structured according to the defined report. +3. The resulting Pivot Table will appear as follows: ![Blazor Pivot Table bound with Elasticsearch data](../images/blazor-pivottable-Elasticsearch-databinding.png) -## Connecting a Elasticsearch to a Syncfusion® Blazor Pivot Table via Web API service +## Connecting an Elasticsearch Database to a Syncfusion® Blazor Pivot Table via Web API Service -### Create a Web API service to fetch Elasticsearch data +This section explains how to create a Web API service to retrieve data from an Elasticsearch database and connect it to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table). -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +### Create a Web API Service to Fetch Elasticsearch Data -![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) +Follow these steps to create a Web API service that retrieves data from an Elasticsearch database and prepares it for the Pivot Table. -**2.** To connect a Elasticsearch using the **Nest** in our application, we need to install the [Nest](https://www.nuget.org/packages/Nest) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Nest** and install it. +#### Step 1: Create an ASP.NET Core Web Application +1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**. +2. Follow the instructions in the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) to set up the project. -![Add the NuGet package "Nest" to the project](../images/Elasticsearch-nuget-package-install-in-web-service-app.png) +![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 2: Install the NEST NuGet Package +1. Install the **NEST** package using the **NuGet Package Manager** to enable Elasticsearch connectivity. -**4.** In the Web API controller (aka, PivotController), **ElasticClient** helps to connect the Elasticsearch database. Next, using **Search** method of the **ElasticClient** you can query your Elasticsearch index and retrieve results from the database. +![Add the NuGet package Nest to the project](../images/next-nuget-package-install.png) -```csharp -using Microsoft.AspNetCore.Mvc; -using Nest; -using Newtonsoft.Json; +#### Step 3: Create a Web API Controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller will facilitate data communication between the Elasticsearch database and the Pivot Table. -namespace MyWebService.Controllers -{ - [ApiController] - [Route("[controller]")] - public class PivotController : ControllerBase - { - private static object FetchElasticsearchData() - { - // Replace with your own connection string. - var connectionString = ""; - var uri = new Uri(connectionString); - var connectionSettings = new ConnectionSettings(uri); - var client = new ElasticClient(connectionSettings); - var searchResponse = client.Search(s => s - .Index("australian_weather") - .Size(1000) - ); - return searchResponse.Documents; - } - } -} -``` +#### Step 4: Configure Elasticsearch Connection +1. In the **PivotController.cs** file, use the **ElasticClient** class from the NEST library to establish a connection to the Elasticsearch database. +2. Use the **Search** method to query an Elasticsearch index and retrieve data. -**5.** In the **Get()** method of the **PivotController.cs** file, the **FetchElasticsearchData** method is used to retrieve the Elasticsearch data as a object, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Implement Data Retrieval Logic +1. In the **PivotController.cs** file, define a **Get()** method that calls the **FetchElasticsearchData** method to retrieve data from Elasticsearch. +2. Serialize the retrieved data into JSON format using **JsonConvert.SerializeObject()**. + +Here’s the sample code for the **PivotController.cs** file: ```csharp using Microsoft.AspNetCore.Mvc; @@ -166,23 +172,56 @@ namespace MyWebService.Controllers } ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:44323`. +#### Step 6: Run the Web Application +1. Build and run the web application. +2. The application will be hosted at the URL `https://localhost:44323`. -**7.** Finally, the retrieved data from Elasticsearch which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:44323/Pivot`, as shown in the browser page below. +#### Step 7: Verify the Data +1. Access the Web API endpoint at `https://localhost:44323/Pivot` to view the JSON data retrieved from the Elasticsearch database. +2. The browser will display the JSON data, as shown below. ![Hosted Web API URL](../images/Elasticsearch-data.png) -### Connecting the Pivot Table to a Elasticsearch using the Web API service +### Connecting the Pivot Table to an Elasticsearch Database Using the Web API Service + +This section explains how to connect the Pivot Table component to an Elasticsearch database by retrieving data from the Web API service created in the previous section. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 1: Create a Pivot Table in Blazor +1. Set up a Blazor Pivot Table as described in the [Getting Started](../getting-started) documentation. -**2.** Map the hosted Web API's URL link `https://localhost:44323/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of Elasticsearch data into instances of your model data class (aka, TValue="ElasticSearchService") while bound to the pivot table. +#### Step 2: Configure the Web API URL in the Pivot Table +1. In the **Index.razor** file, map the Web API URL (`https://localhost:44323/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property facilitates deserializing Elasticsearch data into instances of your model data class (i.e., TValue="ElasticSearchService") for binding to the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView - + + + + +@code { + public class ElasticSearchService + { + public int Quantity { get; set; } + public string Product { get; set; } + public string Date { get; set; } + public string Country { get; set; } + public double Amount { get; set; } + } +} +``` + +#### Step 3: Define the Pivot Table Report +1. Configure the Pivot Table report in the **Index.razor** file to structure the data retrieved from the Elasticsearch database. +2. Add fields to the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Filters) properties to organize data in the Pivot Table. + +```cshtml +@using Syncfusion.Blazor.PivotView + + + @@ -199,20 +238,22 @@ namespace MyWebService.Controllers @code { - public class PostgreSQLService + public class ElasticSearchService { - public TimeSpan openinghours_practice { get; set; } - public TimeSpan closinghours_practice { get; set; } - public string servicetype { get; set; } - public string servicecategory { get; set; } - public int revenue { get; set; } + public int Quantity { get; set; } + public string Product { get; set; } + public string Date { get; set; } + public string Country { get; set; } + public double Amount { get; set; } } } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the data fetched from the Elasticsearch database via the Web API, structured according to the defined report. +3. The resulting Pivot Table will appear as follows: ![Blazor Pivot Table bound with Elasticsearch data](../images/blazor-pivottable-Elasticsearch-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-Elasticsearch-database-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a Elasticsearch using the Web API service. \ No newline at end of file +N> In [this](https://github.com/SyncfusionExamples/how-to-bind-Elasticsearch-database-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from an Elasticsearch database using the Web API service. \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md b/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md index a585b85c99..5140a335b3 100644 --- a/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md +++ b/blazor/pivot-table/connecting-to-data-source/microsoft-sql-server.md @@ -1,24 +1,39 @@ --- -title: "Microsoft SQL Data Binding in Blazor Pivot Table Component | Syncfusion" +layout: post +title: "Microsoft SQL Data Binding in Blazor Pivot Table | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a Microsoft SQL server in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect a Microsoft SQL Server database to the Syncfusion Blazor Pivot Table and more." +platform: Blazor +documentation: ug --- -# Microsoft SQL Data Binding +# Microsoft SQL Data Binding in Blazor Pivot Table -This section describes how to use [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) to retrieve data from a Microsoft SQL server database and bind it to the Blazor Pivot Table. +This guide explains how to connect a Microsoft SQL Server database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display Microsoft SQL data. ## Connecting a Microsoft SQL database to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to a Microsoft SQL database by directly retrieving data using the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library. -**2.** To connect a Microsoft SQL using the Microsoft SQL driver in our application, we need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **System.Data.SqlClient** and install it. +### Step 1: Set up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "System.Data.SqlClient" to the project](../images/system-Data-sql-client-nuget-package-install.png) +### Step 2: Install the System.Data.SqlClient NuGet package +1. Open the **NuGet Package Manager** in your project solution. +2. Search for and install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) package to enable Microsoft SQL Server connectivity. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to Microsoft SQL server. **SqlConnection** helps to connect the SQL database (that is, Database1.mdf). Next, using **SqlCommand** and **SqlDataAdapter** you can process the desired SQL query string and retrieve data from the database. The **Fill** method of the DataAdapter is used to populate the SQL data into a **DataTable** , which is then converted to List type. +![Add the NuGet package System.Data.SqlClient to the project](../images/system-Data-sql-client-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the Microsoft SQL data. +### Step 3: Connect to the Microsoft SQL database +In the **Index.razor** file, under the `OnInitialized` method, use the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library to connect to a Microsoft SQL database and retrieve data for the Pivot Table. + +1. **Establish connection**: Use **SqlConnection** with a valid connection string, such as `Server=localhost;Database=Database1;Trusted_Connection=True;`, to connect to the Microsoft SQL database. +2. **Query and fetch data**: Execute a SQL query, such as `SELECT * FROM table1`, using **SqlCommand** to retrieve data for the Pivot Table. +3. **Structure the data**: Use the **Fill** method of **SqlDataAdapter** to populate the query results into a **DataTable**, which is then converted to a list for binding to the Pivot Table. + +### Step 4: Bind data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. ```cshtml @using Syncfusion.Blazor.PivotView; @@ -39,7 +54,7 @@ This section describes how to use [System.Data.SqlClient](https://www.nuget.org/ - + @code { @@ -77,105 +92,138 @@ This section describes how to use [System.Data.SqlClient](https://www.nuget.org/ } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the Microsoft SQL data, organized according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with Microsoft SQL data](../images/blazor-pivottable-Ms-SQL-databinding.png) ## Connecting a Microsoft SQL to a Syncfusion® Blazor Pivot Table via Web API service +This section explains how to create a Web API service to fetch data from a Microsoft SQL database and connect it to the Blazor Pivot Table. + ### Create a Web API service to fetch Microsoft SQL data -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +Follow these steps to set up a Web API service that retrieves Microsoft SQL data for the Pivot Table. + +#### Step 1: Create an ASP.NET Core Web application +1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. ![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**2.** To connect a Microsoft SQL using the **System.Data.SqlClient** in our application, we need to install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **System.Data.SqlClient** and install it. +#### Step 2: Install the System.Data.SqlClient NuGet package +1. Open the **NuGet Package Manager** in your project solution. +2. Search for and install the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) package to enable Microsoft SQL Server connectivity. -![Add the NuGet package "Sytem.Data.SqlClient" to the project](../images/system-Data-sql-client-nuget-package-install.png) +![Add the NuGet package System.Data.SqlClient to the project](../images/system-Data-sql-client-nuget-package-install.png) -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 3: Create a Web API controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller manages data communication between the Microsoft SQL database and the Pivot Table. -**4.** In the Web API controller (aka, PivotController), connect to Microsoft SQL server. **SqlConnection** helps to connect the SQL database (that is, Database1.mdf). Next, using **SqlCommand** and **SqlDataAdapter** you can process the desired SQL query string and retrieve data from the database. The **Fill** method of the DataAdapter is used to populate the SQL data into a **DataTable** as shown in the following code snippet. +#### Step 4: Connect to Microsoft SQL and retrieve data +In the **PivotController.cs** file, use the [System.Data.SqlClient](https://www.nuget.org/packages/System.Data.SqlClient/4.8.5?_src=template) library to connect to a Microsoft SQL database and fetch data for the Pivot Table. -```csharp - using Microsoft.AspNetCore.Mvc; - using Microsoft SQL.Data.Microsoft SQLClient; - using Newtonsoft.Json; - using System.Data; +1. **Establish connection**: Use **SqlConnection** with a valid connection string to access the Microsoft SQL database. +2. **Fetch data**: Run a SQL query, such as `SELECT * FROM table1`, using **SqlCommand** to retrieve data. +3. **Prepare data**: Use the **Fill** method of **SqlDataAdapter** to store the query results in a **DataTable** for JSON serialization. - namespace MyWebService.Controllers +```csharp +using Microsoft.AspNetCore.Mvc; +using Newtonsoft.Json; +using System.Data; +using System.Data.SqlClient; + +namespace MyWebService.Controllers +{ + [ApiController] + [Route("[controller]")] + public class PivotController : ControllerBase { - [ApiController] - [Route("[controller]")] - public class PivotController : ControllerBase + private static DataTable FetchSQLResult() { - public dynamic GetMicrosoft SQLResult() - { - // Replace with your own connection string. - string conSTR = @""; - string xquery = "SELECT * FROM table1"; - SqlConnection sqlConnection = new(conSTR); - sqlConnection.Open(); - SqlCommand sqlCommand = new(xquery, sqlConnection); - SqlDataAdapter dataAdapter = new(sqlCommand); - DataTable dataTable = new(); - dataAdapter.Fill(dataTable); - return dataTable; - } + string conSTR = @""; + string xquery = "SELECT * FROM table1"; + SqlConnection sqlConnection = new(conSTR); + sqlConnection.Open(); + SqlCommand sqlCommand = new(xquery, sqlConnection); + SqlDataAdapter dataAdapter = new(sqlCommand); + DataTable dataTable = new(); + dataAdapter.Fill(dataTable); + sqlConnection.Close(); + return dataTable; } } - +} ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **GetMicrosoft SQLResult** method is used to retrieve the Microsoft SQL data as a list, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize data to JSON +1. In the **PivotController.cs** file, create a **Get** method that calls **FetchSQLResult** to retrieve Microsoft SQL data. +2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the **DataTable** into JSON format. -```csharp - using Microsoft.AspNetCore.Mvc; - using Microsoft SQL.Data.Microsoft SQLClient; - using Newtonsoft.Json; - using System.Data; +> Ensure the **Newtonsoft.Json** NuGet package is installed in your project. - namespace MyWebService.Controllers +```csharp +using Microsoft.AspNetCore.Mvc; +using Newtonsoft.Json; +using System.Data; +using System.Data.SqlClient; + +namespace MyWebService.Controllers +{ + [ApiController] + [Route("[controller]")] + public class PivotController : ControllerBase { - [ApiController] - [Route("[controller]")] - public class PivotController : ControllerBase + [HttpGet(Name = "GetSQLResult")] + public object Get() { - [HttpGet(Name = "GetMicrosoft SQLResult")] - public object Get() - { - return JsonConvert.SerializeObject(GetMicrosoft SQLResult()); - } - - public dynamic GetMicrosoft SQLResult() - { - // Replace with your own connection string. - string conSTR = @""; - string xquery = "SELECT * FROM table1"; - SqlConnection sqlConnection = new(conSTR); - sqlConnection.Open(); - SqlCommand sqlCommand = new(xquery, sqlConnection); - SqlDataAdapter dataAdapter = new(sqlCommand); - DataTable dataTable = new(); - dataAdapter.Fill(dataTable); - return dataTable; - } + return JsonConvert.SerializeObject(FetchSQLResult()); } - } + private static DataTable FetchSQLResult() + { + string conSTR = @""; + string xquery = "SELECT * FROM table1"; + SqlConnection sqlConnection = new(conSTR); + sqlConnection.Open(); + SqlCommand sqlCommand = new(xquery, sqlConnection); + SqlDataAdapter dataAdapter = new(sqlCommand); + DataTable dataTable = new(); + dataAdapter.Fill(dataTable); + sqlConnection.Close(); + return dataTable; + } + } +} ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:7146`. +#### Step 6: Run the Web API service +1. Build and run the application. +2. The application will be hosted at `https://localhost:7139/` (the port number may vary). + +#### Step 7: Verify the JSON data +1. Access the Web API endpoint at `https://localhost:7139/Pivot` to view the JSON data retrieved from the Microsoft SQL database. +2. The browser will display the JSON data, as shown below. -**7.** Finally, the retrieved data from Microsoft SQL database which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:7146/Pivot`, as shown in the browser page below. +![Hosted Web API URL](../images/code-web-app.jpeg) -![Hosted Web API URL](../images/Ms-Sql-data.png) +### Connecting the Pivot Table to a Microsoft SQL database using the Web API service -### Connecting the Pivot Table to a Microsoft SQL using the Web API service +This section explains how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to Microsoft SQL data retrieved via the Web API service. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 1: Set up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -**2.** Map the hosted Web API's URL link `https://localhost:7139/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of Microsoft SQL data into instances of your model data class (aka, TValue="ProductDetails") while bound to the pivot table. +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:7139/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property deserialize Microsoft SQL data into instances of your model data class (e.g., `TValue="OrderDetails"`) for binding to the Pivot Table. + +#### Step 3: Define the Pivot Table report +1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management. ```cshtml @using Syncfusion.Blazor.PivotView @@ -194,7 +242,7 @@ When you run the application, the resultant pivot table will look like this. - + @@ -210,9 +258,12 @@ When you run the application, the resultant pivot table will look like this. } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the Microsoft SQL data fetched via the Web API, structured according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with Microsoft SQL data](../images/blazor-pivottable-Ms-SQL-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-SQL-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a Microsoft SQL using the Web API service. \ No newline at end of file +### Additional resources +Explore a complete example of the Blazor Pivot Table integrated with an ASP.NET Core Web application to fetch data from a Microsoft SQL database in this [GitHub repository](https://github.com/SyncfusionExamples/aspnetcore-bind-SQL-database-to-pivot-table). \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/mongodb.md b/blazor/pivot-table/connecting-to-data-source/mongodb.md index e7270f05ea..e43bab03b0 100644 --- a/blazor/pivot-table/connecting-to-data-source/mongodb.md +++ b/blazor/pivot-table/connecting-to-data-source/mongodb.md @@ -1,24 +1,39 @@ --- +layout: post title: "MongoDB Data Binding in Blazor Pivot Table Component | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a MongoDB in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect a MongoDB database to the Syncfusion Blazor Pivot Table using the MongoDB.Driver library." +platform: Blazor +documentation: ug --- -# MongoDB Data Binding +# MongoDB Data Binding in Blazor Pivot Table Component -This section describes how to use [MongoDB driver](https://www.nuget.org/packages/MongoDB.Driver) to retrieve data from a MongoDB and bind it to the Blazor Pivot Table. +This guide explains how to connect a MongoDB database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) library. It covers two methods: directly retrieving and binding data to the Pivot Table, and using a Web API service to fetch and display MongoDB data. ## Connecting a MongoDB to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section describes how to connect the Blazor Pivot Table to a MongoDB database by directly retrieving data using the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) library. -**2.** To connect a MongoDB using the MongoDB driver in our application, we need to install the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **MongoDB.Driver** and install it. +### Step 1: Set Up a Blazor Pivot Table +1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "MongoDB.Driver" to the project](../images/mongodb-nuget-package-install.png) +### Step 2: Install the MongoDB.Driver NuGet Package +1. Open the **NuGet Package Manager** in your project solution. +2. Search for the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) package and install it to enable MongoDB connectivity. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to MongoDB. You can get the specified database by using the **MongoClient** and its **GetDatabase** method. Following that, the **GetCollection** method of the **IMongoDatabase** is used to retrieve the desired collection from the database. Then, using a **BsonDocument** instance, populate the data collection from the **IMongoCollection** into a list using the **Find** method. +![Add the NuGet package MongoDB.Driver to the project](../images/mongodb-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the MongoDB data. +### Step 3: Connect to MongoDB +1. In the **Index.razor** file, under the `OnInitialized` method, use the **MongoClient** class to connect to the MongoDB database with a valid connection string. +2. Access the desired database using the **GetDatabase** method and retrieve the target collection with the **GetCollection** method. +3. Use the **Find** method with a **BsonDocument** to fetch data from the collection and convert it to a list. + +### Step 4: Bind Data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table report by defining fields in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. + +The following code connects to a MongoDB database, retrieves data, and binds it to the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -73,25 +88,41 @@ This section describes how to use [MongoDB driver](https://www.nuget.org/package } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the MongoDB data, organized according to the defined report. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with MongoDB data](../images/blazor-pivottable-mongodb-databinding.png) ## Connecting a MongoDB to a Syncfusion® Blazor Pivot Table via Web API service -### Create a Web API service to fetch MongoDB data +This section explains how to create a Web API service to fetch data from a MongoDB database and connect it to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver). + +### Create a Web API Service to Fetch MongoDB Data + +Follow these steps to set up a Web API service that retrieves MongoDB data for the Pivot Table. -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +#### Step 1: Create an ASP.NET Core Web Application +1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. ![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**2.** To connect a MongoDB using the **MongoDB driver** in our application, we need to install the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **MongoDB.Driver** and install it. +#### Step 2: Install the MongoDB.Driver NuGet Package +1. Open the **NuGet Package Manager** in the project solution. +2. Search for and install the [MongoDB.Driver](https://www.nuget.org/packages/MongoDB.Driver) package to enable MongoDB connectivity. -![Add the NuGet package "MongoDB.Driver" to the project](../images/mongodb-nuget-package-install-in-web-service-app.png) +![Add the NuGet package MongoDB.Driver to the project](../images/mongodb-nuget-package-install-in-web-service-app.png) -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 3: Create a Web API Controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller manages data communication between the MongoDB database and the Pivot Table. -**4.** In the Web API controller (aka, PivotController), **MongoClient** helps to connect the MongoDB server and retrieve database via **GetDatabase** method. Following that, the **GetCollection** method of the **IMongoDatabase** is used to retrieve the desired collection from the database. Then, using a **BsonDocument** instance, populate the data collection from the **IMongoCollection** into a list using the **Find** method. +#### Step 4: Connect to MongoDB and Retrieve Data +1. In the **PivotController.cs** file, use **MongoClient** to connect to the MongoDB database with a valid connection string. +2. Access the database with **GetDatabase** and the target collection with **GetCollection**. +3. Retrieve data using the **Find** method and convert it to a list. ```csharp using Microsoft.AspNetCore.Mvc; @@ -129,7 +160,13 @@ namespace MyWebService.Controllers } ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **FetchMongoDbResult** method is used to retrieve the MongoDB data as a list, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize Data to JSON +1. In the **PivotController.cs** file, create a **Get** method that calls **FetchMongoDbResult** to retrieve MongoDB data. +2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the data into JSON format. + +> Ensure the **Newtonsoft.Json** NuGet package is installed in your project. + +The following code sets up the Web API controller to fetch and serialize MongoDB data. ```csharp using Microsoft.AspNetCore.Mvc; @@ -172,25 +209,40 @@ namespace MyWebService.Controllers } ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:44346`. +#### Step 6: Run the Web API Service +1. Build and run the application. +2. The application will be hosted at `https://localhost:44346/` (the port number may vary). -**7.** Finally, the retrieved data from MongoDB which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:44346/Pivot`, as shown in the browser page below. +#### Step 7: Verify the JSON Data +1. Access the Web API endpoint at `https://localhost:44346/Pivot` to view the JSON data retrieved from MongoDB. +2. The browser will display the JSON data, as shown below. ![Hosted Web API URL](../images/mongodb-data.png) -### Connecting the Pivot Table to a MongoDB using the Web API service +### Connecting the Pivot Table to MongoDB Using the Web API Service + +This section explains how to connect the Blazor Pivot Table to MongoDB data retrieved via the Web API service. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 1: Set Up a Blazor Pivot Table +1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide. -**2.** Map the hosted Web API's URL link `https://localhost:44346/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of MongoDB data into instances of your model data class (aka, TValue="ProductDetails") while bound to the pivot table. +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:44346/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property facilitates deserializing MongoDB data into instances of your model data class (i.e., TValue="ProductDetails") for binding to the Pivot Table. + +#### Step 3: Define the Pivot Table Report +1. Configure the Pivot Table report by defining fields in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management. + +The following code connects the Pivot Table to the Web API and configures the report. ```cshtml @using Syncfusion.Blazor.PivotView - + - + @@ -210,7 +262,7 @@ namespace MyWebService.Controllers @code { public class ProductDetails - { + { public ObjectId _id { get; set; } public int Sold { get; set; } public double Amount { get; set; } @@ -222,9 +274,12 @@ namespace MyWebService.Controllers } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the MongoDB data fetched via the Web API, structured according to the defined report. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with MongoDB data](../images/blazor-pivottable-mongodb-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-MongoDB-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a MongoDB using the Web API service. \ No newline at end of file +### Additional Resources +Explore a complete example of the Blazor Pivot Table integrated with MongoDB using a Web API service in this [GitHub repository](https://github.com/SyncfusionExamples/how-to-bind-MongoDB-to-pivot-table/tree/master/Blazor). \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/mysql.md b/blazor/pivot-table/connecting-to-data-source/mysql.md index b3f1bfe690..b10aa27e29 100644 --- a/blazor/pivot-table/connecting-to-data-source/mysql.md +++ b/blazor/pivot-table/connecting-to-data-source/mysql.md @@ -1,24 +1,41 @@ --- +layout: post title: "MySQL Data Binding in Blazor Pivot Table Component | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a MySQL in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect a MySQL database to the Syncfusion Blazor Pivot Table using the MySql.Data library." +platform: Blazor +documentation: ug --- -# MySQL Data Binding +# MySQL Data Binding in Blazor Pivot Table Component -This section describes how to use [MySQL data](https://www.nuget.org/packages/MySql.Data) to retrieve data from a MySQL server and bind it to the Blazor Pivot Table. +This guide explains how to connect a MySQL database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display MySQL data. -## Connecting a MySQL database to a Syncfusion® Blazor Pivot Table +## Connecting a MySQL Database to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to a MySQL database by directly retrieving data using the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library. -**2.** To connect a MySQL using the MySQL driver in our application, we need to install the [MySQL.Data](https://www.nuget.org/packages/MySql.Data) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **MySQL.Data** and install it. +### Step 1: Set Up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "MySQL.Data" to the project](../images/MySQL-nuget-package-install-in-web-service-app.png) +### Step 2: Install the MySql.Data NuGet Package +1. Open the **NuGet Package Manager** in your project solution and search for **MySql.Data**. +2. Install the **MySql.Data** package to add MySQL database support. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to MySQL. **MySqlConnection** helps to connect the MySQL database. Next, using **MySqlCommand** and **MySqlDataAdapter** you can process the desired query string and retrieve data from the MySQL database. The **Fill** method of the **MySqlDataAdapter** is used to populate the retrieved data into a **DataTable**, which is then converted to a List. +![Add the NuGet package MySql.Data to the project](../images/MySQL-nuget-package-install-in-web-service-app.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the MySQL data. +### Step 3: Connect to MySQL +In the **Index.razor** file, under the `OnInitialized` method, use the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library to connect to a MySQL database and retrieve data for the Pivot Table. + +1. **Establish Connection**: Use **MySqlConnection** with a valid connection string (e.g., `Server=localhost;Database=mydb;Uid=myuser;Pwd=mypassword;`) to connect to the MySQL database. +2. **Query and Fetch Data**: Execute a SQL query (e.g., `SELECT * FROM orders`) using **MySqlCommand** to retrieve data for the Pivot Table. +3. **Structure the Data**: Use **MySqlDataAdapter**'s **Fill** method to populate the query results into a **DataTable**, which is then converted to a list for binding to the Pivot Table. + +### Step 4: Bind Data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. + +The following code connects to a MySQL database, retrieves data, and binds it to the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -80,25 +97,42 @@ This section describes how to use [MySQL data](https://www.nuget.org/packages/My } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the MySQL data, organized according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with MySQL data](../images/blazor-pivottable-MySQL-databinding.png) ## Connecting a MySQL to a Syncfusion® Blazor Pivot Table via Web API service -### Create a Web API service to fetch MySQL data +This section explains how to create a Web API service to fetch data from a MySQL database and connect it to the Blazor Pivot Table. + +### Create a Web API Service to Fetch MySQL Data -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +Follow these steps to set up a Web API service that retrieves MySQL data for the Pivot Table. + +#### Step 1: Create an ASP.NET Core Web Application +1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. ![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**2.** To connect a MySQL using the **MySQL data** in our application, we need to install the [MySQL.Data](https://www.nuget.org/packages/MySQL.Driver) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **MySQL.Data** and install it. +#### Step 2: Install the MySql.Data NuGet Package +1. Install the [MySql.Data](https://www.nuget.org/packages/MySql.Data) package using the **NuGet Package Manager** to enable MySQL connectivity. + +![Add the NuGet package MySql.Data to the project](../images/MySQL-nuget-package-install-in-web-service-app.png) -![Add the NuGet package "MySQL.Data" to the project](../images/MySQL-nuget-package-install-in-web-service-app.png) +#### Step 3: Create a Web API Controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller manages data communication between the MySQL database and the Pivot Table. -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 4: Connect to MySQL and Retrieve Data +In the **PivotController.cs** file, use the [MySql.Data](https://www.nuget.org/packages/MySql.Data) library to connect to a MySQL database and fetch data for the Pivot Table. -**4.** In the Web API controller (aka, PivotController), ***MySqlConnection** helps to connect the MySQL database. Next, using **MySqlCommand** and **MySqlDataAdapter** you can process the desired query string and retrieve data from the MySQL database. The **Fill** method of the **MySqlDataAdapter** is used to populate the retrieved data into a **DataTable** as shown in the following code snippet. +1. **Establish Connection**: Use **MySqlConnection** with a valid connection string to access the MySQL database. +2. **Fetch Data**: Run a SQL query (e.g., `SELECT * FROM orders`) using **MySqlCommand** to retrieve data. +3. **Prepare Data**: Use **MySqlDataAdapter**'s **Fill** method to store the query results in a **DataTable** for JSON serialization. ```csharp using Microsoft.AspNetCore.Mvc; @@ -129,7 +163,13 @@ When you run the application, the resultant pivot table will look like this. ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **GetMySQLResult** method is used to retrieve the MySQL data as a list, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize Data to JSON +1. In the **PivotController.cs** file, create a **Get** method that calls **FetchMySQLResult** to retrieve MySQL data. +2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the **DataTable** into JSON format. + +> Ensure the **Newtonsoft.Json** NuGet package is installed in your project. + +The following code sets up the Web API controller to fetch and serialize MySQL data. ```csharp using Microsoft.AspNetCore.Mvc; @@ -166,24 +206,39 @@ When you run the application, the resultant pivot table will look like this. ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:7146`. +#### Step 6: Run the Web API Service +1. Build and run the application. +2. The application will be hosted at `https://localhost:7146/` (the port number may vary). -**7.** Finally, the retrieved data from MySQL database which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:7146/Pivot`, as shown in the browser page below. +#### Step 7: Verify the JSON Data +1. Access the Web API endpoint at `https://localhost:7146/Pivot` to view the JSON data retrieved from MySQL. +2. The browser will display the JSON data, as shown below. ![Hosted Web API URL](../images/mysql-data.png) -### Connecting the Pivot Table to a MySQL using the Web API service +### Connecting the Pivot Table to MySQL Using the Web API Service + +This section explains how to connect the Blazor Pivot Table to MySQL data retrieved via the Web API service. + +#### Step 1: Set Up a Blazor Pivot Table +1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:7146/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property facilitates deserializing MySQL data into instances of your model data class (i.e., TValue="OrderDetails") for binding to the Pivot Table. -**2.** Map the hosted Web API's URL link `https://localhost:7146/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of MySQL data into instances of your model data class (aka, TValue="ProductDetails") while bound to the pivot table. +#### Step 3: Define the Pivot Table Report +1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management. + +The following code connects the Pivot Table to the Web API and configures the report. ```cshtml @using Syncfusion.Blazor.PivotView - - + + @@ -211,9 +266,12 @@ When you run the application, the resultant pivot table will look like this. } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the MySQL data fetched via the Web API, structured according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with MySQL data](../images/blazor-pivottable-MySQL-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-MySQL-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a MySQL using the Web API service. +### Additional Resources +Explore a complete example of the Blazor Pivot Table integrated with MySQL using a Web API service in this [GitHub repository](https://github.com/SyncfusionExamples/web-bind-MySQL-database-to-pivot-table/tree/master/Blazor). \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/oracledb.md b/blazor/pivot-table/connecting-to-data-source/oracledb.md index f038de1bc8..000a00a9b7 100644 --- a/blazor/pivot-table/connecting-to-data-source/oracledb.md +++ b/blazor/pivot-table/connecting-to-data-source/oracledb.md @@ -1,24 +1,39 @@ --- -title: "Oracle database Data Binding in Blazor Pivot Table Component | Syncfusion" +layout: post +title: "Oracle Data Binding in Blazor Pivot Table | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a Oracle database in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect an Oracle database to the Syncfusion Blazor Pivot Table using the Oracle.ManagedDataAccess library." +platform: Blazor +documentation: ug --- -# Oracle Data Binding +# Oracle Data Binding in Blazor Pivot Table Component -This section describes how to use [Oracle ManagedDataAccess Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core) to retrieve data from a Oracle database and bind it to the Blazor Pivot Table. +This guide explains how to connect an Oracle database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [Oracle.ManagedDataAccess](https://www.nuget.org/packages/Oracle.ManagedDataAccess) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display Oracle data. -## Connecting a Oracle database to a Syncfusion® Blazor Pivot Table +## Connecting an Oracle database to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to an Oracle database by directly retrieving data using the [Oracle.ManagedDataAccess](https://www.nuget.org/packages/Oracle.ManagedDataAccess) library. -**2.** To connect a Oracle Server using the Oracle ManagedDataAccess Core in our application, we need to install the [Oracle.ManagedDataAccess.Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Oracle.ManagedDataAccess.Core** and install it. +### Step 1: Set up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "Oracle.ManagedDataAccess.Core" to the project](../images/oracledb-nuget-package-install.png) +### Step 2: Install the Oracle.ManagedDataAccess NuGet package +1. Open the **NuGet Package Manager** in your project solution and search for [Oracle.ManagedDataAccess.Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core/). +2. Install the [Oracle.ManagedDataAccess.Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core/) package to add Oracle support. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to Oracle database. You can get the specified database by using the **OracleConnection**. Following that, the **OracleCommand** is used to retrieve the desired collection from the database. Then populate the data collection from the **OracleCommand** into a list using the **Read** method of **OracleDataReader**. +![Add the NuGet package Oracle.ManagedDataAccess.Core to the project](../images/oracledb-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the Oracle database data. +### Step 3: Connect to the Oracle database +In the **Index.razor** file, under the `OnInitialized` method, use the [Oracle.ManagedDataAccess](https://www.nuget.org/packages/Oracle.ManagedDataAccess) library to connect to an Oracle database and retrieve data for the Pivot Table. + +1. **Establish connection**: Use **OracleConnection** with a valid connection string, for example, `Data Source=localhost;User Id=myuser;Password=mypassword;`, to connect to the Oracle database. +2. **Query and fetch data**: Execute a SQL query, such as `SELECT * FROM EMPLOYEES`, using **OracleCommand** to retrieve data for the Pivot Table. +3. **Structure the data**: Use **OracleDataAdapter**'s **Fill** method to populate the query results into a **DataTable**, which is then converted to a list for binding to the Pivot Table. + +### Step 4: Bind data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. ```cshtml @using System.Data @@ -91,25 +106,42 @@ This section describes how to use [Oracle ManagedDataAccess Core](https://www.nu } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the Oracle data, organized according to the defined configuration. +3. The resulting Pivot Table will look like this: -![Blazor Pivot Table bound with OracleDB data](../images/blazor-pivottable-oracledb-databinding.png) +![Blazor Pivot Table bound with Oracle data](../images/blazor-pivottable-oracledb-databinding.png) -## Connecting a Oracle database to a Syncfusion® Blazor Pivot Table via Web API service +## Connecting an Oracle database to a Syncfusion® Blazor Pivot Table via Web API service + +This section explains how to create a Web API service to fetch data from an Oracle database and connect it to the Blazor Pivot Table. ### Create a Web API service to fetch Oracle data -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +Follow these steps to set up a Web API service that retrieves Oracle data for the Pivot Table. + +#### Step 1: Create an ASP.NET Core Web application +1. Open Visual Studio and create a new **ASP.NET Core Web App** project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. -![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) +![Creating an ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**2.** To connect a Oracle database using the **Oracle ManagedDataAccess Core** in our application, we need to install the [Oracle.ManagedDataAccess.Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Oracle.ManagedDataAccess.Core** and install it. +#### Step 2: Install the Oracle NuGet package +1. Install the [Oracle.ManagedDataAccess.Core](https://www.nuget.org/packages/Oracle.ManagedDataAccess.Core/) package using the **NuGet Package Manager** to enable Oracle connectivity. -![Add the NuGet package "Oracle.ManagedDataAccess.Core" to the project](../images/oracledb-nuget-package-install-in-web-service-app.png) +![Add the NuGet package Oracle.ManagedDataAccess.Core to the project](../images/oracledb-nuget-package-install-in-web-service-app.png) -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 3: Create a Web API controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller manages data communication between the Oracle database and the Pivot Table. -**4.** In the Web API controller (aka, PivotController), **OracleConnection** helps to connect the Oracle database. Next, using **OracleCommand** and **OracleDataAdapter** you can process the desired query string and retrieve data from the Oracle database. The **Fill** method of the **OracleDataAdapter** is used to populate the retrieved data into a **DataTable** as shown in the following code snippet. +#### Step 4: Connect to Oracle and retrieve data +In the **PivotController.cs** file, use the [Oracle.ManagedDataAccess](https://www.nuget.org/packages/Oracle.ManagedDataAccess) library to connect to an Oracle database and fetch data for the Pivot Table. + +1. **Establish connection**: Use **OracleConnection** with a valid connection string to access the Oracle database. +2. **Fetch data**: Run a SQL query, such as `SELECT * FROM EMPLOYEES`, using **OracleCommand** to retrieve data. +3. **Prepare data**: Use **OracleDataAdapter**'s **Fill** method to store the query results in a **DataTable** for JSON serialization. ```csharp using Microsoft.AspNetCore.Mvc; @@ -140,7 +172,11 @@ namespace MyWebService.Controllers } ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **FetchOracleDbResult** method is used to retrieve the Oracle data as a DataTable, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize data to JSON +1. In the **PivotController.cs** file, create a **Get** method that calls **FetchOracleResult** to retrieve Oracle data. +2. Use **JsonConvert.SerializeObject** from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the **DataTable** into JSON format. + +> Ensure the **Newtonsoft.Json** NuGet package is installed in your project. ```csharp using Microsoft.AspNetCore.Mvc; @@ -177,17 +213,30 @@ namespace MyWebService.Controllers } ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:44346`. +#### Step 6: Run the Web API service +1. Build and run the application. +2. The application will be hosted at `https://localhost:44346/` (the port number may vary). -**7.** Finally, the retrieved data from Oracle database which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:44346/Pivot`, as shown in the browser page below. +#### Step 7: Verify the JSON data +1. Access the Web API endpoint at `https://localhost:44346/Pivot` to view the JSON data retrieved from Oracle. +2. The browser will display the JSON data, as shown below. -![Hosted Web API URL](../images/oracledb-data.png) +![Hosted Web API URL](../images/oracle-code-web-app.png) ### Connecting the Pivot Table to a Oracle database using the Web API service -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section explains how to connect the Blazor Pivot Table to Oracle data retrieved via the Web API service. + +#### Step 1: Set up a Blazor Pivot Table +1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide. -**2.** Map the hosted Web API's URL link `https://localhost:44346/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of Oracle database data into instances of your model data class (aka, TValue="EmployeeDetails") while bound to the pivot table. +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:44346/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property deserialize Oracle data into instances of your model data class (e.g., TValue="EmployeeDetails") for binding to the Pivot Table. + +#### Step 3: Define the Pivot Table report +1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to **true** for interactive field management. ```cshtml @using Syncfusion.Blazor.PivotView @@ -227,9 +276,12 @@ namespace MyWebService.Controllers } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the Oracle data fetched via the Web API, structured according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with OracleDB data](../images/blazor-pivottable-oracledb-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-Oracle-database-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a Oracle database using the Web API service. \ No newline at end of file +### Additional resources +Explore a complete example of the Blazor Pivot Table integrated with an ASP.NET Core Web application to fetch data from an Oracle database in this [GitHub repository](https://github.com/SyncfusionExamples/how-to-bind-Oracle-database-to-pivot-table/tree/master/Blazor). \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/postgreSQL.md b/blazor/pivot-table/connecting-to-data-source/postgreSQL.md index 7f28725fa7..8a425dd950 100644 --- a/blazor/pivot-table/connecting-to-data-source/postgreSQL.md +++ b/blazor/pivot-table/connecting-to-data-source/postgreSQL.md @@ -1,24 +1,39 @@ --- +layout: post title: "PostgreSQL Data Binding in Blazor Pivot Table Component | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a PostgreSQL database in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect a PostgreSQL database to the Syncfusion Blazor Pivot Table using the Npgsql.EntityFrameworkCore.PostgreSQL library." +platform: Blazor +documentation: ug --- -# PostgreSQL Data Binding +# PostgreSQL Data Binding in Blazor Pivot Table Component -This section describes how to use [Npgsql EntityFrameworkCore PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) to retrieve data from a PostgreSQL database and bind it to the Blazor Pivot Table. +This guide explains how to connect a PostgreSQL database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) library. It covers two methods: directly retrieving and binding data to the Pivot Table and using a Web API service to fetch and display PostgreSQL data. ## Connecting a PostgreSQL to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section explains how to connect a PostgreSQL database to the Blazor Pivot Table by directly retrieving data using the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) library. -**2.** To connect a PostgreSQL using the Npgsql EntityFrameworkCore PostgreSQL in our application, we need to install the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Npgsql.EntityFrameworkCore.PostgreSQL** and install it. +### Step 1: Set Up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "Npgsql.EntityFrameworkCore.PostgreSQL" to the project](../images/postgreSQL-nuget-package-install.png) +### Step 2: Install the Npgsql.EntityFrameworkCore.PostgreSQL NuGet Package +1. Open the **NuGet Package Manager** in your project solution and search for **Npgsql.EntityFrameworkCore.PostgreSQL**. +2. Install the **Npgsql.EntityFrameworkCore.PostgreSQL** package to add PostgreSQL support. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to PostgreSQL database. You can get the specified database by using the **NpgsqlConnection**. Following that, the **NpgsqlCommand** is used to retrieve the desired collection from the database. Then populate the data collection from the **NpgsqlCommand** into a list using the **Read** method of **NpgsqlDataReader**. +![Installing the Npgsql.EntityFrameworkCore.PostgreSQL NuGet package](../images/postgreSQL-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the PostgreSQL data. +### Step 3: Connect to the PostgreSQL Database +In the **Index.razor** file, under the `OnInitialized` method, use the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) library to connect to the PostgreSQL database and retrieve data. + +1. **Establish Connection**: Use `NpgsqlConnection` with a valid connection string (e.g., `Server=localhost;Database=mydb;User Id=myuser;Password=mypassword;`) to connect to the PostgreSQL database. +2. **Query and Fetch Data**: Execute a SQL query, such as `SELECT * FROM apxtimestamp`, using `NpgsqlCommand` to retrieve data for the Pivot Table. +3. **Structure Data**: Use `NpgsqlDataReader` to read the query results and populate them into a list for binding to the Pivot Table. + +### Step 4: Bind Data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. ```cshtml @using System.Data @@ -84,25 +99,42 @@ This section describes how to use [Npgsql EntityFrameworkCore PostgreSQL](https: } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the PostgreSQL data, organized based on the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with PostgreSQL data](../images/blazor-pivottable-postgreSQL-databinding.png) -## Connecting a PostgreSQL to a Syncfusion® Blazor Pivot Table via Web API service +## Connecting a PostgreSQL Database to a Syncfusion® Blazor Pivot Table via Web API Service + +This section explains how to create a Web API service to fetch data from a PostgreSQL database and connect it to the Blazor Pivot Table. ### Create a Web API service to fetch PostgreSQL data -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +Follow these steps to set up a Web API service that retrieves PostgreSQL data for the Pivot Table. + +#### Step 1: Create an ASP.NET Core Web Application +1. Open Visual Studio and create a new ASP.NET Core Web App project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. + +![Creating an ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) +#### Step 2: Install the Npgsql NuGet Package +1. Install the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) package using the **NuGet Package Manager** to enable PostgreSQL connectivity. -**2.** To connect a PostgreSQL using the **Npgsql EntityFrameworkCore PostgreSQL** in our application, we need to install the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Npgsql.EntityFrameworkCore.PostgreSQL** and install it. +![Installing the Npgsql.EntityFrameworkCore.PostgreSQL NuGet package](../images/postgreSQL-nuget-package-install-in-web-service-app.png) -![Add the NuGet package "Npgsql.EntityFrameworkCore.PostgreSQL" to the project](../images/postgreSQL-nuget-package-install-in-web-service-app.png) +#### Step 3: Create a Web API Controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller handles data communication between the PostgreSQL database and the Pivot Table. -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 4: Connect to PostgreSQL and Retrieve Data +In the **PivotController.cs** file, use the [Npgsql.EntityFrameworkCore.PostgreSQL](https://www.nuget.org/packages/Npgsql.EntityFrameworkCore.PostgreSQL) library to connect to the PostgreSQL database and fetch data. -**4.** In the Web API controller (aka, PivotController), **NpgsqlConnection** helps to connect the PostgreSQL database. Next, using **NpgsqlCommand** and **NpgsqlDataAdapter** you can process the desired query string and retrieve data from the PostgreSQL database. The **Fill** method of the **NpgsqlDataAdapter** is used to populate the retrieved data into a **DataTable** as shown in the following code snippet. +1. **Establish Connection**: Use `NpgsqlConnection` with a valid connection string to access the PostgreSQL database. +2. **Fetch Data**: Execute a SQL query, such as `SELECT * FROM apxtimestamp`, using `NpgsqlCommand` to retrieve data. +3. **Prepare Data**: Use `NpgsqlDataAdapter`’s `Fill` method to store the query results in a `DataTable` for JSON serialization. ```csharp using Microsoft.AspNetCore.Mvc; @@ -132,7 +164,11 @@ namespace MyWebService.Controllers } ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **GetPostgreSQLResult** method is used to retrieve the PostgreSQL data as a DataTable, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize Data to JSON +1. In the **PivotController.cs** file, create a `Get` method that calls `GetPostgreSQLResult` to retrieve PostgreSQL data. +2. Use `JsonConvert.SerializeObject` from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the `DataTable` into JSON format. + +> Ensure the **Newtonsoft.Json** NuGet package is installed in your project. ```csharp using Microsoft.AspNetCore.Mvc; @@ -168,17 +204,30 @@ namespace MyWebService.Controllers } ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:44378`. +#### Step 6: Run the Web API Service +1. Build and run the application. +2. The application will be hosted at `https://localhost:44378/` (the port number may vary). + +#### Step 7: Verify the JSON Data +1. Access the Web API endpoint at `https://localhost:44378/Pivot` to view the JSON data retrieved from PostgreSQL. +2. The browser will display the JSON data, as shown below. -**7.** Finally, the retrieved data from PostgreSQL which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:44378/Pivot`, as shown in the browser page below. +![Hosted Web API URL](../images/postgresql_data.png) -![Hosted Web API URL](../images/postgreSQL-data.png) +### Connecting the Pivot Table to a PostgreSQL Database Using the Web API Service -### Connecting the Pivot Table to a PostgreSQL using the Web API service +This section explains how to connect the Blazor Pivot Table to PostgreSQL data retrieved via the Web API service. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 1: Set Up a Blazor Pivot Table +1. Create a Blazor Pivot Table by following the [Getting Started](../getting-started) guide. -**2.** Map the hosted Web API's URL link `https://localhost:44378/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of PostgreSQL data into instances of your model data class (aka, TValue="PostgreSQLService") while bound to the pivot table. +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:44378/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property deserialize PostgreSQL data into instances of your model data class (e.g., `TValue="PostgreSQLService"`) for binding to the Pivot Table. + +#### Step 3: Define the Pivot Table Report +1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to `true` for interactive field management. ```cshtml @using Syncfusion.Blazor.PivotView @@ -215,9 +264,12 @@ namespace MyWebService.Controllers } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table will display the PostgreSQL data fetched via the Web API, structured according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with PostgreSQL data](../images/blazor-pivottable-mongodb-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-PostgreSQL-database-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a PostgreSQL using the Web API service. \ No newline at end of file +### Additional Resources +Explore a complete example of the Blazor Pivot Table integrated with an ASP.NET Core Web application to fetch data from a PostgreSQL database in this [GitHub repository](https://github.com/SyncfusionExamples/how-to-bind-PostgreSQL-database-to-pivot-table/tree/master/Blazor). \ No newline at end of file diff --git a/blazor/pivot-table/connecting-to-data-source/snowflakedb.md b/blazor/pivot-table/connecting-to-data-source/snowflakedb.md index 4a051c8778..b57d16bd5f 100644 --- a/blazor/pivot-table/connecting-to-data-source/snowflakedb.md +++ b/blazor/pivot-table/connecting-to-data-source/snowflakedb.md @@ -1,24 +1,39 @@ --- +layout: post title: "Snowflake Data Binding in Blazor Pivot Table Component | Syncfusion" component: "Pivot Table" -description: "Learn how to bind data from a Snowflake database in the Syncfusion Blazor Pivot Table and more." +description: "Learn how to connect a Snowflake database to the Syncfusion Blazor Pivot Table using the Snowflake.Data NuGet package." +platform: Blazor +documentation: ug --- -# Snowflake Data Binding +# Snowflake Data Binding in Blazor Pivot Table Component -This section describes how to use [Snowflake data](https://www.nuget.org/packages/Snowflake.Data) to retrieve data from a Snowflake database and bind it to the Blazor Pivot Table. +This guide explains how to connect a Snowflake database to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) using the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) NuGet package. It covers two methods: directly retrieving and binding Snowflake data to the Pivot Table and using a Web API service to fetch and display Snowflake data. ## Connecting a Snowflake to a Syncfusion® Blazor Pivot Table -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +This section describes how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to a Snowflake database by directly retrieving data using the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) library. -**2.** To connect a Snowflake database using the Snowflake data provider in our application, we need to install the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Snowflake.Data** and install it. +### Step 1: Set up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -![Add the NuGet package "Snowflake.Data" to the project](../images/Snowflake-nuget-package-install.png) +### Step 2: Install the Snowflake.Data NuGet Package +1. Open the **NuGet Package Manager** in your project solution and search for [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data/). +2. Install the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data/) package to add Snowflake support. -**3.** Next, in the **Index.razor** page, under the **OnInitialized** method, connect to Snowflake database. You can get the specified database by using the **SnowflakeDbConnection**. Following that, the **SnowflakeDbDataAdapter** is used to retrieve the desired collection from the database. The **Fill** method of the **SnowflakeDbDataAdapter** is used to populate the retrieved data into a **DataTable**, which is then convert into a list. +![Add the NuGet package Snowflake.Data to the project](../images/Snowflake-nuget-package-install.png) -**4.** Finally, bind the list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html?&_ga=2.187712492.558891908.1675655056-779654442.1675225237#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.112723776.558891908.1675655056-779654442.1675225237) and configure the report to use the Snowflake data. +### Step 3: Connect to the Snowflake Database +In the **Index.razor** file, under the `OnInitialized` method, use the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) library to connect to the Snowflake database and retrieve data for the Pivot Table. + +1. **Establish connection**: Use `SnowflakeDbConnection` with a valid connection string, such as `account=myaccount;user=myuser;password=mypassword;db=mydb;schema=myschema;`, to connect to the Snowflake database. +2. **Query and fetch data**: Execute a SQL query, such as `SELECT * FROM CALL_CENTER`, using `SnowflakeDbDataAdapter` to retrieve data. +3. **Structure the data**: Use the `Fill` method of `SnowflakeDbDataAdapter` to populate the query results into a `DataTable`, which is then converted to a list for binding to the Pivot Table. + +### Step 4: Bind Data to the Pivot Table +1. Assign the retrieved list to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property of the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) to organize and format the data. ```cshtml @using Syncfusion.Blazor.PivotView @@ -84,25 +99,43 @@ This section describes how to use [Snowflake data](https://www.nuget.org/package } ``` -When you run the application, the resultant pivot table will look like this. +### Step 5: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table displays the Snowflake data, organized according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with Snowflake data](../images/blazor-pivottable-Snowflake-databinding.png) ## Connecting a Snowflake database to a Syncfusion® Blazor Pivot Table via Web API service -### Create a Web API service to fetch Snowflake data +This section explains how to create a Web API service to fetch data from a Snowflake database and connect it to the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table). + +### Create a Web API Service to Fetch Snowflake Data -**1.** Open Visual Studio and create an ASP.NET Core Web App project type, naming it **MyWebService**. To create an ASP.NET Core Web application, follow the documentation [link](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022). +Follow these steps to set up a Web API service that retrieves Snowflake data for the Pivot Table. + +#### Step 1: Create an ASP.NET Core Web Application +1. Open Visual Studio and create a new ASP.NET Core Web App project named **MyWebService**. +2. Refer to the [Microsoft documentation](https://learn.microsoft.com/en-us/visualstudio/get-started/csharp/tutorial-aspnet-core?view=vs-2022) for detailed setup instructions. ![Create ASP.NET Core Web App project](../images/azure-asp-core-web-service-create.png) -**2.** To connect a Snowflake database using the **Snowflake.Data** in our application, we need to install the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Snowflake.Data** and install it. +#### Step 2: Install the Snowflake.Data NuGet Package +1. Open the NuGet Package Manager in your project solution. +2. Search for and install the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) package to enable Snowflake connectivity. + +![Add the NuGet package Snowflake.Data to the project](../images/Snowflake-nuget-package-install-in-web-service-app.png) -![Add the NuGet package "Snowflake.Data" to the project](../images/Snowflake-nuget-package-install-in-web-service-app.png) +#### Step 3: Create a Web API Controller +1. In the **Controllers** folder, create a new Web API controller named **PivotController.cs**. +2. This controller manages data communication between the Snowflake database and the Pivot Table. -**3.** Create a Web API controller (aka, PivotController.cs) file under **Controllers** folder that helps to establish data communication with the Pivot Table. +#### Step 4: Connect to Snowflake and Retrieve Data +In the **PivotController.cs** file, use the [Snowflake.Data](https://www.nuget.org/packages/Snowflake.Data) library to connect to the Snowflake database and fetch data. -**4.** In the Web API controller (aka, PivotController), **SnowflakeDbConnection** helps to connect the Snowflake database. Next, using **SnowflakeDbDataAdapter** you can process the desired query string and retrieve data from the Snowflake database. The **Fill** method of the **SnowflakeDbDataAdapter** is used to populate the retrieved data into a **DataTable** as shown in the following code snippet. +1. **Establish connection**: Use `SnowflakeDbConnection` with a valid connection string to access the Snowflake database. +2. **Fetch data**: Run a SQL query, such as `SELECT * FROM CALL_CENTER`, using `SnowflakeDbDataAdapter` to retrieve data. +3. **Prepare data**: Use the `Fill` method of `SnowflakeDbDataAdapter` to store the query results in a `DataTable` for JSON serialization. ```csharp using Microsoft.AspNetCore.Mvc; @@ -134,7 +167,11 @@ namespace MyWebService.Controllers } ``` -**5.** In the **Get()** method of the **PivotController.cs** file, the **FetchSnowflakeResult** method is used to retrieve the Snowflake data as a DataTable, which is then serialized into JSON string using **JsonConvert.SerializeObject()**. +#### Step 5: Serialize Data to JSON +1. In the **PivotController.cs** file, create a `Get` method that calls `FetchSnowflakeResult` to retrieve Snowflake data. +2. Use `JsonConvert.SerializeObject` from the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) library to serialize the `DataTable` into JSON format. + +> Ensure the [Newtonsoft.Json](https://www.nuget.org/packages/Newtonsoft.Json) NuGet package is installed in your project. ```csharp using Microsoft.AspNetCore.Mvc; @@ -172,22 +209,35 @@ namespace MyWebService.Controllers } ``` -**6.** Run the application and it will be hosted within the URL `https://localhost:44378`. +#### Step 6: Run the Web API Service +1. Build and run the application. +2. The application will be hosted at `https://localhost:44378/` (the port number may vary). -**7.** Finally, the retrieved data from Snowflake database which is in the form of JSON can be found in the Web API controller available in the URL link `https://localhost:44378/Pivot`, as shown in the browser page below. +#### Step 7: Verify the JSON Data +1. Access the Web API endpoint at `https://localhost:44378/Pivot` to view the JSON data retrieved from the Snowflake database. +2. The browser will display the JSON data, as shown below. ![Hosted Web API URL](../images/Snowflake-data.png) -### Connecting the Pivot Table to a Snowflake database using the Web API service +### Connecting the Pivot Table to a Snowflake Database Using the Web API Service + +This section explains how to connect the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) to Snowflake data retrieved via the Web API service. + +#### Step 1: Set up a Blazor Pivot Table +1. Create a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) by following the [Getting Started](../getting-started) guide. -**1.** Create a simple Blazor Pivot Table by following the **"Getting Started"** documentation [link](../getting-started). +#### Step 2: Configure the Web API URL +1. In the **Index.razor** file, map the Web API URL (`https://localhost:44378/Pivot`) to the Pivot Table using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html). +2. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property deserialize Snowflake data into instances of your model data class (e.g., `TValue="SnowflakeService"`) for binding to the Pivot Table. -**2.** Map the hosted Web API's URL link `https://localhost:44378/Pivot` to the Pivot Table in **Index.razor** by using the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html?&_ga=2.200411303.844585580.1677740066-2135459383.1677740066#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DataSourceSettingsModel-1.html?_ga=2.200411303.844585580.1677740066-2135459383.1677740066). This [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property aids in the de-serialization of Snowflake data into instances of your model data class (aka, TValue="SnowflakeService") while bound to the pivot table. +#### Step 3: Define the Pivot Table Report +1. Configure the Pivot Table by defining fields in the [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns), [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Values), and [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) properties. +2. Enable the field list by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) to `true` for interactive field management. ```cshtml @using Syncfusion.Blazor.PivotView - + @@ -219,9 +269,12 @@ namespace MyWebService.Controllers } ``` - -When you run the application, the resultant pivot table will look like this. +#### Step 4: Run and Verify the Pivot Table +1. Run the Blazor application. +2. The Pivot Table displays the Snowflake data fetched via the Web API, structured according to the defined configuration. +3. The resulting Pivot Table will look like this: ![Blazor Pivot Table bound with Snowflake data](../images/blazor-pivottable-Snowflake-databinding.png) -> In [this](https://github.com/SyncfusionExamples/how-to-bind-Snowflake-database-to-pivot-table/tree/master/Blazor) GitHub repository, you can find our Blazor Pivot Table sample for binding data from a Snowflake database using the Web API service. \ No newline at end of file +### Additional Resources +Explore a complete example of the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) integrated with an ASP.NET Core Web application to fetch data from a Snowflake database in this [GitHub repository](https://github.com/SyncfusionExamples/web-bind-Snowflake-database-to-pivot-table/tree/master/Blazor). \ No newline at end of file diff --git a/blazor/pivot-table/css-customization.md b/blazor/pivot-table/css-customization.md index a085e9a116..29e69744b6 100644 --- a/blazor/pivot-table/css-customization.md +++ b/blazor/pivot-table/css-customization.md @@ -9,9 +9,13 @@ documentation: ug # CSS Customization in Blazor Pivot Table Component +The Blazor Pivot Table component provides extensive CSS customization options, allowing users to modify the visual appearance and layout of various pivot table elements. This includes styling row headers, column headers, value cells, summary cells, Field List components, and Grouping Bar areas to match application themes and design requirements. + ## Hiding Axis -The visibility of row, column, value and filter axis in Field List and Grouping Bar can be changed using custom CSS setting. +The visibility of the row, column, value, and filter axis areas in both the Field List dialog and Grouping Bar can be controlled using custom CSS styling. Each axis area has specific CSS classes that allow precise targeting for customization. + +The following code example demonstrates how to hide the column axis in both the Grouping Bar and Field List within the Pivot Table. The CSS includes necessary height and spacing adjustments to prevent layout gaps and maintain visual consistency: ```cshtml @using Syncfusion.Blazor.PivotView @@ -103,13 +107,21 @@ The visibility of row, column, value and filter axis in Field List and Grouping ``` +**Note:** The CSS selectors above assume the Pivot Table component has the ID **PivotView**. Replace this with your actual component ID or use appropriate class-based selectors for your implementation. + +The CSS selectors target the following Pivot Table elements: +- `.e-group-columns`: Hides the column axis in the Grouping Bar. +- `.e-group-filters`: Adjusts the height of the filter axis to compensate for the hidden column axis in the Grouping Bar. +- `.e-field-list-columns`: Hides the column axis in the Field List dialog. +- `.e-field-list-values`: Adjusts the layout of the values axis when the column section is hidden in the Field List dialog. + ![Hiding Columns in Blazor PivotTable GroupingBar](images/blazor-pivottable-hide-columns-in-groupbar.png) ![Hiding Columns in Blazor PivotTable Field List](images/blazor-pivottable-hide-columns-in-fieldlist.png) ## Text Alignment -The alignment of text inside row headers, column headers, value cells and summary cells can be changed using custom CSS setting. +The alignment of text inside row headers, column headers, value cells, and summary cells can be customized using CSS styling. The following example demonstrates how to center-align text in value cells: ```cshtml @using Syncfusion.Blazor.PivotView @@ -166,14 +178,15 @@ The alignment of text inside row headers, column headers, value cells and summar //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Text Alignment in Blazor PivotGrid](images/blazor-pivotgrid-text-alignment.png) -## Customize header, value and summary cell style +## Customize header, value and summary cell styles + +The Pivot Table component elements including header cells, value cells, and summary cells can be styled using built-in CSS class names. This enables comprehensive visual customization of the component's appearance to match application themes and design requirements. -The elements in pivot table like header cell, value cell and summary cell style can be customized using built-in CSS names. +The following code sample demonstrates how to apply custom background colors to different cell types: ```cshtml @using Syncfusion.Blazor.PivotView @@ -225,9 +238,14 @@ The elements in pivot table like header cell, value cell and summary cell style //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` +The CSS classes target the following Pivot Table elements: +- `.e-headercell`: Styles column header cells +- `.e-rowsheader`: Styles row header cells +- `.e-summary:not(.e-gtot)`: Styles subtotal summary cells (excluding grand totals) +- `.e-gtot`: Styles grand total cells + ![Blazor PivotGrid with Custom Styles](images/blazor-pivotgrid-custom-styles.png) N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/data-binding.md b/blazor/pivot-table/data-binding.md index 896a1c409b..d49bcdf78a 100644 --- a/blazor/pivot-table/data-binding.md +++ b/blazor/pivot-table/data-binding.md @@ -11,11 +11,11 @@ documentation: ug ## JSON -For JSON data binding, the `type` property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) needs to be set as `JSON`. The default value is assumed as `JSON`. +For JSON data binding, the [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Type) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) needs to be set as `DataSourceType.JSON`. Since JSON is the default data type, you can bind JSON data without setting this property. ### Binding JSON data via local -In-order to bind local JSON data to the pivot table, user can assign the local variable holding the JSON data to 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). +You can bind local JSON data to the Pivot Table by assigning a local variable containing the JSON data to 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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -48,12 +48,11 @@ In-order to bind local JSON data to the pivot table, user can assign the local v //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` - ![Blazor PivotTable with DataBinding](images/blazor-pivottable-data-binding.png) +![Blazor PivotTable with DataBinding](images/blazor-pivottable-data-binding.png) -Using local variable, the JSON data can also be bound to the pivot table using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) option with the help of `JsonAdaptor`. Here the instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) holding JSON data is assigned to [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). The use of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) is optional here. +You can also bind JSON data using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) with `JsonAdaptor`. In this approach, assign the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) instance containing JSON data to 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). Using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) is optional for local JSON data binding. ```cshtml @using Syncfusion.Blazor.PivotView @@ -89,12 +88,11 @@ Using local variable, the JSON data can also be bound to the pivot table using [ //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` - ![Blazor PivotTable with Local Data Binding](images/blazor-pivottable-data-binding.png) +![Blazor PivotTable with Local Data Binding](images/blazor-pivottable-data-binding.png) -In the meantime, the JSON data from the local *.json file type can also be connected to the pivot table. Here, the file can be read by the **StreamReader** option, which will give the result in the string form. And the resulting string needs to be converted to JSON data that can be assigned to 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). +You can also load JSON data from a local *.json file to the Pivot Table. The file can be read using the **StreamReader**, which outputs the data as a string. This string must then be converted to JSON format and assigned to 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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -154,7 +152,7 @@ In the meantime, the JSON data from the local *.json file type can also be conne ### Binding JSON data via remote -In-order to bind remote JSON data, mention the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property supports both direct downloadable file (*.json) and web service URL. +To bind remote JSON data to the Pivot Table, set the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property accepts both direct downloadable JSON files (*.json) and web service URLs. ```cshtml @using Syncfusion.Blazor.PivotView @@ -194,13 +192,13 @@ In-order to bind remote JSON data, mention the endpoint [Url](https://help.syncf ## CSV -For CSV data binding, the `type` property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) needs to be set as `CSV` mandatorily. +To bind CSV data, set the [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Type) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to `DataSourceType.CSV`. -N> The CSV format is considered to be the most compact format compared to JSON since it is half the size of JSON. This helps to reduce the bandwidth while transferring to the browser. +N> The CSV format is more compact than JSON, using approximately half the size. This reduces bandwidth usage when transferring data to the browser. ### Binding CSV data via local -In-order to bind local CSV data to the pivot table, user needs to convert it as string array and then directly assign it to 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). +To bind local CSV data to the Pivot Table, convert the data into a string array and assign it directly to 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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -258,7 +256,7 @@ In-order to bind local CSV data to the pivot table, user needs to convert it as ![Blazor PivotTable with CSV Data Binding](images/blazor-pivottable-csv-data-binding.png) -In the meantime, the CSV data from the local *. csv file type can also be connected to the pivot table. Here, the file can be read by the **StreamReader** option, which will give the result in the string form. And the resulting string needs to be converted to string array that can be assigned to 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). +You can also connect CSV data from a local *.csv file to the Pivot Table. The file can be read using the **StreamReader**, which outputs the data as a string. This string must then be converted to a string array and assigned to 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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -297,7 +295,7 @@ In the meantime, the CSV data from the local *. csv file type can also be connec protected override void OnInitialized() { // Put appropriate file path here - string url = AppDomain.CurrentDomain.BaseDirectory + "sales.csv"; + string url = AppDomain.CurrentDomain.BaseDirectory + "sales.csv"; WebClient myWebClient = new WebClient(); Stream myStream = myWebClient.OpenRead(url); StreamReader stream = new StreamReader(myStream); @@ -321,14 +319,15 @@ In the meantime, the CSV data from the local *. csv file type can also be connec return splitted; } } - ``` ![Blazor PivotTable with Local CSV Data Binding](images/blazor-pivottable-csv-data-binding.png) ### Binding CSV data via remote -In-order to bind the remote CSV data, mention the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property supports both direct downloadable file (*.csv) and web service URL. +Remote CSV data binding allows you to load data directly from external sources without storing large datasets locally, which improves application performance and reduces memory usage. + +To bind remote CSV data, set the [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to point to your data source endpoint. The [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) property accepts both direct downloadable CSV files (*.csv) and web service URLs that return CSV data. ```cshtml @using Syncfusion.Blazor.PivotView @@ -373,13 +372,17 @@ In-order to bind the remote CSV data, mention the endpoint [Url](https://help.sy ## Remote Data Binding -To interact with remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Adaptors.html#Syncfusion_Blazor_Adaptors_ODataAdaptor) for remote data-binding. +Remote data binding allows you to connect your Pivot Table component to data sources that are hosted on remote servers, enabling you to work with data from web services, databases, and other external sources. + +To bind remote data, specify the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with the appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#odata-adaptor) for remote data binding. N> When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for data binding then the TValue must be provided explicitly in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. ### Binding with OData services -OData is a standardized protocol for creating and consuming data. User can retrieve data from OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class. +OData (Open Data Protocol) is a web-based protocol that provides a standard way to create and consume data APIs. You can easily connect your Pivot Table to OData services using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html), which handles the communication and data retrieval automatically. + +The following example demonstrates how to bind the Pivot Table to an OData service: ```cshtml @using Syncfusion.Blazor.PivotView @@ -399,7 +402,7 @@ OData is a standardized protocol for creating and consuming data. User can retri - + @code{ @@ -412,12 +415,11 @@ OData is a standardized protocol for creating and consuming data. User can retri public double Freight { get; set; } } } - ``` ### Binding with OData V4 services -The OData V4 is an improved version of OData protocols, and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class can be used to retrieve and consume OData V4 services. For more details on OData V4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData V4 service, use the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#odatav4-adaptor). +OData V4 services provide enhanced query capabilities and improved performance for data retrieval operations. The OData V4 is an improved version of OData protocols, and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) can retrieve and consume OData V4 services. For more details on OData V4 services, refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197). To bind OData V4 service, use the [ODataV4Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#odatav4-adaptor). ```cshtml @using Syncfusion.Blazor.PivotView @@ -437,7 +439,7 @@ The OData V4 is an improved version of OData protocols, and the [SfDataManager]( - + @code{ @@ -450,12 +452,11 @@ The OData V4 is an improved version of OData protocols, and the [SfDataManager]( public double Freight { get; set; } } } - ``` ### Web API -User can use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) to bind the pivot table with Web API created using OData endpoint. +Web API binding allows you to connect the Pivot Table directly to RESTful web services for dynamic data loading. Users can use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) to bind the Pivot Table with Web API created using OData endpoint. ```cshtml @using Syncfusion.Blazor.PivotView @@ -478,7 +479,7 @@ User can use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/ad - + @code{ @@ -491,7 +492,6 @@ User can use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/ad public string ShipCity { get; set; } } } - ``` ## List binding @@ -730,31 +730,49 @@ Here, **ProductDetails** class implements the interface of **INotifyPropertyChan ## Mapping -One can define field information like alias name (caption), data type, aggregation type, show and hide subtotals etc. using the [FieldMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.IPivotViewDataSourceSettings.html#Syncfusion_Blazor_PivotView_IPivotViewDataSourceSettings_FieldMapping) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. The available options are, +Field mapping allows you to customize how fields appear and behave in the Pivot Table without changing the original data source. You can define field properties such as display names, data types, aggregation methods, and visibility settings using the [FieldMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.IPivotViewDataSourceSettings.html#Syncfusion_Blazor_PivotView_IPivotViewDataSourceSettings_FieldMapping) property within [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). + +The following options are available for field mapping: + +**Field identification and display** + +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Name) - Specifies the field name from your data source. +* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Caption) - Sets a user-friendly display name for the field. This display name will appear in the Pivot Table UI instead of the original field name. +* [DataType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_DataType) - Specifies the field data type such as 'string', 'number', 'datetime', 'date', or 'boolean'. + +**Aggregation and calculation** + +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Type) - Defines how values are aggregated in the Pivot Table, such as sum, product, count, average, minimum, or maximum. The default value is **sum**. This option applies only to relational data sources. +* [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_BaseField) - Specifies a comparison field for aggregate types like "DifferenceFrom", "PercentageOfDifferenceFrom", or "PercentageOfParentTotal". +* [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_BaseItem) - Specifies a comparison member within a field for aggregate types like "DifferenceFrom", "PercentageOfDifferenceFrom", or "PercentageOfParentTotal". + +**Field positioning and behavior** + +* [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Axis) - Determines where the field appears in the Pivot Table (row, column, value, or filter axis). +* [ShowNoDataItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowNoDataItems) - Shows all field members in the Pivot Table, even when no data exists at row and column intersections. The default value is **false**. This option applies only to relational data sources. +* [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowSubTotals) - Controls the visibility of subtotals for the field in row and column axes. The default value is **true**. + +**OLAP-specific options** -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Name) - It is to specify the appropriate field name. -* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Caption) - It is to set the alias name (caption) to the specific field. Instead of actual field name, the alias name (caption) will be set in the UI of the pivot table. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Type) - It is to display values in the pivot table with appropriate aggregation such as sum, product, count, average, minimum, maximum, etc. Its default value is **sum**. This option is applicable only for relational data source. -* [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_Axis) - It will help to display the field in specified axis such as row/column/value/filter axis of the pivot table. -* [ShowNoDataItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowNoDataItems) - It is to show all the members of a specific field to the pivot table, even if there are no data in the intersection of the row and column. The default value is **false**. This option is applicable only for relational data source. -* [BaseField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_BaseField) - For the aggregate types like "DifferenceFrom" or "PercentageOfDifferenceFrom" or "PercentageOfParentTotal", selective field is assigned for comparison via this property. -* [BaseItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_BaseItem) For the aggregate types like "DifferenceFrom" or "PercentageOfDifferenceFrom" or "PercentageOfParentTotal", selective member in a field is assigned for comparison via this property. -* [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowSubTotals) - It is to show or hide sub-totals of a specific field in row and column axis of the pivot table. The default value is **true**. * [IsNamedSet](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_IsNamedSet) - It is to set whether the specified field is named set or not. In general, the named set is a set of dimension members or a set expression (MDX query) to be created as a dimension in the SSAS OLAP cube itself. The default value is **false** and this option is applicable only for OLAP data source. -* [IsCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_IsCalculatedField) - It is to set whether the specified field is a calculated field or not. In general, a calculated field is created from the bound data source or using simple formula with basic arithmetic operators in the pivot table. The default value is **false** and this option is applicable only for OLAP data source. -* [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowFilterIcon) - It is to show or hide the filter icon of a specific field which will be displayed on the button of the grouping bar and field list UI. This filter icon is used to filter the members of a specified field at runtime in the pivot table. The default value is **true**. -* [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowSortIcon) - It is to show or hide the sort icon of a specific field which will be displayed on the button of the grouping bar and field list UI. This sort icon is used to order members of a specified field either in ascending or descending at runtime. The default value is **true**. -* [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowRemoveIcon) - It is to show or hide the remove icon of a specific field which will be displayed on the button of the grouping bar and field list UI. This remove icon is used to remove the specified field during runtime. The default value is **true**. -* [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowValueTypeIcon) - It is to show or hide the value type icon of a specific field which will be displayed on the button of the grouping bar and field list UI. This value type icon helps to select the appropriate aggregation type to specified value field at runtime. The default value is **true**. -* [ShowEditIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowEditIcon) - It is to show or hide the edit icon of a specific field which will be displayed on the button of the grouping bar and field list UI. This edit icon is used to modify caption, formula, and format of a specified calculated field at runtime. The default value is **true**. -* [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_AllowDragAndDrop) - It is to restrict specific field's button from being dragged on runtime in the grouping bar and field list UI. This will prevent from altering the current report. The default value is **true**. -* [DataType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_DataType) - It is to specify the type of the field like 'string', 'number', 'datetime', 'date', and 'boolean'. +* [IsCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_IsCalculatedField) - It is to set whether the specified field is a calculated field or not. In general, a calculated field is created from the bound data source or using simple formula with basic arithmetic operators in the Pivot Table. The default value is **false** and this option is applicable only for OLAP data source. + +**UI interaction controls** + +* [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowFilterIcon) - Controls the visibility of the filter icon on field buttons in the grouping bar and field list. Users can filter field members at runtime using this icon. The default value is **true**. +* [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowSortIcon) - Controls the visibility of the sort icon on field buttons in the grouping bar and field list. Users can sort field members in ascending or descending order at runtime. The default value is **true**. +* [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowRemoveIcon) - Controls the visibility of the remove icon on field buttons in the grouping bar and field list. Users can remove fields from the report at runtime. The default value is **true**. +* [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowValueTypeIcon) - Controls the visibility of the value type icon on field buttons in the grouping bar and field list. Users can change the aggregation type for value fields at runtime. The default value is **true**. +* [ShowEditIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_ShowEditIcon) - Controls the visibility of the edit icon on field buttons in the grouping bar and field list. Users can modify the caption, formula, and format of calculated fields at runtime. The default value is **true**. +* [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_AllowDragAndDrop) - Controls whether field buttons can be dragged in the grouping bar and field list UI. Setting this to **false** prevents users from modifying the current report structure. The default value is **true**. -The main purpose of these mapping options is to configure each field that is not a part of the initial pivot report. Even if any field that is a part of this mapping is defined here, the value set in the initial report will have the highest preceding. +Field mapping is particularly useful for configuring fields that are not part of your initial pivot report. When a field appears in both the initial report and field mapping, the initial report settings take priority. -N> This option is applicable only for relational data source. +N> This option applies only to relational data sources. - ```cshtml +The following code sample demonstrates how to configure the visibility of field button icons: + +```cshtml @using Syncfusion.Blazor.PivotView @@ -788,7 +806,6 @@ N> This option is applicable only for relational data source. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable with Mapping](images/blazor-pivottable-mapping.png) @@ -1009,7 +1026,7 @@ On the other hand, to configure the pivot table using Web API, provide the appro ## Values in row axis -By default, the value fields are plotted in column axis. To plot those fields in row axis, use the [ValueAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_DataSourceSettingsModel_1_ValueAxis) property by setting its value as **row**. By default, it holds the value **column**. +You can display value fields in the row axis of the Pivot Table to make your data analysis clear and more accessible. By default, value fields appear in the column axis. To display these fields in the row axis, set the [ValueAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ValueAxis) property to **row**. The default value is **column**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1042,14 +1059,15 @@ By default, the value fields are plotted in column axis. To plot those fields in //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable with Value in Row Axis](images/blazor-pivottable-value-in-row-axis.png) ## Show 'no data' items -By default, the pivot table only shows the field item if it has data in its row or column combination. To show all items that do not have data in row and column combination in the pivot table, use the [ShowNoDataItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowNoDataItems) property by setting its value to **true** for the desired fields. In the following code sample, rows of the "Country" and "Products" fields do not have data in all combination with "Year" and "Quarter" column field. +Display all field items in your Pivot Table, even when they lack data in certain row and column combinations, for a complete view of your data structure. By default, the Pivot Table displays field items only when they contain data in their respective row or column combinations. However, you can show all items, including those without data, by setting the [ShowNoDataItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowNoDataItems) property to **true** for the desired fields. + +In the following example, the "Country" and "Products" field rows are displayed even when they don't have data in all combinations with the "Year" and "Quarter" column field. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1082,14 +1100,13 @@ By default, the pivot table only shows the field item if it has data in its row //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable without Data](images/blazor-pivottable-without-data.png) ## Show value headers always -To show value header always in pivot table, even if it holds a single value, use the [AlwaysShowValueHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_DataSourceSettingsModel_1_AlwaysShowValueHeader) property by setting its value as **true**. +Ensure value headers remain visible in your Pivot Table at all times, providing consistent column identification even with single value scenarios. The Pivot Table typically hides value headers when displaying only one value. To maintain consistent header visibility regardless of the number of values, set the [AlwaysShowValueHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AlwaysShowValueHeader) property to **true**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1121,14 +1138,13 @@ To show value header always in pivot table, even if it holds a single value, use //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable with Values Header](images/blazor-pivottable-values-header.png) ## Customize empty value cells -User can show custom string in empty value cells using the [EmptyCellsTextContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EmptyCellsTextContent) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class of the pivot table. Since the property is of string data type, user can fill empty value cells with any value like "0", "-", "*", "(blank)", etc. Its common for all value fields and can be configured through code behind. +Show custom text in cells that contain no data to make your Pivot Table more informative and user-friendly. By default, empty value cells appear blank in the Pivot Table. However, you can display meaningful text in these cells using the [EmptyCellsTextContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EmptyCellsTextContent) property within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). Since this property accepts string values, you can fill empty cells with any text such as "0", "-", "*", "(blank)", or other meaningful indicators. This setting applies to all value fields and can be configured in your code behind. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1158,7 +1174,6 @@ User can show custom string in empty value cells using the [EmptyCellsTextConten //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Empty Values in Blazor PivotTable](images/blazor-pivottable-empty-values.png) @@ -1255,7 +1270,15 @@ In the following example, `true` is passed to the [`RefreshAsync`](https://help. ## Event -The event [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnLoad) fires before initiate rendering of pivot table. It holds following parameters like [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_DataSourceSettings), [FieldsType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_FieldsType) and [PivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1__ctor). In this event user can customize data source settings before initiating pivot table render module. +The [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnLoad) event fires before the Pivot Table begins rendering and provides access to key parameters that you can use to customize your data source configuration, apply filters, or modify field settings before the table displays. + +**Event Parameters** + +The load event provides the following parameters: + +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_DataSourceSettings): Defines the current report configuration including data source, rows, columns, values, and filters. +- [FieldsType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1_FieldsType): Defines the type of specific fields, such as whether they should be treated as numbers, dates, or text. +- [PivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadEventArgs-1.html#Syncfusion_Blazor_PivotView_LoadEventArgs_1__ctor): Defines the Pivot Table instance object that provides access to all component methods and properties. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1274,9 +1297,9 @@ The event [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pivot - - - + + + @@ -1295,7 +1318,6 @@ The event [OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Pivot args.DataSourceSettings.ExpandAll = false; } } - ``` ![Loading Event in Blazor PivotTable](images/blazor-pivottable-load-event.png) diff --git a/blazor/pivot-table/data-compression.md b/blazor/pivot-table/data-compression.md index c1f3ac3261..17264cefe2 100644 --- a/blazor/pivot-table/data-compression.md +++ b/blazor/pivot-table/data-compression.md @@ -6,13 +6,14 @@ platform: Blazor control: Pivot Table documentation: ug --- + # Data Compression in Blazor Pivot Table component > This property is applicable only for relational data source. -When binding one million raw data, the pivot table processes all raw data to generate aggregated data during initial rendering and report manipulation. However, with data compression, the input raw data is compressed based on the uniqueness of the raw data, and the final compressed raw data are utilized by the pivot table. The compressed raw data is then used for further operations at all times, reducing the looping complexity and improving the performance of the pivot table. For example, if the pivot table is connected to one million raw data compressed to 1,000 unique raw data, it will render within 3 seconds rather than 10 seconds. You can enable this option by using the [AllowDataCompression](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDataCompression) property along with [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property. +When binding large volumes of raw data, the pivot table processes all raw data to generate aggregated data during initial rendering and report manipulation. However, with data compression enabled, the input raw data is compressed based on the uniqueness of the raw data, and the final compressed raw data is utilized by the pivot table. The compressed raw data is then used for all subsequent operations, reducing the looping complexity and improving the performance of the pivot table. For example, if the pivot table connects to one million raw data records that compress to 1,000 unique raw data records, it will render significantly faster—potentially within 3 seconds rather than 10 seconds, depending on the data complexity and system specifications. Enable this option by using the [AllowDataCompression](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDataCompression) property along with [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property. -> This options will only function when the virtual scrolling is enabled. +> N> This option will only function when the virtual scrolling is enabled. ```cshtml @using Syncfusion.Blazor.PivotView @@ -45,19 +46,18 @@ When binding one million raw data, the pivot table processes all raw data to gen //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` -**Limitations during data compression** - -- The following aggregation types will not be supported. - - Average - - Populationsdev - - Samplestdev - - Populationvar - - Samplevar -- If you use any of the aggregations above, it will result in an aggregation type **Sum**. -- **Distinct count** will act as **Count** aggregation type. -- In the calculated field, an existing field can be inserted without altering its default aggregation type. Even if changed, it would revert to the default aggregation type for calculation. +**Limitations during data compression:** + +- The following aggregation types are not supported: + - Average + - PopulationStDev + - SampleStDev + - PopulationVar + - SampleVar +- If any of the above aggregation types are used, they will be automatically converted to **"Sum"** aggregation. +- **"DistinctCount"** will function as **"Count"** aggregation type. +- In a calculated field, existing fields can be inserted without changing their default aggregation type. Even if the aggregation type is changed, it will revert to the default aggregation type for calculation purposes. > You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/defer-layout-update.md b/blazor/pivot-table/defer-layout-update.md index a7ef027a60..58ee64af83 100644 --- a/blazor/pivot-table/defer-layout-update.md +++ b/blazor/pivot-table/defer-layout-update.md @@ -9,38 +9,38 @@ documentation: ug # Defer Layout Update in Blazor Pivot Table Component -Defer layout update support allows to update the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component only on demand. On enabling this feature, end user can drag-and-drop fields between row, column, value and filter axes, apply sorting and filtering inside the Field List, resulting in change of pivot report alone but not the pivot table values. Once all the operations are performed and on clicking the "Apply" button in the Field List, pivot table will start to update with the last modified report. This also helps in bringing better performance in pivot table component rendering. +Defer update support allows updating the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component only on demand, significantly improving performance for complex data operations. When this feature is enabled, users can drag-and-drop fields between row, column, value, and filter axes, apply sorting and filtering inside the Field List, resulting in changes to the pivot report configuration without immediately updating the pivot table values. Once all operations are performed and the "Apply" button is clicked in the Field List, the pivot table will update with the final modified report. This approach reduces multiple unnecessary renders and brings better performance, especially when working with large datasets or performing multiple field operations. -The field list can be displayed in two different formats to interact with pivot table. They are: +The field list can be displayed in two different formats to interact with the pivot table: -* **In-built Field List (Popup)**: To display the field list icon in pivot table UI to invoke the built-in dialog. -* **Stand-alone Field List (Fixed)**: To display the field list in a static position within a web page. +* **In-built Field List (Popup)**: Displays the field list icon in the pivot table UI to invoke the built-in dialog. +* **Stand-alone Field List (Fixed)**: Displays the field list in a static position within a web page. ## In-built Field List (Popup) -To enable deferred updates in the pivot table, set the property [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDeferLayoutUpdate) in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) as **true**. To make a note, the defer update option can be controlled only via Field List during runtime. +To enable deferred updates in the pivot table, set the property [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDeferLayoutUpdate) in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) to **true**. Note that the defer update option can be controlled only via Field List during runtime. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -      -             -         -     + + + + + + @code{ @@ -51,18 +51,17 @@ To enable deferred updates in the pivot table, set the property [AllowDeferLayou //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable with Defer Layout Update](images/blazor-pivottable-defer-layout-update.png) ## Stand-alone Field List (Fixed) -The field list can be rendered in a static position, anywhere in a web page layout, like a separate component. To do so, you need to set [RenderMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_RenderMode) property to [Mode.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Mode.html) in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). +The field list can be rendered in a static position anywhere in the web page layout, functioning as a separate component. To achieve this, set the [RenderMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_RenderMode) property to [Mode.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Mode.html) in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). -To enable deferred updates in the static fieldlist, set the property [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_AllowDeferLayoutUpdate) in [SfPivotFieldlist](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html) as **true**. To make a note, the defer update option can be controlled only via Field List during runtime. +To enable deferred updates in the static fieldlist, set the [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_AllowDeferLayoutUpdate) property to **true** in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). Note that the defer update option can be controlled only via Field List during runtime. -N> To make field list interact with pivot table, you need to use the **UpdateViewAsync** and **UpdateAsync** methods for data source update in both field list and pivot table simultaneously. +N> To make the field list interact with the pivot table, use the **UpdateViewAsync** and **UpdateAsync** methods to synchronize data source updates between both the field list and pivot table components simultaneously. ```cshtml @@ -116,7 +115,6 @@ N> To make field list interact with pivot table, you need to use the **UpdateVie this.fieldList.UpdateViewAsync(this.pivotView); } } - ``` ![Blazor PivotTable with Defer Static Update](images/blazor-pivottable-defer-static-update.png) diff --git a/blazor/pivot-table/drill-down.md b/blazor/pivot-table/drill-down.md index 38aa17c35c..022af40f21 100644 --- a/blazor/pivot-table/drill-down.md +++ b/blazor/pivot-table/drill-down.md @@ -13,45 +13,45 @@ documentation: ug ## Drill down and drill up -The drill down and drill up action helps to view the bound data in detailed and abstract view respectively. By default, if member(s) has children, then expand and collapse icon will be displayed in the respective row/column header. On clicking the icon, expand or collapse action will be performed automatically through built-in source code. Meanwhile, leaf member(s) does not contain expand and collapse icon. +The drill-down and drill-up features in the Pivot Table component allow users to expand or collapse hierarchical data for detailed or summarized views. When a field member(s) contains child items, expand and collapse icons automatically appear in the corresponding row or column header. Clicking these icons expands the selected item to display its child members or collapses it to show a summarized view. If a field member(s) does not have any further levels to display, the icons will not appear. ![Drill down and drill up in the Blazor Pivot Table](images/blazor-pivottable-drill-down.png) ## Drill position -It allows to drill only the current position of the selected member and exclude the drilled data of the selected member in other positions. For example, if "FY 2015" and "FY 2016" have "Q1" member as child in next level, and when end user attempts to drill "Q1" under "FY 2016", only it will be expanded and not "Q1" under "FY 2015". +The drill-down and drill-up features allow you to expand or collapse data for a specific member in the Pivot Table without affecting the same member in other positions. For example, if both "FY 2015" and "FY 2016" have "Quarter 1" as a child in the next level, drilling down into "Quarter 1" under "FY 2015" will expand only that specific instance. The "Quarter 1" under "FY 2016" will remain unchanged. -N> This feature is built-in and occurs every time when expand or collapse action is done for better performance. +N> This feature is built-in and works automatically every time you expand or collapse data, making the pivot table faster and more efficient. ![Drill position in the Blazor Pivot Table](images/blazor-pivottable-custom-drill-position.png) -## Expand all +## Expand All N> This property is applicable only for the relational data source. -It allows to either expand or collapse all headers that are displayed in row and column axes. To display all headers in expanded state, set the property [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) to **true** and to collapse all headers, set the property [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) to **false**. By default, [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) property is set to **false**. +The Pivot Table component allows users to interactively expand or collapse all field members displayed in the row and column axes. To display all hierarchical members in an expanded state, set the [`ExpandAll`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **true**. To collapse all headers, set this property to **false**. By default, [`ExpandAll`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) is set to **false**, so only the top-level field members are shown until the user expands them manually. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -         -             -         -     + + + + + + @code{ @@ -68,31 +68,33 @@ It allows to either expand or collapse all headers that are displayed in row and ## Expand all headers for specific fields -N> This option is applicable only for the relational data source. +N> This property is applicable only for the relational data source. + +The Pivot Table provides an option to expand or collapse all headers for specific fields in the [`PivotViewRows`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) or [`PivotViewColumns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) axis. To expand all headers for a particular field, set the [`ExpandAll`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ExpandAll) property to **true** in the [`PivotViewRows`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) or [`PivotViewColumns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) axis. By default, the [`ExpandAll`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ExpandAll) property is set to **false**, meaning the headers are collapsed. -Allow to expand or collapse all headers for specific fields(only) in row and column axes. To expand headers for a specific field in row and column axes, set the property [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ExpandAll) in [PivotViewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) and [PivotViewColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) to **true**. By default, [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ExpandAll) property in [PivotViewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) and [PivotViewColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) is set to **false**. +The following code demonstrates how to configure a Pivot Table with the [`ExpandAll`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ExpandAll) property enabled for specific fields. In this example, all headers for the **Year** field in the columns and the **Country** field in the rows are expanded. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -         -             -         -     + + + + + + @code{ @@ -103,7 +105,6 @@ Allow to expand or collapse all headers for specific fields(only) in row and col // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Expand all headers for specific fields in the Blazor Pivot Table](images/blazor-pivottable-expanded-specific-field-items.png) @@ -112,37 +113,37 @@ Allow to expand or collapse all headers for specific fields(only) in row and col N> This option is applicable only for the relational data source. -In addition to the previous topic, there is an enhancement to expand and collapse all headers except specific header(s). To achieve this, [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) class is used. The required properties of the [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) class are explained as follows: +The Pivot Table component supports expanding or collapsing all headers except for specific field members. This functionality allows users to selectively control which members in the fields are expanded or collapsed, making it easier to focus analysis on relevant data in the Pivot Table. The [`PivotViewDrilledMember`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) property is used to configure this behavior. Its key properties include: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Name): It allows to set the field name whose member(s) needs to be specifically drilled. -* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Items): It allows to set the exact member(s) which needs to be drilled. +- [`Name`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Name): Specifies the field name whose members should remain expanded or collapsed. +- [`Items`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Items): Lists the exact field members to expand or collapse. -N> The [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) option always works in vice-versa with respect to the property [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) in pivot table. For example, if [ExpandAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExpandAll) is set to **true**, then the member(s) added in [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Items) collection alone will be in collapsed state. +The following example demonstrates how to configure a Pivot Table where all headers are expanded except for the **France** member in the **Country** field, which remains collapsed. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -         -             -         + + + + + -             -         -     + + + @code{ @@ -153,18 +154,19 @@ N> The [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Expand all except specific members in the Blazor Pivot Table](images/blazor-pivottable-expandall-except-specific-items.png) -## Expand specific member(s) +## Expand or Collapse Specific Members + +The Pivot Table component enables users to programmatically expand or collapse specific members in any field placed under the row or column axes. This can be achieved using the [`PivotViewDrilledMember`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) property. The following properties of [`PivotViewDrilledMember`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) are described below: -End user can also manually expand or collapse specific member(s) in each fields under row and column axes using the [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) class from the code behind. The required properties of the [PivotViewDrilledMember](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) class are explained as follows: +* [`Name`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Name): Specifies the field name whose members should be expanded or collapsed. +* [`Items`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Items): Defines the exact members to be expanded or collapsed within the specified field. +* [`Delimiter`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Delimiter): Sets the character used to separate a child member from its parent when specifying hierarchical members. -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Name): It allows to set the field name whose member(s) needs to be specifically drilled. -* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Items): It allows to set the exact member(s) which needs to be drilled. -* [Delimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html#Syncfusion_Blazor_PivotView_PivotViewDrilledMember_Delimiter): It allows to separate next level of member from its parent member. +The following code demonstrates how to configure the Pivot Table to expand specific members by using the [`PivotViewDrilledMember`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDrilledMember.html) property. In this example, the **FY 2015** and **FY 2016** members in the **Year** field, and the **Q1** member under **FY 2015** in the **Quarter** field, are expanded, while other members remain collapsed. ```cshtml @using Syncfusion.Blazor.PivotView @@ -209,42 +211,41 @@ End user can also manually expand or collapse specific member(s) in each fields ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when the UI actions such as drill down and drill up begin. This allows user to identify the current action being performed at runtime. It has the following parameters: - -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +The [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event triggers when a user starts a UI action, such as drilling down (expanding) or drilling up (collapsing) data in the pivot table. This event helps you track the action being performed and customize its behavior. It includes the following parameters: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: +- [`DataSourceSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current pivot table report settings, including the data source, rows, columns, values, filters, and format settings. +- [`ActionName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Indicates the name of the action being performed. The table below lists the UI actions and their corresponding names: | Action | Action Name| |----------------|---------------| | [Expand](./drill-down#drill-down-and-drill-up)| Drill down| | [Collapse](./drill-down#drill-down-and-drill-up)| Drill up| -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +- [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Allows you to block the current action by setting it to `true`. -In the following example, drill down and drill up action can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +In the below sample, drill down and drill up action can be restricted by setting the **args.Cancel** option to **true** in the [`OnActionBegin`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -         -             -         -     + + + + + + @@ -265,20 +266,21 @@ In the following example, drill down and drill up action can be restricted by se } } ``` + ### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when a UI action such as drill down or drill up, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +The event [`OnActionComplete`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when a UI action such as drill down or drill up, is completed. This allows user to identify the current UI actions being completed at runtime. It has the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +* [`DataSourceSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: +* [`ActionName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: | Action | Action Name| |----------------|---------------| | [Expand](./drill-down#drill-down-and-drill-up)| Drill down| | [Collapse](./drill-down#drill-down-and-drill-up)| Drill up| -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if drill down action is completed, the event argument contains information such as field name and the drill information. +* [`ActionInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if drill down action is completed, the event argument contains information such as field name and the drill information. ```cshtml @using Syncfusion.Blazor.PivotView @@ -320,40 +322,41 @@ The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [`OnActionFailure`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event is triggered when a UI action does not produce the expected result. It provides details about the failure through the following parameters: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: +* [`ActionName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): The name of the action that failed. The table below lists the UI actions and their corresponding names: | Action | Action Name| |----------------|---------------| | [Expand](./drill-down#drill-down-and-drill-up) | Drill down | | [Collapse](./drill-down#drill-down-and-drill-up)| Drill up | -* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. +* [`ErrorInfo`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): Contains details about the error that caused the action to fail. ```cshtml @using Syncfusion.Blazor.PivotView -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -         -             -         -     + + + + + + diff --git a/blazor/pivot-table/drill-through.md b/blazor/pivot-table/drill-through.md index a6f8e84615..a3e7058b76 100644 --- a/blazor/pivot-table/drill-through.md +++ b/blazor/pivot-table/drill-through.md @@ -9,7 +9,7 @@ documentation: ug # Drill Through in Blazor Pivot Table Component -It allows to view the underlying raw data of a summarized cell in the pivot table. It can be enabled by setting the [AllowDrillThrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDrillThrough) property to **true**. By double-clicking on any value cell, user can view the detailed raw data in a data grid inside a new window. In the new window, row header, column header and measure name of the clicked cell will be shown at the top. Also, the user can include or exclude fields available in the data grid using column chooser option. +The drill-through feature in the Pivot Table component allows users to view the raw, unaggregated data behind any aggregated cell in the pivot table. To enable this feature, set the [AllowDrillThrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDrillThrough) property to **true**. By double-clicking an aggregated cell, users can view its detailed raw data in a data grid displayed in a new window. The new window shows the row header, column header, and measure name of the selected cell at the top. Additionally, users can include or exclude fields available in the data grid using the column chooser option. ```cshtml @using Syncfusion.Blazor.PivotView @@ -48,7 +48,7 @@ It allows to view the underlying raw data of a summarized cell in the pivot tabl
![After Drill Through in Blazor PivotTable](images/blazor-pivottable-after-drillthrough.png) -Users can also view the underlying raw data though the pivot chart. By clicking on any data point, user can view the detailed raw data in a data grid inside a new window. +Users can also access drill-through data through the pivot chart. By clicking on any data point in the pivot chart, they can view the raw data in a data grid displayed in a new window. ```cshtml @using Syncfusion.Blazor.PivotView @@ -85,7 +85,6 @@ Users can also view the underlying raw data though the pivot chart. By clicking //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Before Drill Through in Blazor PivotChart](images/blazor-pivotchart-before-drillthrough.png) @@ -95,12 +94,11 @@ Users can also view the underlying raw data though the pivot chart. By clicking ## Maximum rows to retrieve -N> This property is applicable only for OLAP data sources. +N> This property is applicable only for the OLAP data source. -The [MaxRowsInDrillThrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewModel-1.html#Syncfusion_Blazor_PivotView_PivotViewModel_1_MaxRowsInDrillThrough) property allows to specify the maximum number of raw data to be returned during the drill through process. By default, this property is set to **"10000"** meaning that if you do not specify this property, you will get 10,000 or less raw data. +The [MaxRowsInDrillThrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewModel-1.html#Syncfusion_Blazor_PivotView_PivotViewModel_1_MaxRowsInDrillThrough) property specifies the maximum number of rows to be returned during a drill-through operation. By default, this property is set to **"10000"**, meaning that if it is not explicitly defined, up to 10,000 rows will be returned. ```cshtml - @using Syncfusion.Blazor.PivotView @@ -135,7 +133,6 @@ The [MaxRowsInDrillThrough](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla public string Quarter { get; set; } } } - ``` ![Blazor PivotTable with Maximum Rows](images/blazor-pivottable-maximum-rows.png) diff --git a/blazor/pivot-table/editing.md b/blazor/pivot-table/editing.md index ab15ec7ea3..d873021e4e 100644 --- a/blazor/pivot-table/editing.md +++ b/blazor/pivot-table/editing.md @@ -9,14 +9,21 @@ documentation: ug # Editing in Blazor Pivot Table Component -N> This feature is applicable only for relational data source. +N> This feature is applicable only for the relational data source. -Cell edit allows to add, delete, or update the raw items of any value cell from the pivot table. The raw items can be viewed in a data grid inside a new window on double-clicking the appropriate value cell. In the data grid, CRUD operations can be performed by double-clicking the cells or using toolbar options. Once user finishes editing raw items, aggregation will be performed for the updated values in pivot table component immediately. This support can be enabled by setting the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowEditing) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to **true**. +The cell editing option allows users to directly change data in the pivot table by adding, updating, or deleting raw data items within any value cell. When you double-click a value cell, the raw items appear in a data grid within a new window. In this data grid, you can perform CRUD operations by double-clicking cells or using toolbar options. After you finish editing the raw items, the pivot table automatically updates the aggregated values. To enable this option, set the [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowEditing) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to **true**. -To learn about how to work with **Editing** options in the Blazor Pivot Table, you can check on this video: +The [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class provides comprehensive control over editing behavior through the following options: -{% youtube -"youtube:https://www.youtube.com/watch?v=bnOn_L6dPY4"%} +* [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowAdding): Enables adding new rows to the data grid. +* [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowEditing): Allows editing existing records in the data grid. +* [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowDeleting): Enables deleting records directly from the data grid. +* [AllowCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowCommandColumns): Displays built-in command buttons (edit, delete, save, cancel) in the data grid. +* [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode): Sets the editing mode. +* [AllowEditOnDblClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowEditOnDblClick): Enables users to start editing a cell by double-clicking it. +* [ShowConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_ShowConfirmDialog): Shows a confirmation dialog before saving changes. +* [ShowDeleteConfirmDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_ShowDeleteConfirmDialog): Shows a confirmation dialog before deleting a record. +* [AllowInlineEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowInlineEditing): Allows users to edit content directly in the cell. The CRUD operations available in the data grid toolbar and command column are: @@ -35,9 +42,13 @@ The following are the supported edit types in the data grid: * Batch * Command Columns +To learn about how to work with Editing options, you can check on this video for Blazor Pivot Table. + +{% youtube "https://www.youtube.com/watch?v=bnOn_L6dPY4" %} + ## Normal -In normal edit mode, when user starts editing, the state of the currently selected row alone will be completely changed to edit state. User can change the cell values and save it to the data source by clicking "Update" toolbar button. To enable the normal edit, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Normal). +Normal edit mode allows users to edit one row at a time in the editing dialog with simple data changes and updates. In normal edit mode, when editing begins, the selected row changes to edit state. Cell values can be modified and saved to the data source by clicking the "Update" toolbar button. To enable normal edit mode, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Normal). N> The normal edit mode [EditMode.Normal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Normal) is set as the default mode for editing. @@ -72,14 +83,13 @@ N> The normal edit mode [EditMode.Normal](https://help.syncfusion.com/cr/blazor/ //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Normal Editing in Blazor PivotTable](images/blazor-pivottable-normal-editing.png) ## Dialog -In dialog edit mode, when user starts editing, the currently selected row data will be shown in an exclusive dialog. User can change cell values and save it to the data source by clicking "Save" button in the dialog. To enable the dialog edit, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Dialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Dialog). +The dialog edit mode provides a focused editing environment by displaying the selected row data in an exclusive dialog window, ensuring clear visibility and controlled data modification. In dialog edit mode, when editing begins, the currently selected row data appears in a dedicated dialog. Cell values can be modified and saved to the data source by clicking the "Save" button in the dialog. To enable dialog editing, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Dialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Dialog). ```cshtml @using Syncfusion.Blazor.PivotView @@ -112,14 +122,13 @@ In dialog edit mode, when user starts editing, the currently selected row data w //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` -![Dialog Editing in Blaozr PivotTable](images/blazor-pivottable-dialog-editing.png) +![Dialog Editing in Blazor PivotTable](images/blazor-pivottable-dialog-editing.png) ## Batch -In batch edit mode, when user double-clicks any data grid cell, the state of target cell is changed to edit state. User can perform bulk changes and finally save (added, changed, and deleted data in the single request) to the data source by clicking "Update" toolbar button. To enable the batch edit, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Batch). +Batch editing enables users to make multiple changes to data grid cells and save them all at once, improving efficiency for bulk updates. When a user double-clicks any data grid cell in batch mode, the target cell changes to edit state. Users can perform multiple changes and save all modifications (added, changed, and deleted data) to the data source by clicking the **Update** toolbar button. To enable batch editing, set the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_Mode) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to [EditMode.Batch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditMode.html#Syncfusion_Blazor_PivotView_EditMode_Batch). ```cshtml @using Syncfusion.Blazor.PivotView @@ -152,14 +161,26 @@ In batch edit mode, when user double-clicks any data grid cell, the state of tar //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Batch Editing in Blazor PivotTable](images/blazor-pivottable-batch-editing.png) ## Command column -An additional column appended in the data grid layout holds the command buttons to perform the CRUD operation. To enable the command columns, set the [AllowCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowCommandColumns) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to **true**. +The command column option provides dedicated action buttons within the data grid for streamlined CRUD operations as an alternative to using toolbar options. An additional column appears in the data grid layout containing command buttons to perform the CRUD operations. To enable the command columns, set the [AllowCommandColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowCommandColumns) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) class to **true**. + +The available built-in command buttons are: + +| Command Button | Actions | +|----------------|---------| +| Edit | Edit the current row.| +| Delete | Delete the current row.| +| Save | Update the edited row.| +| Cancel | Cancel the edited state. | + +N> +- When the command column option is enabled, the Edit, Delete, Update, and Cancel buttons are not shown in the Data Grid's toolbar. Instead, these action buttons appear in the last column of each row within the Data Grid. +- To delete a record directly from the data grid using the **Delete** action button in the command column, you need to set the [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowDeleting) property to **true**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -192,14 +213,13 @@ An additional column appended in the data grid layout holds the command buttons //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Command Editing in Blazor PivotTable](images/blazor-pivottable-command-editing.png) ## Inline Editing -It allows editing of a value cell directly without the use of an external edit dialog. It is applicable if and only if a single raw data is used for the value of the cell. It is applicable to all editing modes, such as normal, batch, dialog and column commands. It can be enabled by setting the `AllowInlineEditing` property in `PivotViewCellEditSettings` to `true`. +The inline editing option provides streamlined data modification by allowing direct editing of value cells without opening an external dialog, improving workflow efficiency for quick data updates. This editing mode applies only when a single raw data item corresponds to the value of the cell and works with all editing modes including normal, batch, dialog, and column commands. Enable inline editing by setting the [AllowInlineEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html#Syncfusion_Blazor_PivotView_PivotViewCellEditSettings_AllowInlineEditing) property in [PivotViewCellEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCellEditSettings.html) to **true**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -232,14 +252,15 @@ It allows editing of a value cell directly without the use of an external edit d //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Inline Editing in Blazor PivotTable](images/blazor-pivottable-inline-editing.png) ## Editing using the pivot chart -Users can also add, delete, or update the underlying raw items of any data point via pivot chart. The raw items will be shown in the data grid in the new window by clicking the appropriate data point. Then you can edit the raw items as mentioned above by any of the edit types (normal, dialog, batch and command column). +Pivot chart editing provides an alternative way to conveniently update, add, or remove underlying data associated with any chart data point. This empowers users to perform CRUD (Create, Read, Update, Delete) operations on the underlying raw items linked to visualized data points for enhanced analysis. + +Clicking a data point in the pivot chart displays the underlying raw items in a data grid within a popup window. Users can then add, update, or delete these items using any of the supported edit types (normal, dialog, batch, or command column), following the same steps as for pivot table cells. ```cshtml @using Syncfusion.Blazor.PivotView @@ -277,7 +298,6 @@ Users can also add, delete, or update the underlying raw items of any data point //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Before Editing in Blazor PivotChart](images/blazor-pivotchart-before-drillthrough.png) @@ -289,80 +309,76 @@ Users can also add, delete, or update the underlying raw items of any data point ### EditCompleted -The event [`EditCompleted`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EditCompleted) triggers when values cells are edited completely. The event provides edited cell(s) information along with its previous cell value. It also helps to do the CRUD operation by manually updating the database which is connected to the component. It has the following parameters. +The event [EditCompleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EditCompleted) triggers when values cells are edited completely. The event provides edited cell(s) information along with its previous cell value. It also helps to do the CRUD operation by manually updating the database which is connected to the component. It has the following parameters: -* `AddedData` - It holds the newly added raw data of the current edited cell which is used to add them in the datasource. - -* `ModifiedData` - It holds the modified raw data of the current edited cell as well as their current index, which is used to identify and update them in the datasource. - -* `RemovedData` - It holds the current edited cell's removed raw data as well as their current index, which is used to identify and remove them from the datasource. - -* `Cancel` - It is a boolean property and if it is set as **true**, the editing won’t be reflected in the pivot table. +* [AddedData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditCompletedEventArgs-1.html#Syncfusion_Blazor_PivotView_EditCompletedEventArgs_1_AddedData) - It holds the newly added raw data of the current edited cell which is used to add them in the datasource. +* [ModifiedData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditCompletedEventArgs-1.html#Syncfusion_Blazor_PivotView_EditCompletedEventArgs_1_ModifiedData) - It holds the modified raw data of the current edited cell as well as their current index, which is used to identify and update them in the datasource. +* [RemovedData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditCompletedEventArgs-1.html#Syncfusion_Blazor_PivotView_EditCompletedEventArgs_1_RemovedData) - It holds the current edited cell's removed raw data as well as their current index, which is used to identify and remove them from the datasource. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EditCompletedEventArgs-1.html#Syncfusion_Blazor_PivotView_EditCompletedEventArgs_1_Cancel) - It is a boolean property and if it is set as **true**, the editing won’t be reflected in the pivot table. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + @code { - private List data { get; set; } - protected override void OnInitialized() - { - data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } - private void EditCompleted(EditCompletedEventArgs args) - { - // Here you can obtain all the newly added raw data for the current edited cell which is used to add them in the datasource. - List addedData = args.AddedData; - - // Here you can obtain all the modified raw data of the current edited cell as well as their current index, which is used to identify and update them in the datasource. - Dictionary modifiedData = args.ModifiedData; - - // Here you can obtain the current edited cell's all the removed raw data as well as their current index, which is used to identify and remove them from the datasource. - Dictionary removeData = args.RemovedData; - } + private List data { get; set; } + protected override void OnInitialized() + { + data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } + private void EditCompleted(EditCompletedEventArgs args) + { + // Here you can obtain all the newly added raw data for the current edited cell which is used to add them in the datasource. + List addedData = args.AddedData; + + // Here you can obtain all the modified raw data of the current edited cell as well as their current index, which is used to identify and update them in the datasource. + Dictionary modifiedData = args.ModifiedData; + + // Here you can obtain the current edited cell's all the removed raw data as well as their current index, which is used to identify and remove them from the datasource. + Dictionary removeData = args.RemovedData; + } } ``` ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when the UI actions such as CRUD operations (via dialog) and inline editing begin. This allows user to identify the current action being performed at runtime. It has the following parameters: +The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when editing actions such as add, edit, save, or delete are started through the UI (either by dialog or inline editing). This event lets users monitor the editing workflow and take action before the operation completes. The following parameters are available in the event: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source settings, including all input data, rows, columns, values, filters, and format settings. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Shows the name of the editing action that has started. The following are the UI actions and their names: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: + | Action | Action Name| + |--------|-------------| + | Editing| Edit record| + | Save| Save edited records| + | Add| Add new record| + | Delete| Remove record| -| Action | Action Name| -|----------------|-------------| -| Editing| Edit record| -| Save| Save edited records| -| Add| Add new record| -| Delete| Remove record| +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Allows users to stop (cancel) the action by setting this option to **true**. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. - -In the following example, editing actions such as add and save can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +In the following example, editing actions such as add and save can be restricted by setting the **args.Cancel** option to **true** in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event. ```cshtml @using Syncfusion.Blazor.PivotView @@ -399,29 +415,29 @@ In the following example, editing actions such as add and save can be restricted // Triggers when the UI action begins. public void ActionBegin(PivotActionBeginEventArgs args) { - if(args.ActionName == "Add new record" && args.ActionName == "Save edited records") + if(args.ActionName == "Add new record" || args.ActionName == "Save edited records") { args.Cancel = true; } } } ``` -### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the UI action such as CRUD operations (via dialog) or inline editing, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +### OnActionComplete -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers whenever a UI action, such as add, update, remove, or save (using dialog or inline editing), is finished. This lets users know exactly what kind of action has just been completed. The event provides the following details: +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current data source settings, including input data, rows, columns, values, filters, format settings, and more. * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: -| Action | Action Name| -|----------------|-------------| -| Save| Edited records saved| -| Add| New record added| -| Delete| Record removed | -| Update| Records updated| + | Action | Action Name| + |--------|-------------| + | Save| Edited records saved| + | Add| New record added| + | Delete| Record removed| + | Update| Records updated| -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if save action is completed, the event argument contains information such as mode of editing and saved records. +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if save action is completed, the event argument contains information such as mode of editing and saved records. ```cshtml @using Syncfusion.Blazor.PivotView @@ -457,25 +473,26 @@ The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl } public void ActionComplete(PivotActionCompleteEventArgs args) { - if(args.ActionName == "New record added" && args.ActionName == "Edited records saved") + if(args.ActionName == "New record added" || args.ActionName == "Edited records saved") { // Triggers when the editing UI actions such as add and edit are completed. } } } ``` + ### OnActionFailure The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: -| Action | Action Name| -|----------------|-------------| -| Editing| Edit record| -| Save| Save edited records| -| Add| Add new record| -| Delete| Remove record| + | Action | Action Name| + |--------|-------------| + | Editing| Edit record| + | Save| Save edited records| + | Add| Add new record| + | Delete| Remove record| * [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. @@ -525,7 +542,7 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } public void ActionFailure(PivotActionFailureEventArgs args) { - if(args.ActionName == "Add new record" && args.ActionName == "Edit record") + if(args.ActionName == "Add new record" || args.ActionName == "Edit record") { // Triggers when the current UI action fails to achieve the desired result. } diff --git a/blazor/pivot-table/excel-export.md b/blazor/pivot-table/excel-export.md index d10ed0e596..9364fcb060 100644 --- a/blazor/pivot-table/excel-export.md +++ b/blazor/pivot-table/excel-export.md @@ -9,16 +9,16 @@ documentation: ug # Excel export in Blazor Pivot Table component -The Excel export allows Pivot Table data to be exported as Excel document. To enable Excel export in the pivot table, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowExcelExport) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Once the API is set, user needs to call the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExcelExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method for exporting on external button click. +The Excel export feature allows you to export Pivot Table data as an Excel document for offline analysis and reporting. To enable Excel export functionality in the Pivot Table, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowExcelExport) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Once enabled, use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method to perform the Excel export operation. This method accepts a boolean parameter, **"asMemoryStream"**, which determines the export behavior: * **false:** Downloads the Excel file directly. * **true:** Returns the file as a memory stream for custom processing, storage, or manipulation. -In this example, false is used to initiate a direct download. +In the following example, an external button is used to start the Excel export process. When the user clicks the button, the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method is called so that the Pivot Table data can be saved as an Excel file. In this example, **false** is used to initiate a direct download. -N> The pivot table component can be exported to Excel format using options available in the toolbar. For more details [refer](./tool-bar) here. +N> The Pivot Table component can be exported to Excel format using options available in the toolbar. For more details [refer](./tool-bar) here. ```cshtml @using Syncfusion.Blazor.PivotView @@ -50,7 +50,7 @@ N> The pivot table component can be exported to Excel format using options avail public List data { get; set; } protected override void OnInitialized() { - this.Data = ProductDetails.GetProductData().ToList(); + this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } @@ -62,11 +62,11 @@ N> The pivot table component can be exported to Excel format using options avail ![Excel Exporting in Blazor PivotTable](images/blazor-pivottable-excel-export.png) -## Changing the pivot table style while exporting +## Changing the Pivot Table style while exporting -The Excel export provides an option to change colors for headers, caption and records in pivot table before exporting. In-order to apply colors, define **theme** settings in **excelExportProperties** object and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExcelExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method. +The Excel export provides an option to change colors for headers, caption, and records in Pivot Table before exporting. To apply colors, define [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Theme) settings in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method. -N> By default, material theme will be applied to the pivot table during Excel exporting. +N> By default, material theme is applied to exported Excel document. ```cshtml @using Syncfusion.Blazor.PivotView @@ -98,7 +98,7 @@ N> By default, material theme will be applied to the pivot table during Excel ex public List data { get; set; } protected override void OnInitialized() { - this.Data = ProductDetails.GetProductData().ToList(); + this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } @@ -116,15 +116,13 @@ N> By default, material theme will be applied to the pivot table during Excel ex this.pivot.ExportToExcelAsync(excelExportProperties); } } - ``` ![Changing Blazor PivotTable Style while Exporting](images/blazor-pivottable-style-format-in-excel.png) ## Add header and footer while exporting -The Excel export provides an option to include header and footer content for the excel document before exporting. In-order to add header and footer, define [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Footer) properties in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method. - +The Excel export provides an option to include header and footer content for the Excel document before exporting. To add header and footer, define [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Footer) properties in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method. ```cshtml @using Syncfusion.Blazor.PivotView @@ -191,14 +189,13 @@ The Excel export provides an option to include header and footer content for the await this.pivot.ExportToExcelAsync(excelExportProperties); } } - ``` ![Add Header and Footer while exporting in Blazor PivotTable](images/blazor-pivottable-header-and-footer-in-excel.png) ## Changing the file name while exporting -The Excel export provides an option to change file name of the document before exporting. In-order to change the file name, define **fileName** property in **excelExportProperties** object and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExcelExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method. +This option provides flexibility to specify a custom file name for your exported Excel document, making it easier to organize and identify your exported data files. To change the file name, define [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class and pass it as a parameter to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__System_Boolean_) method. ```cshtml @using Syncfusion.Blazor.PivotView @@ -230,7 +227,7 @@ The Excel export provides an option to change file name of the document before e public List data { get; set; } protected override void OnInitialized() { - this.Data = ProductDetails.GetProductData().ToList(); + this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } @@ -242,27 +239,26 @@ The Excel export provides an option to change file name of the document before e this.pivot.ExportToExcelAsync(excelExportProperties); } } - ``` ![Changing Blazor PivotTable File Name while Exporting](images/blazor-pivottable-change-excel-file-name.png) ## Limitation when exporting millions of records to Excel format -By default, Microsoft Excel supports only 1,048,576 records in an Excel sheet. Hence, it is not possible to export millions of records to Excel. You can refer to the [documentation link](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3) for more details on Microsoft Excel specifications and limits. Therefore, it is suggested to export the data in CSV (Comma-Separated Values) or other formats that can handle large datasets more efficiently than Excel. +Understanding this limitation helps you choose the appropriate export format based on your data size requirements and ensures optimal performance for large datasets. By default, Microsoft Excel supports only 1,048,576 records in an Excel sheet. Therefore, it is not possible to export millions of records to Excel format. You can refer to the [documentation link](https://support.microsoft.com/en-gb/office/excel-specifications-and-limits-1672b34d-7043-467e-8e27-269d656771c3) for more details on Microsoft Excel specifications and limits. For large datasets, it is recommended to export the data in CSV (Comma-Separated Values) or other formats that can handle large datasets more efficiently than Excel. ## CSV Export -The Excel export allows pivot table data to be exported in **CSV** file format as well. To enable CSV export in the pivot table, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowExcelExport) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class as **true**. Once the API is set, user needs to call the [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_CsvExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method for exporting on external button click. +The CSV export option allows you to export Pivot Table data as a plain text CSV file, making it easy to use the data with other spreadsheet or data analysis applications. To export the Pivot Table as a CSV file, ensure that the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowExcelExport) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class is set to **true**. Then, use the [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToCsvAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Boolean_) method to perform the CSV export operation. This method accepts a boolean parameter, **"asMemoryStream"**, which determines the export behavior: * **false:** Downloads the Excel file directly. * **true:** Returns the file as a memory stream for custom processing, storage, or manipulation. -In this example, false is used to initiate a direct download. +In the following example, an external button is used to start the CSV export process. When the user clicks the button, the [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToCsvAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_System_Boolean_) method is called so that the Pivot Table data can be saved as a CSV file. In this example, **false** is used to initiate a direct download. -N> The pivot table component can be exported to CSV format using options available in the toolbar. For more details [refer](./tool-bar) here. +N> The Pivot Table component can be exported to CSV format using options available in the toolbar. For more details [refer](./tool-bar) here. ```cshtml @using Syncfusion.Blazor.PivotView @@ -270,7 +266,7 @@ N> The pivot table component can be exported to CSV format using options availab - + @@ -304,14 +300,13 @@ N> The pivot table component can be exported to CSV format using options availab this.pivot.ExportToCsvAsync(false); } } - ``` ![CSV Exporting in Blazor PivotTable](images/blazor-pivottable-csv-export.png) ## Export all pages -When the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) is set to **true**, the entire virtual data of the pivot table (i.e. the data that contains all of the records used to render the complete pivot table) will be exported as an Excel/CSV document. To export only the current viewport of the pivot table, set the [ExportAllPages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportAllPages) property to **false**. +This option gives flexibility to export either the entire dataset rendered by the Pivot Table (all pages) or just the data currently visible in the viewport. To export the entire Pivot Table data, ensure the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) is set to **true**. Set the [ExportAllPages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportAllPages) property to **false** to export only the visible records. This setting applies to both Excel and CSV exports. ```cshtml @using Syncfusion.Blazor.PivotView @@ -351,9 +346,9 @@ When the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion ## Saving Excel document to stream -Rather than exporting the Pivot Table as a downloadable file, the user can save the Excel document as a memory stream. This is achieved by setting the **asMemoryStream** parameter to **true** in the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExcelExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method. The resulting memory stream can then be further processed and customized by the user before being exported as a document. +The user can save a Pivot Table as a memory stream instead of downloading it as an Excel file. This is done by setting the `asMemoryStream` parameter to `true` in the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExcelExport_System_Object_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method. The memory stream can then be processed or saved as needed. -N> This option is only available if virtualization is enabled in the pivot table. +N> This option requires [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) to be set to `true` in the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -363,7 +358,7 @@ N> This option is only available if virtualization is enabled in the pivot table - + @@ -377,7 +372,7 @@ N> This option is only available if virtualization is enabled in the pivot table - + @@ -398,18 +393,15 @@ N> This option is only available if virtualization is enabled in the pivot table private List Data { get; set; } protected override void OnInitialized() { - this.Data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + this.Data = ProductDetails.GetProductData().ToList(); } - private async Task OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) + private async Task OnExcelExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) { System.IO.MemoryStream memoryStream = new System.IO.MemoryStream(); //Excel document as a memory stream by setting the first parameter as "true" in the "ExportToExcelAsync" method. memoryStream = await this.pivot.ExportToExcelAsync(true); // You can then process the memory stream based on your needs and save it as mentioned in the last statement. - ...... - ...... - ...... await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "default.xlsx", Convert.ToBase64String(memoryStream.ToArray()),true }); } } @@ -419,13 +411,12 @@ N> This option is only available if virtualization is enabled in the pivot table ### ExcelQueryCellInfo -The event [ExcelQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ExcelQueryCellInfo) triggers while framing each row and value cell during Excel export. It allows the user to customize the cell value, style, etc. of the current cell. It has the following parameters: - -* [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Value) : It holds the cell value. -* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Column) : It holds the column information, including row and column indexes required to obtain the current cell information. **Note:** This option is applicable only when virtualization is disabled. +The [ExcelQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ExcelQueryCellInfo) event is triggered during the creation of each row and value cell while exporting data to Excel. This event offers options to change the content and style of individual cells in the exported Excel document, improving the flexibility and appearance of exported reports. It has the following parameters: +* [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Value) : Represents the value of the current cell in the exported Excel sheet. +* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Column) : Provides details about the column to which the current cell belongs. **Note:** This option is applicable only when virtualization is disabled. * [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Cell) : It holds the current cell information. -* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Style) : It holds the style properties for the cell. +* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_Style) : Defines the style properties (such as font, color, borders) applied to the current cell. * [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_RowIndex) : It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. * [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_ExcelQueryCellInfoEventArgs_1_ColumnIndex) : It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. @@ -436,27 +427,26 @@ The event [ExcelQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion. - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - @code{ private SfPivotView pivot; public List Data { get; set; } @@ -504,21 +494,19 @@ The event [ExcelQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion. args.Style.Bold = args.Cell.CellStyle.Bold = true; } } - } - ``` ### ExcelHeaderQueryCellInfo N> The row header cell can be obtained by using the `ExcelQueryCellInfo` event. It can be identified using `AxisSet.Axis == "row"` and for reference, see the code snippet in the previous topic. -The event [ExcelHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ExcelHeaderQueryCellInfo) triggers on framing each column header cell during Excel export. It allows the user to customize the cell value, style, etc. of the current cell. It has the following parameters: +The [ExcelHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ExcelHeaderQueryCellInfo) event provides the ability to modify header cell appearance and content during Excel export, ensuring exported documents match specific formatting requirements or business standards. This event triggers while processing each header cell during the Excel export operation. It has the following parameters: -* [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Value) : It holds the cell value. -* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Column) : It holds the column information, including row and column indexes required to obtain the current header cell information. **Note:** This option is applicable only when virtualization is disabled. -* [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Cell) : It holds the current cell information. -* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Style) : It holds the style properties for the cell. +* [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Value) : Represents the value of the current cell in the exported Excel sheet. +* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Column) : Provides details about the column to which the current cell belongs. **Note:** This option is applicable only when virtualization is disabled. +* [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Cell) : Contains the current cell information and properties. +* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Style) : Contains the style properties that can be applied to the cell. * [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_RowIndex) : It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. * [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_ColumnIndex) : It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. @@ -555,7 +543,7 @@ The event [ExcelHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncf protected override void OnInitialized() { - this.Data = ProductDetails.GetProductData().ToList(); + this.data = ProductDetails.GetProductData().ToList(); // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } @@ -596,7 +584,6 @@ The event [ExcelHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncf } } } - ``` ![Customizing the Blazor Pivot Table cell values and styles while exporting](images/blazor-pivottable-excelexportevents.png) diff --git a/blazor/pivot-table/field-list.md b/blazor/pivot-table/field-list.md index ed79ac7530..093ff014af 100644 --- a/blazor/pivot-table/field-list.md +++ b/blazor/pivot-table/field-list.md @@ -9,20 +9,20 @@ documentation: ug # Field List in Blazor Pivot Table Component -The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) provides a built-in Field List similar to Microsoft Excel. It allows to add or remove fields and also rearrange them between different axes, including column, row, value, and filter along with sort and filter options dynamically at runtime. +The Field List makes it easy to organize and analyze data in your Pivot Table. It provides a user-friendly interface similar to Microsoft Excel that allows you to add or remove fields and move them between different axes like columns, rows, values, and filters. You can also apply sorting and filtering options while working with your data. The field list can be displayed in two different formats to interact with pivot table. They are: -* **In-built Field List (Popup)**: To display the field list icon in pivot table UI to invoke the built-in dialog. -* **Stand-alone Field List (Fixed)**: To display the field list in a static position within a web page. +* **In-built Field List (Popup)**: Shows a field list icon in the Pivot Table interface. Click this icon to open the field list in a dialog box. +* **Stand-alone Field List (Fixed)**: Displays the field list in a fixed position on your web page alongside the Pivot Table. ## In-built Field List (Popup) -To enable the field list in pivot table UI, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. A small icon will appear on the top left corner of the pivot table and clicking on this icon, field list dialog will appear. +The built-in field list provides quick access to modify your Pivot Table report settings without taking up permanent space on your webpage. To enable the field list in pivot table UI, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. A small icon will appear on the top left corner of the pivot table and clicking on this icon, field list dialog will appear. N> The field list icon will be displayed at the top right corner of the pivot table, when grouping bar is enabled. - ```cshtml +```cshtml @using Syncfusion.Blazor.PivotView @@ -53,21 +53,17 @@ N> The field list icon will be displayed at the top right corner of the pivot ta //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` - ![Blazor PivotTable with FieldList Icon](images/blazor-pivottable-fieldlist-icon.png) - ![Blazor PivotTable with FieldList Dialog](images/blazor-pivottabel-fieldlist-dialog.png) - ## Stand-alone Field List (Fixed) -The field list can be rendered in a static position, anywhere in web page layout, like a separate component. To do so, you need to set the [RenderMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_RenderMode) property to [Mode.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Mode.html) in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). +The stand-alone Field List allows users to keep the Field List visible at a specific place on the web page, making it easy to access its options without opening a popup each time. To do so, you need to set the [RenderMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_RenderMode) property to [Mode.Fixed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Mode.html) in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). -N> To make a field list interact with pivot table, you need to use the [UpdateViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateView_System_Object_) and [Update](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_Update_System_Object_) methods for data source update in both field list and pivot table simultaneously. +N> To ensure the field list works seamlessly with the Pivot Table, use the [UpdateViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateViewAsync_Syncfusion_Blazor_PivotView_SfPivotView__0__) and [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateAsync_Syncfusion_Blazor_PivotView_SfPivotView__0__) methods. These methods synchronize data source changes between the field list and Pivot Table components, keeping both components in sync when users make modifications. ```cshtml @@ -121,18 +117,21 @@ N> To make a field list interact with pivot table, you need to use the [UpdateVi this.fieldList.UpdateViewAsync(this.pivotView); } } - ``` ![Blazor PivotTable with Static FieldList](images/blazor-pivottable-static-field-list.png) ## Search desired field -End user can search for desired field in the field list UI by typing the field name into the search box at runtime. It can be enabled by setting the [ShowFieldSearch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_ShowFieldSearch) property to **true** via code-behind. +The field search option helps you quickly locate and work with specific fields in the Field List. Instead of scrolling through the entire list of available fields, you can simply type the field name in the search box to instantly filter and find the desired field. -N> By default, field search option is disabled in the field list UI. Furthermore, this option is only available for relational data sources. +You can enable the field search option in two different Field List configurations: the Stand-alone Field List or the Pivot Table's built-in popup Field List. -To enable search box in the static field list UI, set the [ShowFieldSearch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_ShowFieldSearch) property to **true** in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). +**Stand-alone Field List** + +To enable the search box in the stand-alone Field List UI, set the [ShowFieldSearch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_ShowFieldSearch) property to **true** in [SfPivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html). + +N> By default, the field search option is disabled in the Field List UI. Furthermore, this option is only available for relational data sources. ```cshtml @@ -167,11 +166,13 @@ To enable search box in the static field list UI, set the [ShowFieldSearch](http //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` + ![Static Field List with search in Blazor Pivot Table](images/blazor-pivottable-static-fieldlist-search.png) -To enable search box in the pivot table's built-in popup field list UI, set the [ShowFieldSearch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldSearch) property to **true** in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html). +**Pivot Table's Built-in Popup Field List** + +To enable the search box in the Pivot Table's built-in popup Field List UI, set the [ShowFieldSearch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldSearch) property to **true** in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html). ```cshtml @using Syncfusion.Blazor.PivotView @@ -204,29 +205,29 @@ To enable search box in the pivot table's built-in popup field list UI, set the //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` + ![Popup Field List with search in Blazor Pivot Table](images/blazor-pivottable-popup-fieldlist-search.png) ## Option to sort fields -End user can sort fields in the field list UI to ascending (or) descending (or) default order (as obtained from the data source) using the built-in sort icons. +The field list provides a simple way to organize fields in different orders, making it easier to locate and work with the data you need. Users can sort fields in the field list UI in ascending, descending, or default order (as obtained from the data source) using the built-in sort icons. -N> By default, fields are displayed in the default order. +N> By default, fields are displayed in the default order as they appear in the data source. ![Field list with sorting options in Blazor Pivot Table](images/blazor-pivottable-fieldlist-default-sort.png) ## Add or remove fields -Using check box besides each field, end user can select or unselect to add or remove fields respectively from the report at runtime. +The Field List allows users to quickly modify their data analysis by selecting or unselecting fields as needed. Using the checkbox beside each field, users can easily add fields to include them in the report or remove fields to exclude them from the current analysis at runtime. ![Adding or Removing Fields in Blazor PivotTable](images/blazor-pivottable-add-remove-field.png) ## Remove specific field(s) from displaying -When a data source is bound to the component, fields will be automatically populated inside the Field List. In such case, user can also restrict specific field(s) from displaying. To do so, set the appropriate field name(s) in [ExcludeFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExcludeFields) property belonging to [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. +When you connect a data source to the Pivot Table, all available fields from the data source are automatically shown in the field list. If you want to hide certain fields from the field list, you can do so easily. To hide one or more fields, add their names to the [ExcludeFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ExcludeFields) option inside the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. - ```cshtml +```cshtml @using Syncfusion.Blazor.PivotView @@ -257,20 +258,19 @@ When a data source is bound to the component, fields will be automatically popul //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Hiding Specific Field List in Blazor PivotTable](images/blazor-pivottable-hide-field-list.png) ## Re-arranging fields -In-order to re-arrange, drag any field from the field list and drop it into the column, row, value, or filter axis using the drag-and-drop holder. It helps end user to alter the report at runtime. +To rearrange fields, users can drag a field from the Field List and drop it into the desired axis (column, row, value, or filter) using the drag-and-drop holder. This allows users to modify the report dynamically during runtime, adjusting the layout to suit their needs. ![Rearranging Fields in Blazor PivotTable](images/blazor-pivottable-rearrange-fields.png) ## Filtering members -Using the filter icon besides each field in row, column and filter axes, members can be either included or excluded at runtime. To know more about member filtering, [refer](./filtering) here. +Users can filter members in the row, column, and filter axes by selecting the filter icon next to each field. This opens a dialog where users can choose to include or exclude specific members from the Pivot Table. To learn more about filtering members, [refer to the filtering documentation](./filtering). ![Filter Icon with Each Field in Blazor PivotTable](images/blazor-pivottable-field-list-with-filter-icon.png)
@@ -280,7 +280,7 @@ Using the filter icon besides each field in row, column and filter axes, members ## Sorting members -Using the sort icon besides each field in row and column axes, members can be arranged either in ascending or descending order at runtime. To know more about member sorting, [refer](./sorting) here. +The Pivot Table allows users to sort members in the row and column axes using a sort icon next to each field. By clicking this icon, users can arrange members in either ascending or descending order at runtime. This option helps users organize data in a way that suits their needs. For more details on sorting members, [refer here](./sorting). ![Sorting Icon with Each Field in Blazor PivotTable](images/blazor-pivottable-field-list-with-sort-icon.png)
@@ -288,7 +288,7 @@ Using the sort icon besides each field in row and column axes, members can be ar ## Calculated fields -The calculated field support allows end user to add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. To enable this support in Field List UI, set the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true** in pivot table. Now a button will be seen automatically inside the field list UI which will invoke the calculated field dialog on click. To know more about calculated field, [refer](./calculated-field) here. +The calculated field option allows users to create a new field based on existing fields from the data source using basic arithmetic operations, such as addition, subtraction, multiplication, and division. To use this option in the Field List UI, set the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a button appears in the Field List UI. Clicking this button opens the calculated field dialog, where users can define a new calculated field. For more details on calculated fields, [refer to the calculated field documentation](./calculated-field). ![Blazor PivotTable with Caluclated Field Button](images/blazor-pivottable-calculate-button.png)
@@ -298,24 +298,23 @@ The calculated field support allows end user to add a new calculated field based ## Changing aggregation type of value fields at runtime -End user can perform calculations over a group of values using the aggregation option. The value fields bound to the field list, appears with a dropdown icon, helps to select an appropriate aggregation type at runtime. On selection, the values in the Pivot Table will be changed dynamically. To know more about aggregation, [refer](./aggregation) here. +Users can perform calculations on a group of values by selecting an aggregation type. Each value field in the Field List appears with a dropdown icon. Clicking this icon allows users to choose an aggregation type, such as sum, average, or count, at runtime. Once selected, the Pivot Table updates automatically to reflect the chosen aggregation type for the values. For more details on aggregation, [refer](./aggregation) here. ![Displaying Aggregation Type Icon in Blazor PivotTable](images/blazor-pivottable-aggregation-type-icon.png)
-
![Displaying Pre-defined Aggregation List in Blazor PivotTable](images/blazor-pivottable-pre-defined-aggregation.png)
![Displaying Average Aggregation Type in Blazor PivotGrid Field](images/blazor-pivotgrid-field-list-aggregation.png) ## Defer layout update -Defer layout update support to update the pivot table only on demand and not during every user action. To enable this support in Field List UI, set the [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDeferLayoutUpdate) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true** in pivot table. Now a check box inside Field List UI will be seen in checked state, allowing pivot table to update only on demand. To know more about defer layout, [refer](./defer-layout-update) here. +The defer layout update option allows users to update the Pivot Table only when needed, instead of after every change in the Field List. To enable this option, set the [AllowDeferLayoutUpdate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowDeferLayoutUpdate) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a checkbox appears in the Field List, checked by default. Users can uncheck this checkbox to make changes without updating the Pivot Table immediately, and then apply all changes at once. For more details on defer layout update, [refer](./defer-layout-update) here. ![Blazor PivotTable with Defer Layout Update](images/blazor-pivottable-defer-layout-update.png) ## Show field list using toolbar -It can also be viewed in toolbar by setting [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) and [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) properties in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Also, include the item [ToolbarItems.FieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) within the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. When toolbar is enabled, field list icon will be automatically added into the toolbar and the icon won't appear on top left corner in the pivot table component. +The Field List can be displayed in the toolbar by enabling specific options in the Pivot Table. To show the Field List in the toolbar, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) and [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) properties to **true**. Additionally, include the [ToolbarItems.FieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html#Syncfusion_Blazor_PivotView_ToolbarItems_FieldList) item in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property. When these options are enabled, the Field List icon automatically appears in the toolbar, and it will not be displayed in the top-left corner of the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -351,7 +350,6 @@ It can also be viewed in toolbar by setting [ShowFieldList](https://help.syncfus //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Displaying FieldList using Toolbar in Blazor PivotGrid](images/blazor-pivottable-show-field-list-using-toolbar.png) @@ -360,18 +358,17 @@ It can also be viewed in toolbar by setting [ShowFieldList](https://help.syncfus ### EnginePopulated -The [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated) event is available in both Pivot Table and Field List. +The [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated) event is available in both Pivot Table and Field List. It triggers after the data engine is populated with the updated report settings, allowing the Pivot Table and Field List to stay in sync when changes are made. -* The event [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated) is triggered in field list whenever the report gets modified. The updated report is passed to the pivot table via [UpdateViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateView_System_Object_) method written within this event to refresh the same. +* In the Field List, the [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated) event is triggered whenever the report is modified, such as when fields are added, removed, or rearranged. The updated report is sent to the Pivot Table using the [UpdateViewAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateViewAsync_Syncfusion_Blazor_PivotView_SfPivotView__0__) method within this event to refresh the Pivot Table's display. -* Likewise, [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event is triggered in pivot table whenever the report gets modified. The updated report is passed to the field list via [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_Update_System_Object_) method written within this event to refresh the same. +* Likewise, in the Pivot Table, the [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_EnginePopulated) event is triggered when the report is updated. The modified report is passed to the Field List using the [UpdateAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotFieldList-1.html#Syncfusion_Blazor_PivotView_SfPivotFieldList_1_UpdateAsync_Syncfusion_Blazor_PivotView_SfPivotView__0__) method to ensure the Field List reflects the changes. The event [EnginePopulated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_EnginePopulated) is triggered after engine is populated. It has following parameters - [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EnginePopulatedEventArgs.html#Syncfusion_Blazor_PivotView_EnginePopulatedEventArgs_DataSourceSettings), [PivotFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EnginePopulatedEventArgs.html#Syncfusion_Blazor_PivotView_EnginePopulatedEventArgs_PivotFieldList) and [PivotValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.EnginePopulatedEventArgs.html#Syncfusion_Blazor_PivotView_EnginePopulatedEventArgs_PivotValues). N> This event is not required for Popup field list since it is a in-built one. ```cshtml - @@ -423,15 +420,15 @@ N> This event is not required for Popup field list since it is a in-built one. this.fieldList.UpdateViewAsync(this.pivotView); } } - ``` ### FieldListRefreshed -The event [FieldListRefreshed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldListRefreshed) is triggered whenever there is any change done in the field list UI. It has following parameter - [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldListRefreshedEventArgs.html#Syncfusion_Blazor_PivotView_FieldListRefreshedEventArgs_DataSourceSettings) and [PivotValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldListRefreshedEventArgs.html#Syncfusion_Blazor_PivotView_FieldListRefreshedEventArgs_PivotValues). It allows the user to identify each field list update. This event is applicable only for static field list. +The [FieldListRefreshed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldListRefreshed) event triggers whenever a change occurs in the field list UI, such as adding, removing, or rearranging fields, or applying sort or filter options. This event provides two parameters: [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldListRefreshedEventArgs.html#Syncfusion_Blazor_PivotView_FieldListRefreshedEventArgs_DataSourceSettings) and [PivotValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldListRefreshedEventArgs.html#Syncfusion_Blazor_PivotView_FieldListRefreshedEventArgs_PivotValues). These parameters allow users to track and respond to updates in the field list. The event applies only to the static field list. -```cshtml +For example, when a user sorts a field in the field list, the field list updates, and the [FieldListRefreshed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldListRefreshed) event triggers. Users can perform custom operation inside that event. +```cshtml @@ -487,15 +484,19 @@ The event [FieldListRefreshed](https://help.syncfusion.com/cr/blazor/Syncfusion. //args -> Can get the report and engine. } } - ``` ### FieldDropped -The event [FieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_FieldDropped) fires whenever a field is dropped in an axis. It has following parameters - [DroppedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedAxis), [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField) and [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DataSourceSettings). In this illustration, the [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField) caption is modified through this event at runtime. +The [FieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldListEvents-1.html#Syncfusion_Blazor_PivotView_PivotFieldListEvents_1_FieldDropped) event triggers when a user drops a field into an axis in the Pivot Table. This event provides access to details about the dropped field and the Pivot Table's configuration through its parameters. The event includes the following parameters: -```cshtml +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DataSourceSettings): Represents the current report configuration of the Pivot Table, defined in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. It provides access to the Pivot Table's data structure and settings. +- [DroppedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedAxis): Indicates the axis (such as row, column, value, or filter) where the field has been dropped. +- [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField): Contains details about the field item that was dropped, including its properties. + +In the following code example, we changed the caption of the dropped field using this event at runtime: +```cshtml @using Syncfusion.Blazor.PivotView @@ -531,34 +532,33 @@ The event [FieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor args.DroppedField.Caption = args.DroppedField.Name + " --> " + args.DroppedAxis; } } - ``` ![Displaying Dropped Field in Blazor PivotTable FieldList](images/blazor-pivottable-field-dropped-in-field-list.png) ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when the UI actions such as sorting, filtering, aggregation or edit calculated field, that are present in the field list UI begin. This allows user to identify the current action being performed at runtime. It has the following parameters: +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event triggers when UI actions such as sorting, filtering, aggregation, or editing calculated fields begin in the field list. This event allows users to identify the current action being performed at runtime and provides the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source settings, including input data source, rows, columns, values, filters, format settings, and other configurations. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Contains the name of the current action that has begun. The following table shows the UI actions and their corresponding action names: | Action | Action Name| -|----------------|-------------| +|------|-------------| | [Sort icon](./field-list#sorting-members)| Sort field| | [Filter icon](./field-list#filtering-members)| Filter field| -| [Aggregation](./field-list#changing-aggregation-type-of-value-fields-at-runtime) (Value type drop down and menu)| Aggregate field| -| [Edit icon](./calculated-field#editing-the-existing-calculated-field-formula) | Edit calculated field| +| [Aggregation](./field-list#changing-aggregation-type-of-value-fields-at-runtime) (Value type dropdown and menu)| Aggregate field| +| [Edit icon](./calculated-field#editing-the-existing-calculated-field-formula)| Edit calculated field| | [Calculated field button](./field-list#calculated-fields)| Open calculated field dialog| | [Field list](./field-list#in-built-field-list-popup)| Open field list| -| [Field list tree – Sort icon](./field-list#in-built-field-list-popup)| Sort field tree| +| [Field list tree – Sort icon](./field-list#option-to-sort-fields)| Sort field tree| -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected field information. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): Contains information about the selected field. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> This parameter is available only when the action involves a specific field, such as filtering, sorting, removing a field from the grouping bar, editing, or changing the aggregation type. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): A boolean property that allows you to prevent the current action from completing. Set this to **true** to stop the action from proceeding. In the following example, opening pop-up field list can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. @@ -602,32 +602,32 @@ In the following example, opening pop-up field list can be restricted by setting args.Cancel = true; } } - } ``` + ### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when a UI action such as sorting, filtering, aggregation or edit calculated field, that are present in the field list UI, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event is triggered when UI actions such as sorting, filtering, aggregation, or editing calculated fields in the field list are completed. This event allows users to identify which UI action has been completed at runtime. The event provides the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current data source settings such as input data source, rows, columns, values, filters, format settings, and other configurations. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Contains the name of the completed action. The following table shows the UI actions and their corresponding names: -| Action | Action Name| -|----------------|-------------| -| [Sort icon](./field-list#sorting-members)| Field sorted| -| [Filter icon](./field-list#filtering-members)| Field filtered| -| [Aggregation](./field-list#changing-aggregation-type-of-value-fields-at-runtime)(Value type drop down and menu)| Field aggregated| -| [Edit icon](./calculated-field#editing-the-existing-calculated-field-formula)| Calculated field edited| -| [Calculated field button](./field-list#calculated-fields)| Calculated field applied| -| [Field list](./field-list#in-built-field-list-popup)| Field list closed| -| [Field list tree – Sort icon](./field-list#in-built-field-list-popup)| Field tree sorted| +| Action | Action Name | +|------|-------------| +| [Sort icon](./field-list#sorting-members) | Field sorted | +| [Filter icon](./field-list#filtering-members) | Field filtered | +| [Aggregation](./field-list#changing-aggregation-type-of-value-fields-at-runtime) (Value type dropdown and menu) | Field aggregated | +| [Edit icon](./calculated-field#editing-the-existing-calculated-field-formula) | Calculated field edited | +| [Calculated field button](./field-list#calculated-fields) | Calculated field applied | +| [Field list](./field-list#in-built-field-list-popup) | Field list closed | +| [Field list tree – Sort icon](./field-list#option-to-sort-fields) | Field tree sorted | -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected field information. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Contains information about the selected field. This parameter is available only when field-based UI actions are performed, such as filtering, sorting, removing fields from the grouping bar, editing, and changing aggregation types. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> This parameter is available only when the action involves a specific field, such as filtering, sorting, removing a field from the grouping bar, editing, or changing the aggregation type. -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if sorting is completed, the event argument contains information such as sort order and the field name. +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Contains specific information about the current UI action. For example, when sorting is completed, this parameter includes details such as the sort order and field name. ```cshtml @using Syncfusion.Blazor.PivotView @@ -669,24 +669,24 @@ N> This option is applicable only when the field based UI actions are performed // Triggers when the field list dialog is closed. } } - } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event triggers when a UI action fails to produce the expected result. This event provides detailed information about the failure through the following parameters: * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: | Action | Action Name| -|----------------|-------------| +|------|-------------| | [Sort icon](./field-list#sorting-members)| Sort field| | [Filter icon](./field-list#filtering-members)| Filter field| | [Aggregation](./field-list#changing-aggregation-type-of-value-fields-at-runtime) (Value type drop down and menu)| Aggregate field| | [Edit icon](./calculated-field#editing-the-existing-calculated-field-formula)| Edit calculated field| | [Calculated field button](./field-list#calculated-fields)| Open calculated field dialog| | [Field list](./field-list#in-built-field-list-popup)| Open field list| -| [Field list tree – Sort icon](./field-list#in-built-field-list-popup)| Sort field tree| +| [Field list tree – Sort icon](./field-list#option-to-sort-fields)| Sort field tree| * [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. @@ -744,5 +744,4 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } ``` - -N> 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. +N> 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. \ No newline at end of file diff --git a/blazor/pivot-table/filtering.md b/blazor/pivot-table/filtering.md index db79487c1a..67a8cda5ed 100644 --- a/blazor/pivot-table/filtering.md +++ b/blazor/pivot-table/filtering.md @@ -11,24 +11,21 @@ documentation: ug # Filtering in Blazor Pivot Table Component -Filtering allows to view the pivot table with selective records based on the members that can be either included or excluded through UI and code-behind. +Filtering helps you focus on specific data by showing only the records you need in the Pivot Table. This allows you to analyze relevant information more effectively by including or excluding specific members through the user interface or programmatically. -The following are the three different types of filtering: +The Pivot Table offers three types of filtering options: * Member filtering * Label filtering * Value filtering -To have a quick glance about **Filtering** in the Blazor Pivot Table, watch this video: - -{% youtube -"youtube:https://www.youtube.com/watch?v=r6__Vaz4FDg"%} - -N> When all the above filtering options are disabled via code-behind, then the filter icon would be disabled in the field list or grouping bar UI. +N> When all filtering options are disabled programmatically, the filter icon will not appear in the field list or grouping bar interface. ## Member filtering -It allows to view the pivot table with selective records based on the included and excluded members in each field. By default, member filter option is enabled by the [AllowMemberFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowMemberFilter) boolean property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. This UI option helps end user to filter members by clicking the filter icon besides any field in the row, column and filter axes available in the field list or grouping bar UI at runtime. +This filtering option displays the Pivot Table with selective records based on the members you choose to include or exclude in each field. By default, member filtering is enabled through the [AllowMemberFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowMemberFilter) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. + +Users can apply member filters at runtime by clicking the filter icon next to any field in the row, column, and filter axes, available in both the field list and grouping bar interfaces. ![Number Filtering in Blazor PivotTable](images/blazor-pivottable-field-list-with-filter-icon.png)
@@ -38,14 +35,14 @@ It allows to view the pivot table with selective records based on the included a
![Blazor PivotGrid with Filter](images/blazor-pivotgrid-filter.png) -Meanwhile filtering can also be configured at code behind using the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html) class while initial rendering of the component. The basic settings required to add filter criteria are: +You can also configure filtering programmatically using the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html) class during the initial rendering of the component. The essential settings required to add filter criteria are: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Name): It allows to set the appropriate field name. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type): It allows to set the filter type as [FilterType.Include](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html) or [FilterType.Exclude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html) to include or exclude field members respectively. -* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Items): It allows to set the members which needs to be either included or excluded from display. -* [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_LevelCount): It allows to set level count of the field to fetch data from the cube. **NOTE: This property is applicable only for OLAP data source.** +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Name): Sets the appropriate field name for filtering. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Type): Specifies the filter type as [FilterType.Include](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Include) or [FilterType.Exclude](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Exclude) to include or exclude field members respectively. +* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Items): Defines the members that need to be either included or excluded from the display. +* [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_LevelCount): Sets the level count of the field to fetch data from the cube. **NOTE: This property is applicable only for OLAP data sources.** -N> When specifying unavailable or inappropriate members to include or exclude filter items collection, they will be ignored. +N> When you specify unavailable or inappropriate members in the include or exclude filter items collection, they will be ignored. ```cshtml @using Syncfusion.Blazor.PivotView @@ -89,31 +86,37 @@ N> When specifying unavailable or inappropriate members to include or exclude fi ### Option to select and unselect all members -The member filter dialog comes with an option "All", which on checked selects all members and on unchecked deselects all members. The option "All" would appear in intermediate state mentioning that both selected and unselected child members are available. +This option lets you quickly manage all members at once, saving time when working with large datasets. The member filter dialog includes an **All** option that provides a convenient way to select or deselect all available members with a single click. + +When you check the **All** option, it selects all members in the list. When you uncheck it, all members become deselected. If you manually select some members while others remain unselected, the **All** option displays an intermediate state (partially checked) to show that the list contains both selected and unselected members. ![Displaying Select and UnSelect All Members in Blazor PivotTable](images/blazor-pivottable-select-unselect-member.png) -When all members are deselected, the "Ok" button in member filter dialog would be disabled, meaning, at least one member should be selected and bound to the pivot table component. +N> When all members are deselected, the **OK** button becomes disabled. You must select at least one member to apply the filter and display data in the Pivot Table. ![Displaying Unselected Members in Blazor PivotTable](images/blazor-pivottable-uncheck-members.png) ### Provision to search specific member(s) -By default, search option is available to quickly navigate to the desired members. It can be done by entering the starting character(s) of the actual members. +This option helps you quickly locate specific members without scrolling through long lists. The member filter dialog includes a built-in search box that allows you to find members by typing part of their name. + +Simply enter the starting characters of the member name you want to find, and the list will automatically filter to show only matching members. This makes it easy to locate and select specific members, especially when dealing with large datasets. ![Searching in Blazor PivotTable](images/blazor-pivottable-search.png) ### Option to sort members -User can sort members within the member editor either to ascending (or) descending using the built-in sort icons. When both ascending and descending options are not chosen, then members will be shown in the default order (retrieved as such from data source). +This option allows you to organize members in a logical order for easier selection and review. The member filter dialog provides built-in sort icons that let you arrange members in ascending or descending order. + +You can click the ascending sort icon to arrange members from A to Z (or lowest to highest for numerical values), or click the descending sort icon to arrange them from Z to A (or highest to lowest). When neither sorting option is selected, members appear in their original order as retrieved from the data source. ![Sorting in Blazor PivotTable](images/blazor-pivottable-sorting.png) -### Performance Tips +### Performance tips -In member filter dialog, end user can set the limit to display members while loading large data. Based on this limit, initial loading will get completed quickly without any performance constraint. Also, a message with remaining member count, which are not a part of the UI, will be displayed in the member editor. +The member filter dialog improves loading performance when working with large datasets by limiting the number of members displayed initially. This helps you work with extensive data without experiencing delays while the member list loads. -The data limit can be set using the [MaxNodeLimitInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_MaxNodeLimitInMemberEditor) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. By default, the property holds the numeric value **1000**. +You can control how many members are displayed in the member filter dialog using the [MaxNodeLimitInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_MaxNodeLimitInMemberEditor) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. By default, this property is set to **1000**. When your data contains more members than this limit, only the specified number will be shown initially, and a message will indicate how many additional members are available. ```cshtml @using Syncfusion.Blazor.PivotView @@ -161,20 +164,20 @@ The data limit can be set using the [MaxNodeLimitInMemberEditor](https://help.sy ![Blazor PivotTable with Maximum Node Limit](images/blazor-pivottable-maximum-node-limit.png) -Meanwhile, end user can utilize the search option to refine the members from the exceeded limit. For example, consider that there are 5000 members in the name "Node 1", "Node 2", "Node 3", and so on... and user has set the property [MaxNodeLimitInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_MaxNodeLimitInMemberEditor) to **500**. In this case, only the initial 500 members will be displayed by default leaving a message "4500 more items. Search to refine further.". To get the member(s) between 501 to 5000, enter the starting character(s) in search option to bring the desired member(s) from the exceeded limit to the UI. Now, end user can either check or uncheck to continue with the filtering process. - -![Searching inside Maximum Node Limit in Blazor PivotTable](images/blazor-pivottable-search-in-max-node-limit.png) +When the member count exceeds your set limit, you can use the search option to find specific members beyond the displayed range. For example, if your data contains 5000 members named "Node 1", "Node 2", "Node 3", and so on, and you set the [MaxNodeLimitInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_MaxNodeLimitInMemberEditor) property to **500**, only the first 500 members will appear by default. The dialog will show a message like "4500 more items. Search to refine further." To access members 501 to 5000, type the starting characters in the search box to locate the desired members. Once the members appear in the list, you can select or deselect them to apply your filtering preferences. ### Loading members on-demand N> This property is applicable only for OLAP data sources. -Allows to load members inside the filter dialog on-demand by setting the [LoadOnDemandInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_LoadOnDemandInMemberEditor) property to **true**. By default, first level is loaded in the member editor from the OLAP cube. So, the member editor will be opened quickly, without any performance constraints. By default, this property is set to **true** and the search will only be applied to the level members that are loaded. In the meantime, the next level members can be added using either of the following methods. +This option improves the performance of the member editor by loading members only when needed, rather than loading all members at once. You can enable this by setting the [LoadOnDemandInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_LoadOnDemandInMemberEditor) property to **true**. When enabled, only the first level members are loaded initially from the OLAP cube, allowing the member editor to open quickly without performance delays. -* By clicking on the expander button of the respective member, only its child members will be loaded. -* Select a level from the drop-down list that will load all members up to the chosen level from the cube. +By default, this property is set to **true** and search operations will only apply to the currently loaded level members. You can load additional level members using either of the following methods: -This will help to avoid performance lags when opening a member editor whose hierarchy has a large number of members. Once level members are queried and added one after the other, they will be maintained internally (for all operations like dialog re-opening, drag and drop, etc...) and will not be removed until the web page is refreshed. +* **Expand individual members**: Click the expander button next to any member to load only its child members. +* **Load by level selection**: Choose a specific level from the dropdown list to load all members up to that selected level from the cube. + +This approach prevents performance issues when working with hierarchies that contain large numbers of members. Once level members are loaded, they remain available for all subsequent operations (such as reopening the dialog or drag-and-drop actions) and persist until you refresh the web page. ```cshtml @@ -206,14 +209,14 @@ This will help to avoid performance lags when opening a member editor whose hier ![On-Demand Loading in Blazor PivotTable](images/blazor-pivottable-on-demand-load.png) -In the example above, "Customer Geography" dimension is loaded with first level (Country) during initial loading. The search will therefore be applied on the members of the "Country" level alone. After that, you can load members to the next level (State-Province) on-demand by expanding the "Australia" node (or) by selecting the "State-Province" level from the drop down list. +In the example above, the "Customer Geography" dimension loads with only the first level (Country) initially. Search operations will apply only to the "Country" level members. You can then load the next level members (State-Province) on-demand in two ways: -* When you expand "Australia", the "State-Province" members will be loaded to "Australia" alone. -* If you load the members by selecting the "State-Province" level from the drop-down list means, the "State-Province" members will be loaded across all countries like Australia, Canada, France, etc... +* **Expand specific countries**: When you expand "Australia", the "State-Province" members load only for Australia. +* **Load all states by level**: When you select "State-Province" from the dropdown list, all "State-Province" members load across all countries (Australia, Canada, France, etc.). -Once members are loaded, they are maintained internally and will not be removed until the page is refreshed. +Once loaded, these members are stored internally and remain available until you refresh the page. -If the property is set to **false**, all members of all levels will be queried and added during initial loading itself. Only one query is executed here to retrieve all members from all levels. Since it fetches large number of members, you can feel the performance difference while opening the member editor. But still, expand and search operation is quick here because the members have already been retrieved and populated. +When the [LoadOnDemandInMemberEditor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_LoadOnDemandInMemberEditor) property is set to **false**, all members from all levels are loaded during the initial setup. This approach executes a single query to retrieve all members at once. While this may cause slower performance when opening the member editor due to the large number of members being fetched, expand and search operations will be faster since all members are already available. ![Blazor PivotTable with Initial Member](images/blazor-pivottable-initial-member.png) @@ -221,7 +224,9 @@ If the property is set to **false**, all members of all levels will be queried a N> This property is applicable only for OLAP data sources. -Allows user to load the members on the basis of the level number set in the [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_LevelCount) property in the [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html). By default, this property is set to **1** and the search will only take place within the members of the first level. +This option enables you to control the depth of member loading by specifying how many levels should be loaded initially. By setting the [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_LevelCount) property in the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html), you can improve performance and focus filtering operations on specific hierarchy levels. + +The [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_LevelCount) property is set to **1** by default, which means only the first level members are loaded initially. When you apply filters or search operations, they will only affect the members within the loaded levels. ```cshtml @@ -256,17 +261,17 @@ Allows user to load the members on the basis of the level number set in the [Lev ![Loading Member based on Level Count in Blazor PivotTable](images/blazor-pivottable-load-member-based-on-level.png) -In the example above, we set [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_LevelCount) as **2** for the "Customer Geography" dimension in [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html). So, the "Customer Geography" dimension is loaded with the "Country" and "State-Province" levels during initial loading itself. The search will therefore be applied only to the members of the "Country" and "State-Province" levels. After that, you can load members to the next level on-demand by expanding the respective "State-Province" node (or) by selecting the "City" level from the drop-down list. +In the example above, the [LevelCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_LevelCount) is set to **2** for the "Customer Geography" dimension in [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html). This loads both the "Country" and "State-Province" levels during the initial loading process. Any search or filter operations will be applied only to the members within these two levels. To access members from deeper levels like "City", you can either expand the respective "State-Province" node or select the "City" level from the dropdown list. ## Label filtering -The label filtering helps to view the pivot table with selective header text in fields across row and column axes based on the applied filter criteria. The following are the three different types of label filtering available: +Label filtering allows you to display only the data with specific header text across row and column fields, making it easier to focus on relevant information in your Pivot Table. This filtering works with three types of data: -* Filtering string data type -* Filtering number data type -* Filtering date data type +* String data type +* Number data type +* Date data type -The label filtering dialog can be enabled by setting the [AllowLabelFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowLabelFilter) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **true**. After enabling this API, click the filter icon besides any field in row or column axis available in field list or grouping bar UI. Now a filtering dialog will appear and navigate to "Label" tab to perform label filtering operations. +To enable label filtering, set the [AllowLabelFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowLabelFilter) property to **true** in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. Once enabled, you can access the filtering options by clicking the filter icon next to any field in the row or column axis of the field list or grouping bar. This opens the filtering dialog where you can navigate to the "Label" tab to apply your label filtering criteria. ```cshtml @using Syncfusion.Blazor.PivotView @@ -316,34 +321,37 @@ N> In label filtering UI, based on the field chosen, it’s member data type is ### Filtering string data type through code -This type of filtering is exclusively applicable for fields with members in string data type. The filtering can be configured using the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSettings.html) class through code-behind. The properties required for label filter are: +String-based label filtering enables you to programmatically show only data that matches specific text values in your row and column fields, making it easier to focus on the exact information you need. + +This filtering approach is specifically designed for fields containing string data type members. You can configure the filtering through the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html) class in your code. The following properties are required for label filtering: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Name): Sets the field name. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type): Sets the filter type as [FilterType.Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Label) to the field. -* [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition): Sets the operator type such as [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan), [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan), etc. -* [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1): Sets the start value. -* [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value2): Sets the end value. It is applicable only for the operator such as [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween). -* [SelectedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_SelectedField): Sets level name of a dimension, where the filter settings are to be applied. **NOTE: This property applicable only for OLAP data source.** +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Name): Specifies the field name to apply the filter. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Type): Sets the filter type as [FilterType.Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Label) for the specified field. +* [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition): Defines the operator type such as [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan), [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan), and others. +* [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1): Sets the primary value for comparison. +* [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value2): Sets the secondary value for comparison. This property is only applicable for operators like [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween). +* [SelectedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_SelectedField): Specifies the level name of a dimension where the filter should be applied. **NOTE: This property is applicable only for OLAP data sources.** -For example, in a "Country" field, to show countries names that contains "United" text alone, set [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1) to "United" and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition) to [Operators.Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Contains) for desired output in pivot table. -[Operators](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html) that can be used in label filtering are: +For example, to display only countries containing "United" in their name from a "Country" field, set the [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1) property to "United" and the [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition) property to [Operators.Contains](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Contains). + +The following table shows all available operators for label filtering: | Operator | Description | |------|-------------| -| Equals| Displays the pivot table that matches with the text.| -| DoesNotEquals| Displays the pivot table that does not match with the given text.| -| BeginWith| Displays the pivot table that begins with text.| -| DoesNotBeginWith| Displays the pivot table that does not begins with text.| -| EndsWith| Displays the pivot table that ends with text.| -| DoesNotEndsWith| Displays the pivot table that does not ends with text.| -| Contains| Displays the pivot table that contains text.| -| DoesNotContains| Displays the pivot table that does not contain text.| -| GreaterThan| Displays the pivot table when the text is greater.| -| GreaterThanOrEqualTo| Displays the pivot table when the text is greater than or equal.| -| LessThan| Displays the pivot table when the text is lesser.| -| LessThanOrEqualTo| Displays the pivot table when the text is lesser than or equal.| -| Between| Displays the pivot table that records between the start and end text.| -| NotBetween| Displays the pivot table that does not record between the start and end text.| +| Equals| Shows records that exactly match the specified text.| +| DoesNotEquals| Shows records that do not match the specified text.| +| BeginWith| Shows records that start with the specified text.| +| DoesNotBeginWith| Shows records that do not start with the specified text.| +| EndsWith| Shows records that end with the specified text.| +| DoesNotEndsWith| Shows records that do not end with the specified text.| +| Contains| Shows records that contain the specified text anywhere.| +| DoesNotContains| Shows records that do not contain the specified text.| +| GreaterThan| Shows records where the text value is alphabetically greater.| +| GreaterThanOrEqualTo| Shows records where the text value is alphabetically greater than or equal.| +| LessThan| Shows records where the text value is alphabetically less.| +| LessThanOrEqualTo| Shows records where the text value is alphabetically less than or equal.| +| Between| Shows records with text values that fall between two specified values.| +| NotBetween| Shows records with text values that do not fall between two specified values.| ```cshtml @using Syncfusion.Blazor.PivotView @@ -387,13 +395,20 @@ For example, in a "Country" field, to show countries names that contains "United ### Filtering number data type through code -N> This option is applicable only for relational data source. +N> This option is applicable only for relational data sources. + +Filter numeric data programmatically to display only values that meet specific numeric conditions, helping you analyze data patterns and ranges more effectively. This filtering approach is specifically designed for fields containing numeric data types and follows the same configuration method as string data filtering, with one key difference: set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Type) property to [FilterType.Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Number) enumeration instead of [FilterType.Label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Label). + +To filter numeric values, specify the filtering criteria using the following properties: +- [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1): The primary value for comparison. +- [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition): The comparison operator. +- [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value2): The secondary value (required for [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween) conditions). -This type of filtering is exclusively applicable for fields with members in number data type. The filtering can be configured in a similar way explained in the previous section - "Filtering string data type through code", except the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type) property setting. For number data type, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type) property to [FilterType.Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Number) enumeration. +For example, to display only sales data where the "Sold" field values are between 90 and 100, set [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1) to "90", [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value2) to "100", and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition) to [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between). -For example, in a "Sold" field, to show the values between "90" to "100", set [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1) to "90", [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value2) to "100" and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition) to [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) for desired output in pivot table. +N> The following operators are supported for number data type: [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.DoesNotEquals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_DoesNotEquals), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan), [Operators.GreaterThanOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThanOrEqualTo), [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan), [Operators.LessThanOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThanOrEqualTo), [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between), and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween). -N> Operators like [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.DoesNotEquals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_DoesNotEquals), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan), [Operators.GreaterThanOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThanOrEqualTo), [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan), [Operators.LessThanOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThanOrEqualTo), [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html), and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween) are alone applicable for number data type. +N> Number filtering is available only when the field contains numeric data format. ```cshtml @using Syncfusion.Blazor.PivotView @@ -436,11 +451,13 @@ N> Operators like [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncf ### Filtering date data type through code -This type of filtering is exclusively applicable for fields with members in date data type. The filtering can be configured in a similar way explained in the prior section - "Filtering string data type through code", except the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type) property setting. For date data type, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type) property to [FilterType.Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Date) enumeration. +This filtering option makes it simple to filter data based on date values in your fields, helping you quickly focus on records from specific time periods. This type of filtering is only available for fields that contain date data types and can be configured programmatically using the same approach as explained in the previous section "Filtering string data type through code", with one key difference: set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Type) property to [FilterType.Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Date). -For example, in a "Delivery Date" field, to show the delivery records of the first week of the year 2019, then set [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1) to "2019-01-07" and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition) to [Operators.Before](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Before) for desired output in pivot table. +To apply date filtering, specify your filtering criteria using the [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1) and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition) properties. For example, if you have a "Delivery Date" field and want to show delivery records from before a specific date like "2019-01-07", set the [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1) property to "2019-01-07" and the [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition) property to [Operators.Before](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Before). This will display only the records with delivery dates before January 7, 2019 in your Pivot Table. -N> Operators like [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.DoesNotEquals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_DoesNotEquals), [Operators.Before](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Before), [Operators.BeforeOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_BeforeOrEqualTo), [Operators.After](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_After), [Operators.AfterOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_AfterQrEqualTo), [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between), and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween) are alone applicable for date data type. +N> You can use the following operators with date data type filtering: [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.DoesNotEquals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_DoesNotEquals), [Operators.Before](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Before), [Operators.BeforeOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_BeforeOrEqualTo), [Operators.After](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_After), [Operators.AfterOrEqualTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_AfterOrEqualTo), [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between), and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween). + +N> Date filtering is available only when the field has date type [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSettings.html) configured. ```cshtml @using Syncfusion.Blazor.PivotView @@ -494,17 +511,17 @@ N> Operators like [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncf ![Date Filtering in Blazor PivotTable](images/blazor-pivottable-date-filtering.png) -### Clearing the existing date filter +### Clearing the existing label filter -End user can clear the applied date filter by simply click the "Clear" option at the bottom of the filter dialog under "date" tab. +You can clear the applied label filter by clicking the **Clear** option at the bottom of the filter dialog. This option is located under the **Label** tab for string and number type filtering, and under the **Date** tab for date type filtering. ![Clearing Date Filter in Blazor PivotTable](images/blazor-pivottable-clear-filter.png) ## Value filtering -The value filtering helps to perform filter operation based only on value fields and its resultant aggregated values over other fields defined in row and column axes. +Value filtering allows you to filter data based on aggregated values from measure fields, helping you focus on specific data ranges that meet your criteria. -The value filtering dialog can be enabled by setting the [AllowValueFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowLabelFilter) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **true**. After enabling this API, click the filter icon besides any field in row or column axis available in field list or grouping bar UI. Now a filtering dialog will appear and navigate to "Value" tab to perform value filtering operations. +You can enable value filtering by setting the [AllowValueFilter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_AllowValueFilter) property to **true** in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. Once enabled, click the filter icon next to any field in the row or column axis within the field list or grouping bar. A filtering dialog will appear where you can navigate to the "Value" tab to perform value filtering operations. ```cshtml @using Syncfusion.Blazor.PivotView @@ -550,32 +567,30 @@ The value filtering dialog can be enabled by setting the [AllowValueFilter](http
![Value Filtering in Blazor PivotGrid](images/blazor-pivotgrid-value-filtering.png) -The value filtering can also be configured using the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html) class through code-behind. The properties required for value filter are: - -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Name): Sets the normal field name. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Type): Sets the filter type as [FilterType.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html) to the field. -* [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Measure): Sets the value field name. -* [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition): Sets the operator type such as [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html), [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan) etc. -* [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1): Sets the start value. -* [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value2): Sets the end value. It is applicable only for the operator such as [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween). -* [SelectedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_SelectedField): Sets level name of a dimension, where the filter settings are to be applied. +You can also configure value filtering programmatically using the [PivotViewFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html) class. The following properties are required for value filtering: -N> [SelectedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_SelectedField) property applicable only for OLAP data source. +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Name): Specifies the field name to which the filter applies. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Type): Sets the filter type as [FilterType.Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FilterType.html#Syncfusion_Blazor_PivotView_FilterType_Value). +* [Measure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Measure): Specifies the value field name used for filtering. +* [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition): Defines the comparison operator such as [Operators.Equals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Equals), [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan), or [Operators.LessThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_LessThan). +* [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1): Sets the comparison value or the start value for range operations. +* [Value2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value2): Sets the end value, applicable only for [Operators.Between](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_Between) and [Operators.NotBetween](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_NotBetween) operators. +* [SelectedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_SelectedField): Specifies the dimension level name where filter settings apply. **Note: This property is only applicable for OLAP data sources.** -For example, to show the data where total sum of units sold for each country exceeding 1500, set [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Value1) to "1500" and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilterSetting.html#Syncfusion_Blazor_PivotView_PivotViewFilterSetting_Condition) to [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan) in the "Country" field. +For example, to display data where the total sum of units sold for each country exceeds 1500, set the [Value1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Value1) to "1500" and [Condition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFilterSetting.html#Syncfusion_Blazor_PivotView_PivotFilterSetting_Condition) to [Operators.GreaterThan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html#Syncfusion_Blazor_PivotView_Operators_GreaterThan) for the "Country" field. -[Operators](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Operators.html) that can be used in value filtering are: +The following table shows the available operators for value filtering: | Operator | Description | |------|-------------| -| Equals| Displays the pivot table that matches with the value.| -| DoesNotEquals| Displays the pivot table that does not match with the given value.| -| GreaterThan| Displays the pivot table when the value is greater.| -| GreaterThanOrEqualTo| Displays the pivot table when the value is greater than or equal.| -| LessThan| Displays the pivot table when the value is lesser.| -| LessThanOrEqualTo| Displays the pivot table when the value is lesser than or equal.| -| Between| Displays the pivot table that records between start and end values.| -| NotBetween| Displays the pivot table that does not record between start and end values.| +| Equals| Shows records that match the specified value.| +| DoesNotEquals| Shows records that do not match the specified value.| +| GreaterThan| Shows records where the value is greater than the specified value.| +| GreaterThanOrEqualTo| Shows records where the value is greater than or equal to the specified value.| +| LessThan| Shows records where the value is less than the specified value.| +| LessThanOrEqualTo| Shows records where the value is less than or equal to the specified value.| +| Between| Shows records with values between the specified start and end values.| +| NotBetween| Shows records with values outside the specified start and end values.| ```cshtml @using Syncfusion.Blazor.PivotView @@ -618,7 +633,7 @@ For example, to show the data where total sum of units sold for each country exc ### Clearing the existing value filter -End user can clear the applied value filter by simply click the "Clear" option at the bottom of the filter dialog under "Value" tab. +You can clear the applied value filter by clicking the "Clear" option at the bottom of the filter dialog under the "Value" tab. ![Clearing Value Filter in Blazor PivotTable](images/blazor-pivottable-clear-value-filter.png) @@ -626,18 +641,17 @@ End user can clear the applied value filter by simply click the "Clear" option a ### MemberEditorOpen -The event [MemberEditorOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_MemberEditorOpen) fires while opening member editor dialog. It allows to customize the field members to be displayed in the dialog. It has the following parameters - -* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_FieldName): It holds the name of the appropriate field. - -* [FieldMembers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_FieldMembers): It holds the members of a field. +When you open the Member Editor dialog, the [MemberEditorOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_MemberEditorOpen) event is triggered. With this event, you can decide which field members are shown, making it easier to include or exclude specific items. The event provides the following options: -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_Cancel): It is a boolean property and by setting this to true, dialog won’t be created. +* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_FieldName): The name of the field for which the Member Editor dialog opens. +* [FieldMembers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_FieldMembers): The list of all members in the selected field. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_Cancel): If you set this property to true, the Member Editor dialog will not open. +* [FilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MemberEditorOpenEventArgs.html#Syncfusion_Blazor_PivotView_MemberEditorOpenEventArgs_FilterSetting): Contains the current filter settings including filter items, types, and conditions. In the below sample, the member editor of field "Country" shows only the selected Item. ```cshtml - @using Syncfusion.Blazor.PivotView +@using Syncfusion.Blazor.PivotView @@ -683,21 +697,19 @@ In the below sample, the member editor of field "Country" shows only the selecte } } } - ``` -### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when clicking the filter icon in the field button, which is present in both grouping bar and field list UI. This allows user to identify the current action being performed at runtime. It has the following parameters: - -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +### OnActionBegin -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. For example, while filtering, the action name will be shown as **Filter field**. +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event is triggered when a user clicks the filter icon on a field button in either the grouping bar or the field list, allowing users to monitor and control actions in the Pivot Table. The event argument includes the following properties: -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected field information. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source configuration, including input data, rows, columns, values, filters, format settings, and other report settings. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Indicates the name of the action being initiated, such as **Filter field** for filtering. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): Provides information about the selected field for the action. N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): A boolean property that allows you to prevent the current action from completing. Set this to **true** to stop the action. In the following example, filter action can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. @@ -744,19 +756,20 @@ In the following example, filter action can be restricted by setting the **args. } ``` -### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the filtering action via the field button, which is present in both grouping bar and field list UI, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +### OnActionComplete -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event triggers when filtering actions are completed through the field button in both the grouping bar and field list UI. You can use this event to monitor current UI actions and implement custom logic based on the completed operations. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. For example, after filtering, the action name will be shown as **Field filtered**. +The event provides the following parameters: -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected field information. +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current data source configuration, including input data source, rows, columns, values, filters, format settings, and other report settings. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Specifies the name of the completed action. For filtering operations, the action name appears as **Field filtered**. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Contains information about the selected field that was involved in the action. N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if the filter action is completed, the event argument contains information such as filter members, field name, and so on. +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Provides detailed information about the current UI action. For filtering operations, this includes filter members, field name, and other relevant details. ```cshtml @using Syncfusion.Blazor.PivotView @@ -801,9 +814,10 @@ N> This option is applicable only when the field based UI actions are performed } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event is triggered when a UI action fails to produce the expected result. This event provides detailed information about the failure through the following parameters: * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. For example, if the action fails while filtering, the action name will be shown as **Filter field**. @@ -863,4 +877,5 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } } ``` + 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 knows how to render and configure the pivot table. \ No newline at end of file diff --git a/blazor/pivot-table/getting-started-webapp.md b/blazor/pivot-table/getting-started-webapp.md index 5c38fb2e29..b250121d87 100644 --- a/blazor/pivot-table/getting-started-webapp.md +++ b/blazor/pivot-table/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Pivot Table in Blazor Web App -This section briefly explains about how to include [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to add a [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component to your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code, or .NET CLI. Follow these steps to set up and display data in the Pivot Table with ease. > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) @@ -19,23 +19,25 @@ This section briefly explains about how to include [Blazor Pivot Table](https:// ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +To create a Blazor Web App in Visual Studio 2022, use [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed steps, see the [Blazor Web App Getting Started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application. +When creating the app, select the appropriate interactive render mode and interactivity location. For more information, refer to the [interactive render mode documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows). ![Create Blazor Web App](images/blazor-create-web-app.png) ## Install Syncfusion® Blazor PivotTable and Themes NuGet in the App -To add **Blazor Pivot Table** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor Pivot Table component, install the required NuGet packages in your project. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +1. Open the NuGet Package Manager in Visual Studio by navigating to *Tools > NuGet Package Manager > Manage NuGet Packages for Solution*. +2. Search for and install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes). +3. If your Blazor Web App uses `WebAssembly` or `Auto` render modes, ensure these packages are installed in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, run the following commands in the Package Manager Console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -46,7 +48,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +> **Note**: Syncfusion Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of available NuGet packages, see the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -54,15 +56,15 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +To create a Blazor Web App, use Visual Studio Code with [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed steps, see the [Blazor Web App Getting Started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +When creating the app, select the appropriate interactive render mode and interactivity location. For more details, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For example, to create a Blazor Web App with the `Auto` interactive render mode, run these commands in the terminal: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -76,14 +78,13 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor PivotTable and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If your Blazor Web App uses `WebAssembly` or `Auto` render modes, install Syncfusion Blazor NuGet packages in the client project. -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +1. Open the integrated terminal in Visual Studio Code by pressing Ctrl+`. +2. Ensure you are in the project root directory where the `.csproj` file is located. +3. Run the following commands to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes) NuGet packages: {% tabs %} - {% highlight c# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.PivotTable -v {{ site.releaseversion }} @@ -91,10 +92,9 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore {% endhighlight %} - {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). For a complete list of available NuGet packages, see the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages). {% endtabcontent %} @@ -102,7 +102,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +- Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux): {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,11 +114,11 @@ dotnet --version ## Create a Blazor Web App using .NET CLI -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +To create a new Blazor Web App, run the following commands in a command prompt (Windows), terminal (macOS), or command shell (Linux). For detailed steps, see the [Blazor Web App Getting Started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli). -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Select the appropriate interactive render mode and interactivity location when setting up the app. For more details, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: +For example, to create a Blazor Web App with the `Auto` interactive render mode, run these commands: {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -156,7 +156,7 @@ N> Syncfusion® Blazor components are availa ## Add Import Namespaces -Open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespace. +To use the Blazor Pivot Table, add the required namespaces to the **~/_Imports.razor** file in your client project. Include `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` to access the pivot table functionality. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -169,9 +169,7 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. - -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file. This step enables the pivot table component in your Blazor Web App. If your app uses `WebAssembly` or `Auto` interactive render modes, register the service in both the main `server` project and the associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -207,7 +205,7 @@ await builder.Build().RunAsync(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Include the Syncfusion theme stylesheet and script in your Blazor Web App to style and enable the pivot table. Add the stylesheet in the `` section and the script at the end of the `` in the **~/Components/App.razor** file, as shown below: ```html @@ -224,19 +222,21 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Explore the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to learn about referencing themes using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). Visit the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different ways to add script references. ## Initializing Blazor pivot Table component -Add the Syncfusion® Blazor Pivot Table component to a Razor page located under the Pages folder (e.g., Pages/Home.razor) in either the **Server** or **Client** project. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +To display the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) in your app, add the component to a Razor page, such as **Pages/Home.razor**, in either the Server or Client project. If your app uses per-page or per-component interactivity, specify the render mode at the top of the Razor file. Choose the appropriate render mode based on your app’s setup: -| Interactivity location | RenderMode | Code | +| Interactivity Location | Render Mode | Code | | --- | --- | --- | -| Per page/component | Auto | @rendermode InteractiveAuto | -| | WebAssembly | @rendermode InteractiveWebAssembly | -| | None | --- | +| Per page/component | Auto | `@rendermode InteractiveAuto` | +| Per page/component | WebAssembly | `@rendermode InteractiveWebAssembly` | +| Per page/component | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default. +N> If your app uses global interactivity with Auto or WebAssembly render modes, the render mode is already set in the **App.razor** file. + +Add the following code to your Razor page to include the Pivot Table component: {% tabs %} {% highlight razor %} @@ -257,7 +257,9 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i ## Assigning sample data to the Blazor pivot table -The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component further needs to be populated with an appropriate data source. For illustration purpose, a collection of objects mentioning the sales details of certain products over a period and region has been prepared. This sample data is assigned to the pivot table component through [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) class. +To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize. + +For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. {% tabs %} {% highlight razor %} @@ -369,44 +371,45 @@ The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-piv {% endhighlight %} {% endtabs %} -## Adding fields to row, column, value and filter axes +## Adding fields to row, column, value, and filter axes -Now that pivot table is initialized and assigned with sample data, will further move to showcase the component by organizing appropriate fields in row, column, value and filter axes. +Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool. -In [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four major axes - [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) and [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) plays a vital role in defining and organizing fields from the bound data source, to render the entire pivot table component in a desired format. +In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format. -[PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that needs to be displayed in row axis of the pivot table. +**Understanding the four axes:** -[PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that needs to be displayed in column axis of the pivot table. +- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table. +- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table. +- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table. +- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table. -[PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that needs to be displayed as aggregated numeric values in the pivot table. +**Essential field properties:** -[PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) - Collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. +To define each field in its respective axis, configure the following basic properties: -In-order to define each field in the respective axis, the following basic properties should be set. - -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Name): It allows to set the field name from the bound data source. It’s casing should match exactly like in the data source and if not set properly, the pivot table will not be rendered. -* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Caption): It allows to set the field caption, which is the alias name of the field that needs to be displayed in the pivot table. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Type): It allows to set the summary type of the field. By default, [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) is applied. +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly. +* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied. {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -     + + + @code{ @@ -421,13 +424,15 @@ In-order to define each field in the respective axis, the following basic proper {% endhighlight %} {% endtabs %} +## Applying formatting to a value field +Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity. -## Applying formatting to a value field +To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data. -Formatting defines a way in which values should be displayed. For example, format **"C"** denotes the values should be displayed in currency pattern. To do so, define the [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class with its [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name) and [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format) properties and add it to [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). In this illustration, the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name) property is set as **Amount**, a field from value section and its format is set as currency. Likewise, we can set format for other value fields as well and add it to [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). +Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols. -N> Only fields from value section, which is in the form of numeric data values are applicable for formatting. +N> Formatting can only be applied to numeric fields in the value section of the Pivot Table. {% tabs %} {% highlight razor %} @@ -470,29 +475,31 @@ N> Only fields from value section, which is in the form of numeric data values a ## Enable Field List -The field list allows to add or remove fields and also rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime. It can be enabled by setting the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property to **true**. To know more about field list, [refer](./field-list) here. +The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes. + +To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation. {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         + + -     + @code{ @@ -511,7 +518,9 @@ The field list allows to add or remove fields and also rearrange the fields betw ## Enable Grouping Bar -The grouping bar feature automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and alter pivot table at runtime. It also provides option to sort, filter and remove fields. It can be enabled by setting the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property to **true**. To know more about grouping bar, [refer](./grouping-bar) here. +The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data. + +Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar). {% tabs %} {% highlight razor %} @@ -552,7 +561,9 @@ The grouping bar feature automatically populates fields from the bound data sour ## Exploring Filter Axis -The filter axis contains collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. The fields along with filter members could be set to filter axis either through report via code behind or by dragging and dropping fields from other axes to filter axis via grouping bar or field list at runtime. +The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure. + +The following example shows how to add a field to the filter axis in a Blazor Pivot Table: {% tabs %} {% highlight razor %} @@ -595,9 +606,15 @@ The filter axis contains collection of fields that would act as master filter ov ## Calculated Field -The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [PivotViewCalculatedFieldSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [refer](./calculated-field) here. +The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting. + +Users can add calculated fields in two ways: +- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table. +- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a button appears in the Field List UI. Clicking this button opens a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here. -> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis. +N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis. + +Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog: {% tabs %} {% highlight razor %} @@ -644,13 +661,9 @@ The calculated field feature allows user to insert or add a new calculated field ## Handling exceptions -Exceptions occurred during pivot table actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event. - -The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event contains the error details returned from the server. - -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. +You can handle errors that occur during Pivot Table actions without stopping your application. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event to capture error messages or details from the server. We recommend binding this event while building your app, as it helps you identify issues early. You can share these error details with our support team to get help quickly. -The following sample code demonstrates notifying user when server-side exception has occurred during data operation, +The following code example shows how to display a server-side error message to the user when a data operation fails: {% tabs %} {% highlight razor %} diff --git a/blazor/pivot-table/getting-started-with-server-app.md b/blazor/pivot-table/getting-started-with-server-app.md index 6ec6265dd9..e499218c55 100644 --- a/blazor/pivot-table/getting-started-with-server-app.md +++ b/blazor/pivot-table/getting-started-with-server-app.md @@ -9,11 +9,11 @@ documentation: ug # Getting Started with Blazor Pivot Table Component in Server App -This section briefly explains about how to include [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to add the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component to your Blazor Server App using Visual Studio, Visual Studio Code, or the .NET CLI. > **Ready to streamline your Syncfusion® Blazor development?**
Discover the full potential of Syncfusion® Blazor components with Syncfusion® AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) -To get start quickly with Blazor Pivot Table, you can check on this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PivotTable) sample: +To quickly get started with the Blazor Pivot Table, check out this [GitHub sample](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PivotTable). {% tabcontents %} @@ -21,15 +21,15 @@ To get start quickly with Blazor Pivot Table, you can check on this [GitHub](htt ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- Ensure your system meets the [requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements). -## Create a new Blazor App in Visual Studio +## Create a new Blazor Server App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** using the **Blazor Web App** template in Visual Studio. You can use [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For step-by-step guidance, refer to the [Blazor Server App Getting Started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio). -## Install Syncfusion® Blazor PivotTable and Themes NuGet in the App +## Install Syncfusion® Blazor PivotTable and Themes NuGet packages -To add **Blazor Pivot Table** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To include the **Blazor Pivot Table** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*). Search for and install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) packages. Alternatively, run the following commands in the Package Manager Console. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -40,7 +40,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and component details. {% endtabcontent %} @@ -48,33 +48,30 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +- Ensure your system meets the [requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements). -## Create a new Blazor App in Visual Studio Code +## Create a new Blazor Server App in Visual Studio Code -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code with [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, see the [Blazor Server App Getting Started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code). -Alternatively, you can create a server application using the following command in the terminal(Ctrl+`). +Alternatively, use the following commands in the integrated terminal (Ctrl+`) to create a new Blazor Server App. {% tabs %} - {% highlight c# tabtitle="Blazor Server App" %} dotnet new blazor -o BlazorApp -int Server cd BlazorApp {% endhighlight %} - {% endtabs %} -## Install Syncfusion® Blazor PivotTable and Themes NuGet in the App +## Install Syncfusion® Blazor PivotTable and Themes NuGet packages -* Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +1. Open the integrated terminal in Visual Studio Code with Ctrl+`. +2. Ensure you are in the project root directory where the `.csproj` file is located. +3. Run the following commands to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} - {% highlight c# tabtitle="Package Manager" %} dotnet add package Syncfusion.Blazor.PivotTable -v {{ site.releaseversion }} @@ -82,10 +79,9 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} dotnet restore {% endhighlight %} - {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and component details. {% endtabcontent %} @@ -93,7 +89,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +- Install the latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). To check the installed version, run the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -105,7 +101,7 @@ dotnet --version ## Create a Blazor Server App using .NET CLI -Run the `dotnet new blazorserver` command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux) to create a new Blazor Server App. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -116,11 +112,11 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates a new Blazor Server App in a directory named `BlazorApp`. For more details, see the [Create Blazor app](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) documentation. -## Install Syncfusion® Blazor PivotTable and Themes NuGet in the App +## Install Syncfusion® Blazor PivotTable and Themes NuGet packages -Here's an example of how to add **Blazor Pivot Table** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Run the following commands in the command prompt (Windows), terminal (macOS), or command shell (Linux) to install the [Syncfusion.Blazor.PivotTable](https://www.nuget.org/packages/Syncfusion.Blazor.PivotTable/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and restore dependencies. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -132,30 +128,27 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages documentation](https://blazor.syncfusion.com/documentation/nuget-packages) for a complete list of available packages and component details. {% endtabcontent %} {% endtabcontents %} -## Add Import Namespaces +## Add import namespaces -Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotTable` namespace. +To use the Pivot Table component, open the **~/_Imports.razor** file and include the `Syncfusion.Blazor` and `Syncfusion.Blazor.PivotView` namespaces. This allows your app to access the necessary Pivot Table classes and options. ```cshtml - @using Syncfusion.Blazor -@using Syncfusion.Blazor.PivotTable - +@using Syncfusion.Blazor.PivotView ``` -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor Server App. This step enables the pivot table component in your Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} - .... .... using Syncfusion.Blazor; @@ -168,13 +161,12 @@ var builder = WebApplication.CreateBuilder(args); builder.Services.AddSyncfusionBlazor(); .... - {% endhighlight %} {% endtabs %} ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +To style and enable the Blazor Pivot Table, include the theme stylesheet and script from NuGet via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet in the `` section and the script at the end of the `` section in the **App.razor** file, as shown below: ```html @@ -192,18 +184,22 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Visit the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) section to learn about referencing themes using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), or [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). Also, explore the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) section for different ways to include script references in your Blazor application. ## Add Blazor Pivot Table component -Add the Syncfusion® Blazor Pivot Table component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +To include the Syncfusion® Blazor Pivot Table component, add it to the **~/Components/Pages/Home.razor** file. If your app uses per-page or per-component interactivity, specify the render mode at the top of the **Home.razor** file, as shown below: -N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. +N> If your app uses global interactivity with the **Server** render mode, this is configured by default in the **App.razor** file. -``` -@* desired render mode define here *@ +{% tabs %} +{% highlight razor %} + +@* Specify the render mode for the page *@ @rendermode InteractiveServer -``` + +{% endhighlight %} +{% endtabs %} {% tabs %} {% highlight razor %} @@ -215,14 +211,16 @@ N> If an Interactivity Location is set to `Global` and the **Render Mode** is se ## Assigning sample data to the Blazor pivot table -The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component further needs to be populated with an appropriate data source. For illustration purpose, a collection of objects mentioning the sales details of certain products over a period and region has been prepared. This sample data is assigned to the pivot table component through [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) class. +To enable users to perform meaningful analysis and generate actionable insights, the Pivot Table component requires a well-structured data source. This data source contains the information you want to analyze and visualize. + +For demonstration purposes, a collection of objects containing sales details for various products across different periods and regions has been prepared. This sample data is assigned to the Pivot Table component through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property under the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. {% tabs %} {% highlight razor %} -   -     + + @code{ @@ -327,44 +325,45 @@ The [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-piv {% endhighlight %} {% endtabs %} -## Adding fields to row, column, value and filter axes +## Adding fields to row, column, value, and filter axes -Now that pivot table is initialized and assigned with sample data, will further move to showcase the component by organizing appropriate fields in row, column, value and filter axes. +Organizing fields into appropriate axes transforms raw data into a structured, meaningful Pivot Table that enables users to analyze patterns and trends effectively. With the Pivot Table now initialized and populated with sample data, the next logical step involves organizing the appropriate fields into row, column, value, and filter axes to create a functional data analysis tool. -In [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four major axes - [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) and [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) plays a vital role in defining and organizing fields from the bound data source, to render the entire pivot table component in a desired format. +In the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class, four primary axes play a crucial role in defining and organizing fields from the bound data source to render the Pivot Table component in the desired format. -[PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that needs to be displayed in row axis of the pivot table. +**Understanding the four axes:** -[PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that needs to be displayed in column axis of the pivot table. +- [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html) – Collection of fields that will be displayed along the row axis of the Pivot Table. +- [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) – Collection of fields that will be displayed along the column axis of the Pivot Table. +- [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that will be displayed as aggregated numeric values within the Pivot Table. +- [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) – Collection of fields that act as master filters over the data bound to the row, column, and value axes of the Pivot Table. -[PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) – Collection of fields that needs to be displayed as aggregated numeric values in the pivot table. +**Essential field properties:** -[PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) - Collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. +To define each field in its respective axis, configure the following basic properties: -In-order to define each field in the respective axis, the following basic properties should be set. - -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Name): It allows to set the field name from the bound data source. It’s casing should match exactly like in the data source and if not set properly, the pivot table will not be rendered. -* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Caption): It allows to set the field caption, which is the alias name of the field that needs to be displayed in the pivot table. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_Type): It allows to set the summary type of the field. By default, [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html) is applied. +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Name): Sets the field name from the bound data source. The casing must match exactly as it appears in the data source, otherwise the Pivot Table will not render correctly. +* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Caption): Sets the field caption, which serves as the display name for the field in the Pivot Table. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_Type): Sets the summary type for the field. By default, the [SummaryTypes.Sum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SummaryTypes.html#Syncfusion_Blazor_PivotView_SummaryTypes_Sum) aggregation is applied. {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         -     + + + @code{ @@ -381,31 +380,35 @@ In-order to define each field in the respective axis, the following basic proper ## Applying formatting to a value field -Formatting defines a way in which values should be displayed. For example, format **"C"** denotes the values should be displayed in currency pattern. To do so, define the [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class with its [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name) and [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format) properties and add it to [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). In this illustration, the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name) property is set as **Amount**, a field from value section and its format is set as currency. Likewise, we can set format for other value fields as well and add it to [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). +Formatting enhances the readability and presentation of numerical data in a Pivot Table, making it more user-friendly and professional. For example, you can display values with currency symbols or adjust the number of decimal places for greater clarity. + +To apply formatting to value fields in a Pivot Table, use the [PivotViewFormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) class. This class accepts a list of [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) objects, each defining formatting rules for a specific field in your data. -N> Only fields from value section, which is in the form of numeric data values are applicable for formatting. +Within each [PivotViewFormatSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html) object, set the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Name) property to match the exact field name from your value section. Then, specify the desired display format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFormatSetting.html#Syncfusion_Blazor_PivotView_PivotFormatSetting_Format) property. In the example below, the **Amount** field is configured to display values in currency format using the "C" pattern, which includes currency symbols. + +N> Formatting can only be applied to numeric fields in the value section of the Pivot Table. {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         + + -     + @code{ @@ -426,29 +429,31 @@ N> Only fields from value section, which is in the form of numeric data values a ## Enable Field List -The field list allows to add or remove fields and also rearrange the fields between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime. It can be enabled by setting the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property to **true**. To know more about field list, [refer](./field-list) here. +The field list enhances user interaction by allowing you to dynamically add, remove, and rearrange fields across different axes, including column, row, value, and filter axes. This user-friendly interface also provides sorting and filtering options that can be applied at runtime without requiring code changes. + +To enable the field list, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. This activates the field list interface, making it accessible to users to modify Pivot Table report settings. For comprehensive details about field list functionality, [refer](./field-list) to the dedicated field list documentation. {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         + + -     + @code{ @@ -467,29 +472,31 @@ The field list allows to add or remove fields and also rearrange the fields betw ## Enable Grouping Bar -The grouping bar feature automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and alter pivot table at runtime. It also provides option to sort, filter and remove fields. It can be enabled by setting the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property to **true**. To know more about grouping bar, [refer](./grouping-bar) here. +The grouping bar allows users to easily manage and modify the report settings of the Pivot Table directly through the user interface. With the grouping bar, users can instantly move fields between columns, rows, values, and filters by dragging them, allowing for quick arrangement and analysis of the data. + +Users can also use the grouping bar to sort, filter, or remove fields quickly without needing to write any code. To enable the grouping bar, set the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. For more details about using the grouping bar, see the [Grouping Bar documentation](./grouping-bar). {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             -         + + -     + @code{ @@ -508,31 +515,33 @@ The grouping bar feature automatically populates fields from the bound data sour ## Exploring Filter Axis -The filter axis contains collection of fields that would act as master filter over the data bound in row, column and value axes of the pivot table. The fields along with filter members could be set to filter axis either through report via code behind or by dragging and dropping fields from other axes to filter axis via grouping bar or field list at runtime. +The filter axis lets you show only the data you need in the Blazor Pivot Table, making analysis simpler. You can add fields to the filter axis to control what data appears in the [PivotViewRows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html), [PivotViewColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html), and [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) axes. You can set up these fields in two ways: by adding them to the [PivotViewFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFilter.html) collection in your code, or by dragging and dropping fields from other axes to the filter axis using the grouping bar or field list during runtime. This helps you focus on specific data without changing the Pivot Table’s structure. + +The following example shows how to add a field to the filter axis in a Blazor Pivot Table: {% tabs %} {% highlight razor %} -   -         -             -             -         -       + + + + + + -         + -             -         + + -     + @code{ @@ -551,36 +560,42 @@ The filter axis contains collection of fields that would act as master filter ov ## Calculated Field -The calculated field feature allows user to insert or add a new calculated field based on the available fields from the bound data source using basic arithmetic operators. The calculated field can be included in pivot table using the [PivotViewCalculatedFieldSetting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class from code behind. Or else, calculated fields can be added at run time through the built-in dialog by just setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property to **true** in pivot table. You will see a button enabled in the Field List UI automatically to invoke the calculated field dialog and perform necessary operation. To know more about calculated field, [refer](./calculated-field) here. +The calculated field feature enables users to create custom value fields using mathematical formulas and existing fields from their data source. Users can perform complex calculations with basic arithmetic operators and seamlessly integrate these custom fields into their Pivot Table for enhanced data visualization and reporting. + +Users can add calculated fields in two ways: +- **Using code:** Set up calculated fields through the [PivotViewCalculatedFieldSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCalculatedFieldSetting.html) class when configuring the Pivot Table. +- **Using the user interface:** Alternatively, calculated fields can be added at runtime through a built-in dialog by setting the [AllowCalculatedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowCalculatedField) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, a button appears in the Field List UI automatically to open a dialog that allows users to create, edit, or remove calculated fields at runtime. To learn more about calculated fields, [refer](./calculated-field) here. -> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the pivot table UI, it must be added to the [`PivotViewValues`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis. +N> By default, the calculated fields created through code-behind are only added to the field list and calculated field dialog UI. To display the calculated field in the Pivot Table UI, it must be added to the [PivotViewValues](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValue.html) class, as shown in the code below. Additionally, calculated fields can only be added to the value axis. + +Below is a sample code that shows how to set up calculated fields both through code-behind and using the popup dialog: {% tabs %} {% highlight razor %} -   -         -             -             -         -         -             -             -         -         + + + + + + + + + + -             + -         -         -             + + + -         -   -             -         -     + + + + + @code{ @@ -600,13 +615,9 @@ The calculated field feature allows user to insert or add a new calculated field ## Handling exceptions -Exceptions occurred during pivot table actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event. - -The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event contains the error details returned from the server. - -N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible. +You can handle errors that occur during Pivot Table actions without stopping your application. Use the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event to capture error messages or details from the server. We recommend binding this event while building your app, as it helps you identify issues early. You can share these error details with our support team to get help quickly. -The following sample code demonstrates notifying user when server-side exception has occurred during data operation, +The following code example shows how to display a server-side error message to the user when a data operation fails: {% tabs %} {% highlight razor %} @@ -660,7 +671,7 @@ The following sample code demonstrates notifying user when server-side exception {% endhighlight %} {% endtabs %} -N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PivotTable) +N> [View Sample in GitHub.](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/PivotTable/BlazorWebApp) ## See also diff --git a/blazor/pivot-table/globalization.md b/blazor/pivot-table/globalization.md index d569740c9d..25d1451337 100644 --- a/blazor/pivot-table/globalization.md +++ b/blazor/pivot-table/globalization.md @@ -15,7 +15,7 @@ documentation: ug ## Right-to-left (RTL) -Right-to-left (RTL) provides an option to switch the text direction and layout of the pivot table component from right to left. It improves user experiences and accessibility for users who use right-to-left languages (Arabic, Farsi, Urdu, etc.). In the following code sample, the `EnableRtl` property is used to enable RTL in the pivot table. +Right-to-left (RTL) support makes the Pivot Table more accessible and user-friendly for people who read and write in right-to-left languages such as Arabic, Farsi, and Urdu. This feature adjusts the text direction and layout of the entire Pivot Table from a left-to-right to a right-to-left orientation. To enable RTL in the Pivot Table, set the [`EnableRtl`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableRtl) property to **true**. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/grouping-bar.md b/blazor/pivot-table/grouping-bar.md index c8d26b111d..73af98fe4c 100644 --- a/blazor/pivot-table/grouping-bar.md +++ b/blazor/pivot-table/grouping-bar.md @@ -14,17 +14,17 @@ To have a quick glance about **Grouping Bar** in the Blazor Pivot Table, watch t {% youtube "youtube:https://www.youtube.com/watch?v=Odkh7RkvjoY&t=109s"%} -The Grouping Bar option in pivot table automatically populates fields from the bound data source and allows end users to drag fields between different axes such as columns, rows, values, and filters, and create pivot table at runtime. It can be enabled by setting the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. +The Grouping Bar option in the Pivot Table automatically displays fields from the bound data source. It allows users to drag and drop fields between different axes such as columns, rows, values, and filters to create a pivot table at runtime. You can enable it by setting the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. -Similar to Field List, Grouping Bar UI also comes with basic interactions like, +The grouping bar provides intuitive interactions similar to the Field List, making report creation accessible to all users. These interactions include: -* Re-arranging fields through drag-and-drop operation between row, column, value and filter axes. -* Remove fields from the existing report using remove icon. -* Add fields to the report using fields panel option. -* Filtering members of specific fields using filter icon. -* Sorting members of specific fields using sort icon. +* Re-arranging fields through drag-and-drop operations between row, column, value, and filter axes. +* Removing fields from the existing report using the remove icon. +* Adding fields to the report using the fields panel option. +* Filtering members of specific fields using the filter icon. +* Sorting members of specific fields using the sort icon. - ```cshtml +```cshtml @using Syncfusion.Blazor.PivotView @@ -62,33 +62,35 @@ Similar to Field List, Grouping Bar UI also comes with basic interactions like, ## Show or hide fields panel -The fields panel which is positioned above the grouping bar, displays the fields that are available in the data source but are not bound in the report. The fields can be dragged and dropped into the appropriate axis. In addition, any field removed from any axes will be automatically added to the fields panel. The fields panel can be displayed by setting the [ShowFieldsPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowFieldsPanel) property in the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) to **true**. +The fields panel appears above the grouping bar and shows all the fields that are available in the data source but not currently used in the Pivot Table report. Users can drag and drop these fields into the appropriate axes (rows, columns, values, or filters) to build their desired Pivot Table layout. When a field is removed from any axis, it automatically returns to the fields panel for reuse. + +To display the fields panel, set the [ShowFieldsPanel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowFieldsPanel) property to **true** within the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) configuration. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - + + + + + + + + + + + + @code { - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } } ``` @@ -96,7 +98,11 @@ The fields panel which is positioned above the grouping bar, displays the fields ## Show or hide all filter icon -The Grouping Bar has an option to filter members of particular fields at runtime in pivot table. In-order to filter members in a field, click the filter icon and check/uncheck members that needs to be displayed. By default, filter icon besides each field is enabled in the grouping bar. To disable the filter icon, set the property [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowFilterIcon) in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. +The Grouping Bar provides an option to filter members of specific fields during runtime in the Pivot Table. To filter members in a field, click the filter icon next to the field name and select or deselect the members you want to display. + +By default, the filter icon appears next to each field in the grouping bar. If you want to hide the filter icon, set the [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowFilterIcon) property to **false** within the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) configuration. + +> By default, the filter icon is enabled in the grouping bar. ```cshtml @using Syncfusion.Blazor.PivotView @@ -112,7 +118,7 @@ The Grouping Bar has an option to filter members of particular fields at runtime                                - +                                @@ -136,8 +142,9 @@ The Grouping Bar has an option to filter members of particular fields at runtime ## Show or hide specific filter icon -To disable the filter icon for a specific field, set the property [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowFilterIcon) to **false** to the corresponding field in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +By default, the filter icon appears for all fields in the grouping bar. To hide the filter icon for specific fields, set the [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowFilterIcon) property to **false** for those fields in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). This lets you control which fields can be filtered, providing a cleaner and more focused user interface. +In the sample below, the filter icons for the "Quarter" and "Products" fields are hidden. ```cshtml @using Syncfusion.Blazor.PivotView @@ -153,7 +160,7 @@ To disable the filter icon for a specific field, set the property [ShowFilterIco                                - +                                @@ -176,7 +183,11 @@ To disable the filter icon for a specific field, set the property [ShowFilterIco ## Show or hide all sort icon -The Grouping Bar has an option to order members of a particular fields either in ascending or descending at runtime. In order to sort a field, click the sort icon and to reverse its sort direction, once again click the same sort icon. By default, the sort icon besides each field is enabled in the grouping bar and members will be arranged in ascending order. To disable the sort option, set the property [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowSortIcon) in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. +The Grouping Bar provides an option to sort members of a particular field in either ascending or descending order at runtime. To sort a field, click the sort icon next to the field name. To reverse the sort direction, click the same sort icon again. By default, the sort icon is displayed next to each field in the grouping bar, and members are arranged in ascending order. + +To disable the sort option, set the [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowSortIcon) property to **false** within the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) configuration. + +> By default, the sort icon is enabled in the grouping bar. ```cshtml @using Syncfusion.Blazor.PivotView @@ -192,7 +203,7 @@ The Grouping Bar has an option to order members of a particular fields either in                                - +                                @@ -217,7 +228,9 @@ The Grouping Bar has an option to order members of a particular fields either in ## Show or hide specific sort icon -To disable the sort icon for a specific button, set the property [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSortIcon) to **false** to the corresponding field in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +You can choose to show or hide the sort icon for individual fields in the Pivot Table's grouping bar. To hide the sort icon for a particular field, set the [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowSortIcon) property to **false** for that field in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. + +In the example below, the sort icons for the "Quarter" and "Country" fields are hidden in the grouping bar. This allows users to prevent sorting for these fields while keeping other fields sortable. ```cshtml @using Syncfusion.Blazor.PivotView @@ -233,7 +246,7 @@ To disable the sort icon for a specific button, set the property [ShowSortIcon](                                - +                                @@ -257,7 +270,11 @@ To disable the sort icon for a specific button, set the property [ShowSortIcon]( ## Show or hide all remove icon -The Grouping Bar has an option to remove any field at runtime. To remove a field, just click the remove icon. By default, the remove icon besides each field is enabled in the grouping bar. To disable the remove icon, set the property [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowRemoveIcon) in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. +The grouping bar in the Pivot Table lets users remove any field at runtime by clicking the remove icon next to the field. By default, the remove icon is visible beside each field in the grouping bar. + +If you want to hide the remove icon, set the [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowRemoveIcon) property to **false** within the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) configuration. This will prevent users from removing fields directly from the grouping bar. + +> Note: The remove icon is enabled in the grouping bar by default. ```cshtml @using Syncfusion.Blazor.PivotView @@ -273,7 +290,7 @@ The Grouping Bar has an option to remove any field at runtime. To remove a field                                - +                                @@ -297,8 +314,9 @@ The Grouping Bar has an option to remove any field at runtime. To remove a field ## Show or hide specific remove icon -To disable the remove icon for a specific button, set the property [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowRemoveIcon) to **false** to the corresponding field in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +You can hide the remove icon for an individual field button in the Pivot Table grouping bar. To do this, set the [ShowRemoveIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowRemoveIcon) property to **false** for the desired field within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) options. +In the example below, the remove icon for the "Year", "Sold", and "Products" fields has been hidden. This helps prevent users from accidentally removing those fields while interacting with the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -314,7 +332,7 @@ To disable the remove icon for a specific button, set the property [ShowRemoveIc                                - +                                @@ -337,7 +355,7 @@ To disable the remove icon for a specific button, set the property [ShowRemoveIc ## Disable all fields from dragging -The Grouping Bar has an option to drag-and-drop fields between row, column, value and filter axes in-order to change report at runtime. By default, all fields are available for drag-and-drop operation in the grouping bar. To disable these fields, set the property [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_AllowDragAndDrop) in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. This will prevent end user from changing the current report. +In the Pivot Table, the grouping bar lets users move fields between the row, column, value, and filter axes to change the report as needed. By default, all fields can be moved using drag-and-drop in the grouping bar. To prevent users from dragging any fields, set the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_AllowDragAndDrop) option in [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) to **false**. This will lock the layout of the current report, so users cannot rearrange fields in the grouping bar. ```cshtml @using Syncfusion.Blazor.PivotView @@ -353,7 +371,7 @@ The Grouping Bar has an option to drag-and-drop fields between row, column, valu                                - +                                @@ -377,8 +395,9 @@ The Grouping Bar has an option to drag-and-drop fields between row, column, valu ## Disable specific field from dragging -To disable dragging for a specific button, set the property [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_AllowDragAndDrop) to **false** to the corresponding field in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +You can prevent users from dragging certain fields in the grouping bar of the Pivot Table. To do this, set the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_AllowDragAndDrop) property to **false** for the specific field within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +In the example below, users cannot drag the "Year" and "Products" fields. This setting helps you control which fields can be arranged in the column, row, value, or filter axes at runtime. ```cshtml @using Syncfusion.Blazor.PivotView @@ -394,7 +413,7 @@ To disable dragging for a specific button, set the property [AllowDragAndDrop](h                                - +                                @@ -415,7 +434,9 @@ To disable dragging for a specific button, set the property [AllowDragAndDrop](h ## Changing aggregation type of value fields at runtime -End user can perform calculations over a group of values using the aggregation option. The value fields bound to the field list, appears with a dropdown icon, helps to select an appropriate aggregation type at runtime. On selection, the values in the Pivot Table will be changed dynamically. By default, the icon to set aggregation type is enabled in the grouping bar. To disable this icon, set the property [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowValueTypeIcon) in the [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html) class to **false**. To know more about aggregation, [refer](./aggregation) here. +Users can easily perform calculations on groups of values in the Pivot Table by using the aggregation option. Each value field in the Pivot Table appears in the grouping bar with a dropdown icon next to it. This icon lets users select a different aggregation type, such as Sum, Average, or Count, at runtime. When an aggregation type is selected, the Pivot Table values update immediately to reflect the new calculation. + +By default, the icon for setting the aggregation type is visible in the grouping bar. To hide this icon, set the [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html#Syncfusion_Blazor_PivotView_PivotViewGroupingBarSettings_ShowValueTypeIcon) property to **false** inside [PivotViewGroupingBarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupingBarSettings.html). For more details about aggregation options, see the [aggregation](./aggregation) section. ```cshtml @using Syncfusion.Blazor.PivotView @@ -431,7 +452,7 @@ End user can perform calculations over a group of values using the aggregation o                                - +                                @@ -460,7 +481,9 @@ End user can perform calculations over a group of values using the aggregation o ## Show or hide specific dropdown icon -To disable the dropdown icon for a specific button, set the property [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowValueTypeIcon) to **false** to the corresponding field in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +You can hide the dropdown icon for a particular field button in the Pivot Table’s grouping bar. To do this, set the [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowValueTypeIcon) property to **false** for the desired field within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). + +In the following example, the dropdown icon for the "Sold" field is hidden: ```cshtml @using Syncfusion.Blazor.PivotView @@ -497,15 +520,20 @@ To disable the dropdown icon for a specific button, set the property [ShowValueT ![Hiding Specific DropDown Icon in Blazor PivotTable](images/blazor-pivottable-hide-specific-dropdown-icon.png) - N>The property [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowFilterIcon), [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSortIcon), [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowValueTypeIcon) and [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_AllowDragAndDrop) in fields of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) are applicable for both grouping bar and field list. +N> The properties [ShowFilterIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowFilterIcon), [ShowSortIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowSortIcon), [ShowValueTypeIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_ShowValueTypeIcon), and [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotFieldOptions.html#Syncfusion_Blazor_PivotView_PivotFieldOptions_AllowDragAndDrop) in fields of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) are applicable for both grouping bar and field list. ## Events -### FieldDropped +### OnFieldDropped -The event [FieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDropped) fires on whenever a field is dropped over an axis. +The [OnFieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDropped) event in the Pivot Table triggers whenever a user moves and drops a field into a new axis, such as columns, rows, values, or filters. This event provides the following parameters: -It has following parameters - [DroppedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedAxis), [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField) and [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DataSourceSettings). In this sample, the [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField) caption was modified based on the [DroppedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedAxis). +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DataSourceSettings): Defines the current report in the Pivot Table. +- [DroppedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedAxis): Defines the axis where the field has been dropped. +- [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField): Defines the dropped field item. +- [DroppedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedPosition): Defines the position where the field has been dropped. + +For example, you can use this event to change the caption of the [DroppedField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDroppedEventArgs.html#Syncfusion_Blazor_PivotView_FieldDroppedEventArgs_DroppedField) instantly at runtime when a user moves a field to a different axis. ```cshtml @using Syncfusion.Blazor.PivotView @@ -548,16 +576,15 @@ It has following parameters - [DroppedAxis](https://help.syncfusion.com/cr/blazo ### FieldDragStart -The event [FieldDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDragStart) fires whenever a field drag starts from its axis. It allows the user to restrict the drag operation based on its parameters. It has the following parameters - -* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_FieldName): It holds the name of the appropriate field. - -* [FieldItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_FieldItem): It holds the complete definition of the appropriate field mentioned in data source settings. +The [FieldDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDragStart) event is triggered when a field begins to be dragged from its axis in the Pivot Table. Users can use this event to limit or prevent the drag action based on certain conditions. The event provides the following parameters: -* [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_Axis): It holds the axis name where the draggable field lies. - -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_Cancel): It is a boolean property and by setting this to true, user can restrict the field from dragging. +- [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_FieldName): This parameter contains the name of the field being dragged. +- [FieldItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_FieldItem): This parameter holds the complete details of the field as described in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +- [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_Axis): This specifies the axis (such as columns, rows, values, or filters) from which the field is being dragged. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_Cancel): This boolean property can be set to **true** by the user to prevent the selected field from being dragged. +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDragStartEventArgs.html#Syncfusion_Blazor_PivotView_FieldDragStartEventArgs_DataSourceSettings): This property returns the current [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) used in the Pivot Table. +In the following example, the drag action is prevented only for fields placed in the rows axis. Users will not be able to drag fields from the rows axis, but can still drag fields from other axes. ```cshtml @using Syncfusion.Blazor.PivotView @@ -602,22 +629,17 @@ The event [FieldDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ### FieldDrop -The event [FieldDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDrop) fires whenever a field is dropped into an axis. It allows the user to restrict the drop operation based on its parameters. It has the following parameters, - -* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_FieldName): It holds the name of the appropriate field. - -* [DropField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropField): It holds the complete definition of the appropriate field mentioned in data source settings. - -* [DraggedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DraggedAxis): It holds the axis name from where dragging was started. - -* [DropAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropAxis): It holds the axis name from where the field is dropped. - -* [DropPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropPosition): It holds the dropped index among other existing fields in the axis. +The [FieldDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDrop) event is triggered whenever a user drags and drops a field into a different axis in the Pivot Table. This event helps users control whether a field should be allowed to move to a new axis by using the event’s parameters. The event provides the following information: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DataSourceSettings): It holds the complete pivot report. - -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_Cancel): It is a boolean property and by setting this to true, user can restrict the field from being dropped. +- [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_FieldName): The name of the field being moved. +- [DraggedAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DraggedAxis): The axis where the user started dragging the field. +- [DropAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropAxis): The axis where the field is dropped. +- [DropPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropPosition): The position where the field is dropped among the fields in the target axis. +- [DropField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DropField): The complete definition of the field as defined in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_DataSourceSettings): The entire configuration of the Pivot Table’s data source. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldDropEventArgs.html#Syncfusion_Blazor_PivotView_FieldDropEventArgs_Cancel): A boolean value. If set to **true**, this stops the field from being dropped into the axis. +In the example below, dropping any field into the "Values" axis is prevented. This is managed by setting the `Cancel` parameter to **true** when a field is dropped onto the "Values" axis. ```cshtml @using Syncfusion.Blazor.PivotView @@ -662,18 +684,17 @@ The event [FieldDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ### FieldRemove -The event [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldRemove) fires when removing any field from their axis. It helps the user to limit the elimination of a field based on its parameters. It has the following parameters, - -* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_FieldName): It holds the name of the field to be removed. - -* [FieldItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_FieldItem): It holds the complete definition of the appropriate field mentioned in data source settings. +The [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldRemove) event occurs when a user tries to remove a field from an axis in the Pivot Table. This event can be used to control whether a field should be removed, based on specific conditions. -* [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_Axis): It holds the name of the axis from where it is to remove the field. +The event provides the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_DataSourceSettings): It holds the complete pivot report. - -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_Cancel): It is a boolean property and by setting this to true, user can restrict the field from removing. +- [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_FieldName): The name of the field that the user wants to remove. +- [FieldItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_FieldItem): The full definition of the field as specified in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +- [Axis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_Axis): The name of the axis (row, column, value, or filter) from which the field will be removed. +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_DataSourceSettings): The complete configuration of the Pivot Table data source. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldRemoveEventArgs.html#Syncfusion_Blazor_PivotView_FieldRemoveEventArgs_Cancel): A boolean property; set this to **true** to prevent the field from being removed. +In the following example, the field "Country" cannot be removed from the report by any UI action. This is achieved by handling the [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldRemove) event and setting the `Cancel` property to **true** if the field name matches "Country". ```cshtml @using Syncfusion.Blazor.PivotView @@ -718,13 +739,15 @@ The event [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ### AggregateMenuOpen -The event [AggregateMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_AggregateMenuOpen) fires while clicking dropdown icon of the value field button UI. It allows to customize the aggregate types to be displayed in the dropdown menu. It has the following parameters, +The [AggregateMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_AggregateMenuOpen) event is triggered when a user clicks the dropdown icon in a value field button in the Pivot Table’s grouping bar. This event allows users to control which aggregation types appear in the dropdown menu. -* [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_FieldName): It holds the name of the field that opens the aggregate menu. +The event provides the following parameters: -* [AggregateTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_AggregateTypes): It holds the aggregation types set for a field. +- [FieldName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_FieldName): The name of the field for which the aggregation menu is opened. +- [AggregateTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_AggregateTypes): The list of aggregation types available for the selected field. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_Cancel): A boolean that, when set to true, prevents the dropdown menu from opening. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.AggregateMenuOpenEventArgs.html#Syncfusion_Blazor_PivotView_AggregateMenuOpenEventArgs_Cancel): It is a boolean property and by setting this to true, dropdown menu won’t be displayed. +In the following sample, the dropdown menu for the "Amount" field is customized to show specific aggregation types. ```cshtml @using Syncfusion.Blazor.PivotView @@ -768,31 +791,30 @@ The event [AggregateMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` -N> The events [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldRemove), [FieldDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDrop), [FieldDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDragStart), [FieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDropped) and [AggregateMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_AggregateMenuOpen) are applicable for both grouping bar and field list. +N> The events [FieldRemove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldRemove), [FieldDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDrop), [FieldDragStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDragStart), [OnFieldDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FieldDropped), and [AggregateMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_AggregateMenuOpen) are applicable for both grouping bar and field list. ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when the UI action such as as sorting, filtering, aggregation or edit calculated field, that are present in the grouping bar UI begin. This allows user to identify the current action being performed at runtime. It has the following parameters: - -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event occurs whenever an action begins in the grouping bar of the Pivot Table. These actions include sorting, filtering, changing aggregation, removing fields, or editing a calculated field using the grouping bar UI. This event helps the user identify and manage what is happening in real time. The event provides several helpful parameters: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): This provides the current report settings, which include the input data, row fields, column fields, values, filters, formatting settings, and more. +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): This contains the name of the action that has started. The most common actions and their respective names are: -| Action | Action Name| -|----------------|-------------| -| Sort icon| Sort field| -| Filter icon| Filter field| -| Aggregation (Value type drop down and menu)| Aggregate field| -| Remove icon| Remove field| -| Edit icon| Edit calculated field| + | Action | Action Name | + |-----------------------------------------|---------------------| + | Clicking the sort icon | Sort field | + | Using the filter icon | Filter field | + | Selecting aggregation in the drop-down | Aggregate field | + | Clicking the remove icon | Remove field | + | Clicking the edit icon | Edit calculated field| -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected field information. +- [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): This provides information about the selected field on which the action is performed. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> This option applies only to actions performed through the field-based UI, such as filtering, sorting, removing a field from the grouping bar, editing, and changing the aggregation type. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +- [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Set this property to **true** within the event to prevent the current action from being completed. -In the below example, grouping bar UI actions such as sorting and filtering can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +In the example below, users can restrict actions like sorting or filtering from the grouping bar by setting `args.Cancel` to **true** within the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event. ```cshtml @using Syncfusion.Blazor.PivotView @@ -808,7 +830,7 @@ In the below example, grouping bar UI actions such as sorting and filtering can                                - +                                @@ -837,27 +859,29 @@ In the below example, grouping bar UI actions such as sorting and filtering can } ``` + ### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the UI action such as as sorting, filtering, aggregation or edit calculated field, that are present in the grouping bar UI, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event in the Pivot Table is triggered whenever a user completes a UI action in the grouping bar, such as sorting, filtering, changing the aggregation type, editing a calculated field, or removing a field. This event helps users track the specific interaction that has just been finished, supporting a smooth workflow within the Pivot Table. -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +The event provides the following parameters: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: +- [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current report settings, including information about the input data, rows, columns, values, filters, and format settings used in the Pivot Table. +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Specifies the name of the action just completed. The table below lists possible UI actions and their corresponding action names: -| Action | Action Name| -|----------------|-------------| -| Sort icon| Field sorted| -| Filter icon| Field filtered| -| Aggregation (Value type drop down and menu)| Field aggregated| -| Remove icon| Field removed| -| Edit icon| Calculated field edited| + | Action | Action Name | + |-------------------------------------------------|--------------------------| + | Sort icon clicked | Field sorted | + | Filter icon clicked | Field filtered | + | Aggregation changed (using value type dropdown) | Field aggregated | + | Remove icon clicked | Field removed | + | Edit icon (calculated field) clicked | Calculated field edited | -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected field information. +- [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Provides information about the field selected during the action. -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +N> The [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo) parameter is provided only for actions related to sorting, filtering, aggregation changes, removing a field, or editing a calculated field using the grouping bar. -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if sorting is completed, the event argument contains information such as sort order and the field name. +- [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Supplies detailed information about the UI action. For example, when sorting is finished, this parameter includes the sort order and the name of the field involved. ```cshtml @using Syncfusion.Blazor.PivotView @@ -873,7 +897,7 @@ N> This option is applicable only when the field based UI actions are performed                                - +                                @@ -900,21 +924,26 @@ N> This option is applicable only when the field based UI actions are performed } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event occurs when a user action in the Pivot Table does not complete as expected. This event helps users understand what went wrong during interactions with the grouping bar. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: +**Event Parameters** -| Action | Action Name| -|----------------|-------------| -| Sort icon| Sort field| -| Filter icon| Filter field| -| Aggregation (Value type drop down and menu)| Aggregate field| -| Remove icon| Remove field| -| Edit icon| Edit calculated field| +- [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): Identifies which user action did not succeed. The table below lists the actions and their corresponding names: -* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. + | Action | Action Name | + |-------------------------------------------------------|---------------------| + | Clicking the sort icon | Sort field | + | Applying a filter using the filter icon | Filter field | + | Choosing a value type from the aggregation dropdown | Aggregate field | + | Removing a field by clicking the remove icon | Remove field | + | Editing a calculated field using the edit icon | Edit calculated field| + +- [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): Provides details about the error that occurred for the specific user action. + +When this event is triggered, users can refer to the information in these parameters to identify the action that failed and the reason for the failure. This helps users correct issues with actions such as sorting, filtering, aggregating, removing, or editing fields in the Pivot Table's grouping bar. ```cshtml @using Syncfusion.Blazor.PivotView @@ -930,7 +959,7 @@ The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla                                - +                                diff --git a/blazor/pivot-table/grouping.md b/blazor/pivot-table/grouping.md index 0f7ce2fa88..c704304aea 100644 --- a/blazor/pivot-table/grouping.md +++ b/blazor/pivot-table/grouping.md @@ -9,11 +9,11 @@ documentation: ug # Grouping in Blazor Pivot Table Component -Grouping is the most-useful feature in pivot table and the component automatically groups date, time, number and string. For example, the date type can be formatted and displayed based on year, quarter, month, and more. Likewise, the number type can be grouped range-wise, such as 1-5, 6-10, etc. These group fields will act as individual fields and allows users to drag them between different axes such as columns, rows, values, and filters and create pivot table at runtime. +Grouping is one of the most useful features in the Pivot Table component, automatically organizing date, time, number, and string data types into meaningful categories. For example, date fields can be formatted and displayed based on year, quarter, month, and other time periods. Similarly, number fields can be grouped into ranges, such as 1-5, 6-10, and so on. These grouped fields function as individual fields, allowing users to drag them between different axes including columns, rows, values, and filters to create dynamic Pivot Tables at runtime. N> This feature is applicable only for relational data source. -The grouping can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewModel-1.html#Syncfusion_Blazor_PivotView_PivotViewModel_1_AllowGrouping) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. To perform the grouping action via UI, right click on the pivot table's row or column header. Select "**Group**", a dialog will appear which must be filled with the appropriate options to group the data. To ungroup, right click on the pivot table's row or column header, select "**Ungroup**". +The grouping feature can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowGrouping) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. To perform grouping actions through the user interface, right-click on the Pivot Table's row or column header and select **Group**. A dialog will appear where you can configure the appropriate options to group the data. To ungroup data, right-click on the Pivot Table's row or column header and select **Ungroup**. The following are the three different types of grouping: @@ -26,7 +26,7 @@ To have a quick glance on how to group row and column field items in the Blazor {% youtube "youtube:https://www.youtube.com/watch?v=t-LDymoVUzA"%} -N> Similar to Excel, only one type of grouping can be applied for a field. +N> Similar to Excel, only one type of grouping can be applied to a field at a time. ```cshtml @using Syncfusion.Blazor.PivotView @@ -59,12 +59,11 @@ N> Similar to Excel, only one type of grouping can be applied for a field. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ## Number Grouping -Number grouping allows users to organize data, which is in number format into different ranges, such as 1-5, 6-10, etc. Number grouping can be configured via UI, by right-clicking on the number based header in the pivot table. +Number grouping allows users to organize numerical data into different ranges, such as 1–5, 6–10, and so on. This can be configured via the UI by right-clicking a number-based header in the Pivot Table and selecting the **Group** option from the context menu. ```cshtml @using Syncfusion.Blazor.PivotView @@ -96,35 +95,35 @@ Number grouping allows users to organize data, which is in number format into di //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Number Grouping in Blazor PivotTable](images/blazor-pivottable-number-grouping.png) ### Range selection -The "**Starting at**" and "**Ending at**" options are used to set the number range depending on which the headers will be grouped. For example, if the "Product_ID" field holds the number from "1001" to "1010" and the user chooses to group the number range by setting "**1004**" to "**Starting at**" and "**1008**" to "**Ending at**" options on their own. Then the specified number range will be used for number grouping and the rest will be grouped as "**Out of Range**". +The "**Starting at**" and "**Ending at**" options are used to set the number range depending on which the headers will be grouped. For example, if the "Product_ID" field holds the number from "1001" to "1010" and the user chooses to group the number range by setting "**1004**" to "**Starting at**" and "**1008**" to "**Ending at**" options on their own, then the specified number range will be used for number grouping and the rest will be grouped as "**Out of Range**". ![Number Grouping within Range in Blazor PivotTable](images/blazor-pivottable-number-group-within-range.png) ### Range interval -The "**Interval by**" option is used to separate the selected number data type field into range-wise such as 1-5, 6-10, etc. -For example, if the user wants to display the "Product_ID" data field with a group interval of "**2**" by setting the "**Interval by**" option on their own. The "Product_ID" field will then be grouped by the specified range of intervals, such as "**1004-1005**", "**1006-1007**",etc. +The "**Interval by**" option is used to separate the selected number data type field into range-wise such as 1-5, 6-10, etc. For example, if the user wants to display the "Product_ID" data field with a group interval of "**2**" by setting the "**Interval by**" option on their own, the "Product_ID" field will then be grouped by the specified range of intervals, such as "**1004-1005**", "**1006-1007**", etc. ![Grouping with Blazor PivotTable Range Interval](images/blazor-pivottable-group-within-range-interval.png)
![Updating Number Group in Blazor PivotTable](images/blazor-pivottable-update-number-group.png) -Number grouping can also be configured using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class through code-behind. The properties required are: +### Configuring Number Grouping Programmatically + +You can configure number grouping through code-behind using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class. This allows you to define how numbers are grouped without relying on the UI. Below are the key settings you need: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Name): Allows user to set the field name. -* [RangeInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_RangeInterval): Allows user to set the interval between two numbers. -* [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_StartingAt): Allows user to set the starting number. -* [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_EndingAt): Allows user to set the ending number. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Type): Allows user to set the group type. For number grouping, [GroupType.Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html#Syncfusion_Blazor_PivotView_GroupType_Number) is set. +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Name): Allows user to set the field name. +* [RangeInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_RangeInterval): Allows user to set the interval between two numbers. +* [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_StartingAt): Allows user to set the starting number. +* [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_EndingAt): Allows user to set the ending number. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Type): Allows user to set the group type. For number grouping, [GroupType.Number](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html#Syncfusion_Blazor_PivotView_GroupType_Number) is set. -N> If starting and ending numbers specified in [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_StartingAt) and [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_EndingAt) properties are in-between the number range, then the rest of the numbers will be grouped and placed in “Out of Range” section introduced specifically to this feature. +N> If starting and ending numbers specified in [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_StartingAt) and [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_EndingAt) properties are in-between the number range, then the rest of the numbers will be grouped and placed in “Out of Range” section introduced specifically to this feature. ```cshtml @using Syncfusion.Blazor.PivotView @@ -159,20 +158,19 @@ N> If starting and ending numbers specified in [StartingAt](https://help.syncfus //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Updating Number Group in Blazor PivotTable](images/blazor-pivottable-update-number-group.png) ### Ungrouping the existing number groups -By right-clicking the appropriate header and selecting "**Ungroup**" from the context menu in the pivot table component, users can ungroup the applied number grouping. +To remove an applied number grouping, simply right-click on the grouped header in the Pivot Table and select **Ungroup** option from the context menu. This action will break apart the grouped ranges and display the original, ungrouped values in the table. ![UnGrouping in Blazor PivotTable](images/blazor-pivottable-ungroup.png) ## Date Grouping -Date grouping allows users to organize data, which is in date format into different sections such as years, quarters, months, days, hours, minutes, and seconds. Date grouping can be configured via UI, by right-clicking on the date and time based header in the pivot table. +Date grouping organizes date and time data into hierarchical segments, such as years, quarters, months, days, hours, minutes, or seconds. Users can configure date grouping through the UI by right-clicking a date or time-based header in the Pivot Table and selecting **Group** option from the context menu. A dialog will appear, allowing users to choose the desired grouping intervals. ```cshtml @using Syncfusion.Blazor.PivotView @@ -208,22 +206,21 @@ Date grouping allows users to organize data, which is in date format into differ //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Date Grouping in Blazor PivotTable](images/blazor-pivottable-date-grouping.png) -### Range selection +### Range Selection -The "**Starting at**" and "**Ending at**" options are used to set the date range depending on which the headers will be grouped. For example, if the "Date" field holds the date from "01/01/2015" to "02/12/2018" and the user chooses to group the date range by setting "**01/07/2015**" to "**Starting at**" and "**31/07/2017**" to "**Ending at**" options on their own. Then the specified date range will be used for date grouping and the rest will be considered as "**Out of Range**". +The **Starting at** and **Ending at** options allow users to define the date range for grouping headers. For example, if the "Date" field contains data from "01/01/2015" to "02/12/2018" and the user sets **Starting at** to "**01/07/2015**" and **Ending at** to "**31/07/2017**", only records within this range will be grouped according to the selected settings. Dates outside this range are labeled as **Out of Range**. ![Range Selection in Blazor PivotTable](images/blazor-pivottable-range-selection.png) -### Group interval +### Group Interval -The "**Interval by**" option is used to separate the selected date fields into years, quarters, months, days, hours, minutes and seconds. For example, if the user wants to display the "Date" field with group intervals as "**Years**" and "**Months**" by selecting the "**Interval by**" option on their own. The "Date" field will then be separated by the specified group intervals and created as two new fields, namely "**Years (Date)**" which holds the date years and "**Months (Date)**" which holds the date months. Such fields can be used for report manipulations in the pivot table at runtime. +The **Interval by** option allows users to split date fields into years, quarters, months, days, hours, minutes, or seconds. For example, selecting **Years** and **Months** as intervals for the "Date" field results in two new fields: **Years (Date)**, containing the year values, and **Months (Date)**, containing the month values. These grouped fields can be used for report manipulations in the Pivot Table at runtime. -N> When none of the **Interval by** options are chosen, the **OK** button in the dialog will be disabled, meaning that at least one interval option should be selected in order to apply the date grouping. +N> If no options are selected in the **Interval by** section, the **OK** button in the dialog remains disabled. At least one interval must be chosen to enable date grouping. ![Interval Grouping in Blazor PivotTable](images/blazor-pivottable-interval-grouping.png)
@@ -231,15 +228,17 @@ N> When none of the **Interval by** options are chosen, the **OK** button in the
![Displaying Updated Date Group in Blazor PivotTable](images/blazor-pivottable-update-date-group.png) -Date grouping can also be configured using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class through code-behind. The properties required are: +### Configuring Date Grouping Programmatically + +You can configure date grouping programmatically using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class. This allows you to define how dates are grouped without using the UI. The key settings are: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Name): Allows user to set the field name. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Type): Allows user to set the group type. For date grouping, [GroupType.Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html) is set. -* [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_StartingAt): Allows user to set starting date. -* [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_EndingAt): Allows user to set ending date. -* [GroupInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_GroupInterval): Allows user to set interval in year, quarter, month, day, hour, minute, or second pattern. +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Name): Allows user to set the field name. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Type): Allows user to set the group type. For date grouping, [GroupType.Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html#Syncfusion_Blazor_PivotView_GroupType_Date) is set. +* [StartingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_StartingAt): Allows user to set starting date. +* [EndingAt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_EndingAt): Allows user to set ending date. +* [GroupInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_GroupInterval): Allows user to set interval in year, quarter, month, day, hour, minute, or second pattern. -N> From the date format "YYYY-DD-MM HH:MM:SS", if the user wants to display only year and month, then the [GroupInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_GroupInterval) property should be set with [DateGroup.Years](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DateGroup.html#Syncfusion_Blazor_PivotView_DateGroup_Years) and [DateGroup.Months](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DateGroup.html#Syncfusion_Blazor_PivotView_DateGroup_Months) alone. Also, the user can shuffle the order of year, quarter, month, day, hour, minute, or second based on their requirement and display the same in the pivot table. +N> For example, if your date format is "YYYY-DD-MM HH:MM:SS" and you want to group only by year and month, set the [GroupInterval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_GroupInterval) property with just [DateGroup.Years](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DateGroup.html#Syncfusion_Blazor_PivotView_DateGroup_Years) and [DateGroup.Months](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.DateGroup.html#Syncfusion_Blazor_PivotView_DateGroup_Months). You can also rearrange the order of the intervals (Year, Quarter, Month, Day, etc.) as needed—this order will reflect in the Pivot Table display. ```cshtml @using Syncfusion.Blazor.PivotView @@ -278,20 +277,19 @@ N> From the date format "YYYY-DD-MM HH:MM:SS", if the user wants to display only //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Displaying Updated Date Group in Blazor PivotTable](images/blazor-pivottable-update-date-group.png) ### Ungrouping the existing date groups -By right-clicking the appropriate header and selecting "**Ungroup**" from the context menu in the pivot table component, users can ungroup the applied date grouping. +To remove a previously applied date grouping, simply right-click the relevant date-based header within the Pivot Table and select the **Ungroup** option from the context menu. This action will revert the grouped dates back to their original, ungrouped state, allowing you to view and analyze the raw date values in the Pivot Table component. ![UnGrouping Date Groups in Blazor PivotTable](images/blazor-pivottable-date-ungroup.png) ## Custom Grouping -Custom grouping can group any data type such as date, time, number and string into a custom field based on the user's needs. It can be configured via the UI by right-clicking on any header in the pivot table. +Custom grouping is an option that enables users to group data types (date, time, number, or string) into custom fields based on specific requirements. This functionality can be accessed through the user interface by right-clicking a header in the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -323,24 +321,29 @@ Custom grouping can group any data type such as date, time, number and string in //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` -In order to create custom grouping in the pivot table, a minimum of two headers belonging to a specific field should be chosen. To select more than one header, press and hold the CTRL key or hold the SHIFT key and click the appropriate row or column headers. Once selection is done, right-click and select "**Group**". +### Creating a Custom Group -![Custom Grouping in Blazor PivotTable](images/blazor-pivottable-custom-grouping.png) +To create a custom group in the Pivot Table, select at least two headers from the same field. Hold the **CTRL** key to select multiple headers individually or the **SHIFT** key to select a range of headers. Then, right-click and choose **Group** from the context menu. -In the dialog, the "**Field caption**" is the alias name of the new custom field that will be used to show up in the pivot table component. +![Custom Grouping in Blazor PivotTable](images/blazor-pivottable-custom-grouping.png) -![Caption with Custom Grouping in Blazor PivotTable](images/blazor-pivottable-custom-group-with-caption.png) +In the dialog box: +- **Field Caption**: Set an alias name for the new custom field, which will appear in the Pivot Table. +- **Group Name**: Define the top-level name for the group that will contain the selected headers. -The "**Group Name**" option helps to set the name of the header to hold the other selected headers. For example, if the user wants to group headers such as "**Gloves**", "**Jerseys**" and "**Shorts**" in the "Products" field by setting the top level name as "**Clothings**" to "**Group Name**" on their own. The selected headers are then grouped under the name "**Clothings**" in the pivot table. +For example, to group the headers "Gloves," "Jerseys," and "Shorts" in the "Products" field under a single group, set the **Group Name** to "Clothings." The selected headers will then appear under "Clothings" in the Pivot Table. +![Caption with Custom Grouping in Blazor PivotTable](images/blazor-pivottable-custom-group-with-caption.png) +
![Blazor PivotTable with Custom Grouping](images/blazor-pivottable-custom-group.png)
![Displaying Updated Custom Grouping in Blazor PivotTable](images/blazor-pivottable-update-custom-group.png) -Users can also apply new custom grouping options to an existing custom field by right-clicking on the custom group header in the pivot table. For example, if the user wants to create a new custom group for the current custom group headers such as "**Bottles and Cages**", "**Cleaners**" and "**Fenders**" by setting the top level name as "**Accessories**" to "**Group Name**" on their own. The selected headers will then be grouped in the pivot table under the name "**Accessories**" with a new custom field called "**Product category 1**". +### Nested Custom Grouping + +Users can also apply new custom grouping options to an existing custom field by right-clicking on the custom group header in the Pivot Table. For example, if the user wants to create a new custom group for the current custom group headers such as "**Bottles and Cages**", "**Cleaners**" and "**Fenders**" by setting the top level name as "**Accessories**" to "**Group Name**" on their own. The selected headers will then be grouped in the Pivot Table under the name "**Accessories**" with a new custom field called "**Product category 1**". ![Nested Custom Grouping in Blazor PivotTable](images/blazor-pivottable-nested-custom-group.png)
@@ -348,19 +351,21 @@ Users can also apply new custom grouping options to an existing custom field by
![Displaying Updated Nested Custom Grouping in Blazor PivotTable](images/blazor-pivottable-update-nested-custom-group.png) -Custom grouping can also be configured using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class through code-behind. The properties required are: +### Configuring Custom Grouping Programmatically -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Name): Allows user to set the field name. -* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Caption): Allows user to set the caption name for custom grouping field. +You can configure custom grouping programmatically using the [PivotViewGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html) class in the Pivot Table component. This property allows you to define how fields are grouped in the Pivot Table without using the UI. The available properties are: + +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Name): Allows user to set the field name. +* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Caption): Allows user to set the caption name for custom grouping field. * [PivotViewCustomGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroups.html): Allows user to set the custom groups. -* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_Type): Allows user to set the group type. For custom grouping, [GroupType.Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html#Syncfusion_Blazor_PivotView_GroupType_Custom) is set. +* [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotGroupSetting.html#Syncfusion_Blazor_PivotView_PivotGroupSetting_Type): Allows user to set the group type. For custom grouping, [GroupType.Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GroupType.html#Syncfusion_Blazor_PivotView_GroupType_Custom) is set. The available custom group properties in [PivotViewCustomGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html) in [PivotViewCustomGroups](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroups.html) class are: -* [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html#Syncfusion_Blazor_PivotView_PivotViewCustomGroup_GroupName): Allows user to set the group name (or title) for selected headers. -* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html#Syncfusion_Blazor_PivotView_PivotViewCustomGroup_Items): Allows to set the headers which needs to be grouped from display. +* [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCustomGroupSettings.html#Syncfusion_Blazor_PivotView_PivotCustomGroupSettings_GroupName): Allows user to set the group name (or title) for selected headers. +* [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCustomGroupSettings.html#Syncfusion_Blazor_PivotView_PivotCustomGroupSettings_Items): Allows to set the headers which needs to be grouped from display. -N> When the [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html#Syncfusion_Blazor_PivotView_PivotViewCustomGroup_GroupName) with the headers listed in [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html#Syncfusion_Blazor_PivotView_PivotViewCustomGroup_Items) in the [PivotViewCustomGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGroupSetting.html#Syncfusion_Blazor_PivotView_PivotViewGroupSetting_RangeInterval) class is grouped by the defined [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewCustomGroup.html#Syncfusion_Blazor_PivotView_PivotViewCustomGroup_GroupName) and the rest is grouped by its own name in the pivot table. +N> Headers listed in [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCustomGroupSettings.html#Syncfusion_Blazor_PivotView_PivotCustomGroupSettings_Items) are grouped under the specified [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCustomGroupSettings.html#Syncfusion_Blazor_PivotView_PivotCustomGroupSettings_GroupName) in the Pivot Table. Headers not included in [Items](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCustomGroupSettings.html#Syncfusion_Blazor_PivotView_PivotCustomGroupSettings_Items) are displayed under their original names. ```cshtml @using Syncfusion.Blazor.PivotView @@ -399,17 +404,16 @@ N> When the [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Displaying Updated Custom Grouping in Blazor PivotTable](images/blazor-pivottable-update-custom-group.png) -### Ungrouping the existing custom groups +### Ungrouping Existing Custom Groups -By right-clicking the appropriate header and selecting "**Ungroup**" from the context menu in the pivot table component, users can ungroup the applied custom grouping. +To remove a custom group in the Pivot Table, simply right-click on the grouped header and select the "**Ungroup**" option from the context menu. This action will separate the grouped items back into their individual headers within the Pivot Table. -N> When a specific field is removed from the report after ungrouping, its custom group fields will also be removed from the pivot table. +N> After ungrouping, if you remove the related field from the report, any custom group fields associated with it will also be removed from the Pivot Table. ![Custom UnGrouping in Blazor PivotTable](images/blazor-pivottable-custom-ungroup.png) -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 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. \ No newline at end of file +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 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. \ No newline at end of file diff --git a/blazor/pivot-table/how-to/apply-custom-styles-to-pivot-cells.md b/blazor/pivot-table/how-to/apply-custom-styles-to-pivot-cells.md index dca081fd14..70d9b1257f 100644 --- a/blazor/pivot-table/how-to/apply-custom-styles-to-pivot-cells.md +++ b/blazor/pivot-table/how-to/apply-custom-styles-to-pivot-cells.md @@ -9,9 +9,9 @@ documentation: ug # Apply custom style to pivot cells in Blazor Pivot Table Component -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. +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. -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. +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. ```cshtml @using Syncfusion.Blazor.PivotView @@ -68,7 +68,7 @@ In the following example, a custom style has been applied to the column header * { cellData.CssClass = "e-custom"; } - if ((cellData.Axis == "column" && cellData.FormattedText == "FY 2017")) + if ((cellData.Axis == "column" && cellData.FormattedText == "FY 2015")) { cellData.CssClass = "e-custom"; } diff --git a/blazor/pivot-table/how-to/bind-complex-data-to-the-pivot-table.md b/blazor/pivot-table/how-to/bind-complex-data-to-the-pivot-table.md index 095692619a..a30a779519 100644 --- a/blazor/pivot-table/how-to/bind-complex-data-to-the-pivot-table.md +++ b/blazor/pivot-table/how-to/bind-complex-data-to-the-pivot-table.md @@ -9,9 +9,9 @@ documentation: ug # Convert complex data to flat data and assign it to the Pivot Table -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). +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). -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). +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. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/how-to/customize-number-and-date-format.md b/blazor/pivot-table/how-to/customize-number-and-date-format.md index 50351ee30c..453a51b588 100644 --- a/blazor/pivot-table/how-to/customize-number-and-date-format.md +++ b/blazor/pivot-table/how-to/customize-number-and-date-format.md @@ -9,14 +9,14 @@ documentation: ug # Customize number and date format in Blazor Pivot Table Component -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. +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. ## Number formatting -For numbers, the formatting settings required to apply through code behind are: +For numeric fields, the formatting settings include the following properties: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): It allows to set the field name. -* [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. +* [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. +* [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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -53,17 +53,17 @@ For numbers, the formatting settings required to apply through code behind are: ``` -![Number Formatting in Blazor PivotTable](images/blazor-pivottable-number-formatting.png) +![Number Formatting in Blazor Pivot Table](images/blazor-pivottable-number-formatting.png) -## Date and time formatting +## Date and Time formatting N> This property is applicable only for relational data source. -For date and time, the formatting settings required to apply through code behind are: +For date and time fields, the formatting settings include these properties: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): It allows to set the field name. -* [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. -* [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. +* [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. +* [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'). +* [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). ```cshtml @using Syncfusion.Blazor.PivotView @@ -94,10 +94,10 @@ For date and time, the formatting settings required to apply through code behind ``` -![Date Formatting in Blazor PivotTable](images/blazor-pivottable-date-formatting.png) +![Date Formatting in Blazor Pivot Table](images/blazor-pivottable-date-formatting.png) ## Limitations of date formatting -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. +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. 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. \ No newline at end of file diff --git a/blazor/pivot-table/how-to/customizing-loading-indicator.md b/blazor/pivot-table/how-to/customizing-loading-indicator.md index 86c90fc722..a1fad71980 100644 --- a/blazor/pivot-table/how-to/customizing-loading-indicator.md +++ b/blazor/pivot-table/how-to/customizing-loading-indicator.md @@ -9,7 +9,9 @@ documentation: ug # Customizing loading indicator in Blazor Pivot Table Component -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. +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. + +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. 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. diff --git a/blazor/pivot-table/how-to/display-string-value-to-pivot-table-values.md b/blazor/pivot-table/how-to/display-string-value-to-pivot-table-values.md index 19506c31ad..0908027551 100644 --- a/blazor/pivot-table/how-to/display-string-value-to-pivot-table-values.md +++ b/blazor/pivot-table/how-to/display-string-value-to-pivot-table-values.md @@ -1,17 +1,17 @@ --- layout: post -title: Display string value to pivot table values in Blazor | Syncfusion -description: Learn here all about Display string value to pivot table values in Syncfusion Blazor Pivot Table component and more. +title: Display string values in Blazor Pivot Table value cells | Syncfusion +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. platform: Blazor control: Pivot Table documentation: ug --- -# Display string value to pivot table values in Blazor Pivot Table +# Display string values in Blazor Pivot Table value cells -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. +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. -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`. +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. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/how-to/hide-empty-headers.md b/blazor/pivot-table/how-to/hide-empty-headers.md index 6f6fa6cfd4..81b27ad314 100644 --- a/blazor/pivot-table/how-to/hide-empty-headers.md +++ b/blazor/pivot-table/how-to/hide-empty-headers.md @@ -9,11 +9,11 @@ documentation: ug # Hide empty headers in Blazor Pivot Table Component -If the raw data for a particular field is not defined, it will be shown as 'Undefined' in the pivot table headers. You can hide those headers by setting the [ShowHeaderWhenEmpty](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowHeaderWhenEmpty) property to **false** in the pivot table. +When the raw data for a particular field is not defined, it will be shown as 'null' in the pivot table headers. You can hide those headers by setting the [ShowHeaderWhenEmpty](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowHeaderWhenEmpty) property to **false** in the pivot table. -For example, if the raw data for the field 'Country' is defined as **"United Kingdom"** and **"State"** is not defined means, it will be shown as **"United Kingdom >> Undefined"** in the header section. Here, you can hide those 'Undefined' header using the [ShowHeaderWhenEmpty](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowHeaderWhenEmpty) property. +For example, when the raw data contains **"United Kingdom"** for the 'Country' field but the **"State"** field is null, the header displays as **"United Kingdom >> null"**. Here, you can hide those 'null' headers using the [ShowHeaderWhenEmpty](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowHeaderWhenEmpty) property. -N> By default, this property is set as **true**. +N> By default, this property is set to **true**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -21,12 +21,12 @@ N> By default, this property is set as **true**. + - - + @@ -39,15 +39,55 @@ N> By default, this property is set as **true**. -@code{ +@code { public List data { get; set; } protected override void OnInitialized() { this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } -} + public class ProductDetails + { + public int Sold { get; set; } + public double Amount { get; set; } + public string Country { get; set; } + public string Products { get; set; } + public string Year { get; set; } + public string Quarter { get; set; } + public string State { get; set; } + + public static List GetProductData() + { + List productData = new List(); + productData.Add(new ProductDetails { Sold = 2, Amount = 100, Country = "Canada", Products = "Bike", Year = "FY 2005", State = "Alberta" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 0, Country = "Canada", Products = "Van", Year = "FY 2006", State = "British Columbia" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 300, Products = "Car", Year = "FY 2007", State = "Brunswick" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 150, Country = "Canada", Products = "Bike", State = "Manitoba" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 200, Country = "Canada", Year = "FY 2006", State = "Ontario" }); + productData.Add(new ProductDetails { Sold = 0, Amount = 100, Country = "Canada", Products = "Van", Year = "FY 2007", State = "Quebec" }); + productData.Add(new ProductDetails { Sold = 2, Amount = 200, Country = "France", Products = "Bike", Year = "FY 2005" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 0, Country = "France", Products = "Van", Year = "FY 2006", State = "Essonne" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 300, Products = "Car", Year = "FY 2007", State = "Garonne (Haute)" }); + productData.Add(new ProductDetails { Sold = 2, Amount = 150, Country = "France", Products = "Van", State = "Gers" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 200, Country = "Germany", Year = "FY 2006", State = "Bayern" }); + productData.Add(new ProductDetails { Sold = 0, Amount = 250, Country = "Germany", Products = "Car", Year = "FY 2007", State = "Brandenburg" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 150, Country = "Germany", Products = "Car", Year = "FY 2008" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 0, Country = "Germany", Products = "Bike", Year = "FY 2008", State = "Hessen" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 150, Products = "Van", Year = "FY 2007", State = "Nordrhein-Westfalen" }); + productData.Add(new ProductDetails { Sold = 2, Amount = 100, Country = "Germany", Products = "Bike", State = "Saarland" }); + productData.Add(new ProductDetails { Sold = 5, Amount = 150, Country = "United Kingdom", Year = "FY 2008" }); + productData.Add(new ProductDetails { Sold = 0, Amount = 250, Country = "United States", Products = "Car", Year = "FY 2007", State = "Alabama" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 200, Country = "United States", Products = "Van", Year = "FY 2005" }); + productData.Add(new ProductDetails { Sold = 2, Amount = 0, Country = "United States", Products = "Bike", Year = "FY 2006", State = "Colorado" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 150, Products = "Car", Year = "FY 2008", State = "New Mexico" }); + productData.Add(new ProductDetails { Sold = 4, Amount = 200, Country = "United States", Products = "Bike", State = "New York" }); + productData.Add(new ProductDetails { Sold = 3, Amount = 250, Country = "United States", Year = "FY 2008", State = "North Carolina" }); + productData.Add(new ProductDetails { Sold = 0, Amount = 300, Country = "United States", Products = "Van", Year = "FY 2007", State = "South Carolina" }); + return productData; + } + } +} ``` N> You can refer to [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore [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. \ No newline at end of file diff --git a/blazor/pivot-table/how-to/images/blazor-pivottable-tooltip-for-row-and-column-headers.png b/blazor/pivot-table/how-to/images/blazor-pivottable-tooltip-for-row-and-column-headers.png index 5a87a96f90..e4d15de680 100644 Binary files a/blazor/pivot-table/how-to/images/blazor-pivottable-tooltip-for-row-and-column-headers.png and b/blazor/pivot-table/how-to/images/blazor-pivottable-tooltip-for-row-and-column-headers.png differ diff --git a/blazor/pivot-table/how-to/show-custom-tooltip-for-row-and-column-headers.md b/blazor/pivot-table/how-to/show-custom-tooltip-for-row-and-column-headers.md index b009033dee..ba1b8c8d81 100644 --- a/blazor/pivot-table/how-to/show-custom-tooltip-for-row-and-column-headers.md +++ b/blazor/pivot-table/how-to/show-custom-tooltip-for-row-and-column-headers.md @@ -9,9 +9,11 @@ documentation: ug # Show tooltip for row and column headers in Blazor Pivot Table -You can create and display the tooltip for each row and column header(s) in the pivot table by using an external tooltip component. +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. -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. +## Implementation + +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://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.SfTooltip.html#Syncfusion_Blazor_Popups_SfTooltip_ContentTemplate) 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. ```cshtml @using Syncfusion.Blazor.PivotView @@ -20,122 +22,145 @@ In the following example, the [OnRender](https://help.syncfusion.com/cr/blazor/S @using System.Text.Json; - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + - - - @{ - if (cellData != null) - { - if (cellData.FormattedText != "Grand Total") - { - if (cellData.Axis == "row") - { -
-
-

FieldName:

-

@cellData.ValueSort["axis"]

-
-
-

Text:

-

@cellData.FormattedText

-
-
- } - else - { -
-
-

Text:

-

@cellData.FormattedText

-
-
- } - } - else - { -
-
-

Text:

-

@cellData.FormattedText

-
-
- } - } - } - + + + @{ + if (cellData != null) + { + if (cellData.FormattedText != "Grand Total") + { + if (cellData.Axis == "row") + { +
+
+

FieldName:

+

@cellData.ValueSort["axis"]

+
+
+

Text:

+

@cellData.FormattedText

+
+
+ } + else + { +
+
+

Text:

+

@cellData.FormattedText

+
+
+ } + } + else + { +
+
+

Text:

+

@cellData.FormattedText

+
+
+ } + } + } + @code { - private SfPivotView pivot; - private List dataSource { get; set; } - private SfTooltip tooltipRef; - private AxisSet cellData; - - protected override void OnInitialized() - { - this.dataSource = ProductDetails.GetProductData().ToList(); - } - - public void Created() - { - if (tooltipRef != null) - { - tooltipRef.RefreshAsync(); - } - } - - // Event function used to update the tooltip content while hovering each row and column headers in the pivot table. - public async void OnTooltipRender(TooltipEventArgs args) - { - Dictionary cellInfo; - string returnValue = await JSRuntime.InvokeAsync("getTableCellNode", new object[] { "PivotView", args.Left, args.Top }); - if (returnValue != null) - { - // You can get the cell information for the row and column headers here to display in the tooltip. - cellInfo = JsonSerializer.Deserialize>(returnValue); - cellData = pivot.PivotValues[cellInfo["index"]]?[cellInfo["aria-colindex"]]; - } - } + private SfPivotView pivot; + private List dataSource { get; set; } + private SfTooltip tooltipRef; + private AxisSet cellData; + + protected override void OnInitialized() + { + this.dataSource = ProductDetails.GetProductData().ToList(); + } + + public void DataBound() + { + if (tooltipRef != null) + { + tooltipRef.RefreshAsync(); + } + } + + // Event function used to update the tooltip content while hovering each row and column headers in the pivot table. + public async void OnTooltipRender(TooltipEventArgs args) + { + Dictionary cellInfo; + + string returnValue = await JSRuntime.InvokeAsync("getTableCellNode", new object[] { "PivotView", args.Left, args.Top }); + if (returnValue != null) + { + // You can get the cell information for the row and column headers here to display in the tooltip. + cellInfo = JsonSerializer.Deserialize>(returnValue); + cellData = pivot.PivotValues[cellInfo["index"]]?[cellInfo["aria-colindex"]]; + } + } } ``` diff --git a/blazor/pivot-table/how-to/switching-older-themes-style.md b/blazor/pivot-table/how-to/switching-older-themes-style.md index 3cc49419cb..b20ae3ae7a 100644 --- a/blazor/pivot-table/how-to/switching-older-themes-style.md +++ b/blazor/pivot-table/how-to/switching-older-themes-style.md @@ -12,11 +12,11 @@ documentation: ug # Switching to older themes style in Blazor Pivot Table Component -From Volume 1, 2020 onwards Syncfusion® has revised the theming and layout of the Pivot Table. So, to inherit the older theme style and layout, do the necessary changes in CSS and pivot table height. +Since Volume 1, 2020, Syncfusion® has revised the theming and layout of the Pivot Table. If you prefer the appearance of the earlier theme, you can revert to it by making specific changes. This guide explains how to restore the older theme's style by modifying the CSS to adjust cell background colors and set the row height to match the previous layout. ## CSS Selectors -In current theme, the cells can be differentiated by their background colors. To avoid it, you need to override its background colors via simple CSS coding within your application. The below CSS selectors allow to achieve the same for material, fabric, bootstrap and bootstrap v4 themes. +In the current theme, cells are differentiated by their background colors. To avoid this, you need to override these background colors via simple CSS adjustments within your application. The following CSS selectors allow achieving the same for Material, Fabric, Bootstrap, and Bootstrap v4 themes: ```html @@ -30,10 +30,9 @@ In current theme, the cells can be differentiated by their background colors. To background-color:#fff !important; } - ``` -Meanwhile for high contrast theme, set the following CSS. +For the High Contrast theme, the following CSS is required: ```html @@ -47,12 +46,11 @@ Meanwhile for high contrast theme, set the following CSS. background-color:#000 !important; } - ``` ## Adjusting Row Height -In current theme, to make the component compact the height of each pivot table rows has been reduced. But user can reset the height of the pivot table using the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html). In older theme, the property was set to 36 pixels for desktop layout and 48 pixels for mobile layout. So reset the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) accordingly to visualize the older theme style. +In the current theme, the height of each Pivot Table row has been reduced to make the component more compact. Users can reset the height of the Pivot Table rows using the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property within [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html). In the older theme, this property was typically set to 36 pixels for desktop layouts and 48 pixels for mobile layouts. To replicate the older theme style, reset the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) accordingly. ```cshtml @using Syncfusion.Blazor.PivotView @@ -100,6 +98,6 @@ In current theme, to make the component compact the height of each pivot table r ``` -![Switching Older Themes to Blazor PivotTable](images/blazor-pivottable-with-old-theme.png) +![Switching Older Themes to Blazor Pivot Table](images/blazor-pivottable-with-old-theme.png) -N> You can refer to [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap4) to know how to render and configure the pivot table. \ No newline at end of file +N> You can refer to [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) feature tour page for its groundbreaking feature representations. You can also explore [Blazor Pivot Table example](https://blazor.syncfusion.com/demos/pivot-table/default-functionalities?theme=bootstrap4) to know how to render and configure the Pivot Table. \ No newline at end of file diff --git a/blazor/pivot-table/hyper-link.md b/blazor/pivot-table/hyper-link.md index a20e7572da..97c8e146e4 100644 --- a/blazor/pivot-table/hyper-link.md +++ b/blazor/pivot-table/hyper-link.md @@ -9,7 +9,20 @@ documentation: ug # Hyperlink in Blazor Pivot Table Component -The pivot table supports to show hyperlink option to link data for individual cells that are displayed in the component. Also, the hyperlink can be enabled separately for row headers, column headers, value cells, and summary cells using the [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html) class. It can be configured through the code behind, during initial rendering and the settings available to show the hyperlink are: +The Pivot Table component provides built-in support for displaying hyperlinks within individual cells. This feature allows users to link data in specific cells, enhancing interactivity and navigation. + +Hyperlinks can be selectively enabled for various cell types, including: + +- Row headers +- Column headers +- Value cells +- Summary cells + +You can control hyperlink behavior using the [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html) class, which can be defined during the initial rendering through the code-behind. + +## Available Hyperlink Settings + +The following properties are available in PivotViewHyperlinkSettings: * [ShowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowHyperlink): It allows to set the visibility of hyperlink in all cells. * [ShowRowHeaderHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowRowHeaderHyperlink): It allows to set the visibility of hyperlink in row headers. @@ -20,34 +33,36 @@ The pivot table supports to show hyperlink option to link data for individual ce * [ConditionalSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewConditionalSetting.html): It allows to set the visibility of hyperlink based on specific condition. -N> By default, the hyperlink options are disabled for all cells in the pivot table. +N> By default, the hyperlink options are disabled for all cells in the Pivot Table. N> User defined style can be applied to hyperlink using [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_CssClass) property in [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html) class. ## Hyperlink for all cells -The pivot table has an option to show hyperlink option for all cells that are currently in display. To do so, user need to set [ShowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowHyperlink) to **true**. +The Pivot Table provides an option to display hyperlinks across **all cells** currently visible in the table. To enable this functionality, set the [ShowHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowHyperlink) property to **true** within the [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html). + +Once enabled, hyperlinks will be shown consistently in row headers, column headers, value cells, and summary cells. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @@ -75,28 +90,28 @@ The pivot table has an option to show hyperlink option for all cells that are cu ## Hyperlink for row headers -The pivot table has an option to show hyperlink option for row header cells alone that are currently in display. To do so, user need to set [ShowRowHeaderHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowRowHeaderHyperlink) to **true**. +The Pivot Table provides a way to display hyperlinks specifically in **row header cells** that are currently visible. To enable this functionality, set the [ShowRowHeaderHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowRowHeaderHyperlink) property to **true** within the [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html). This ensures that only the row headers will display hyperlinks, while other cell types remain unaffected. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @@ -124,30 +139,30 @@ The pivot table has an option to show hyperlink option for row header cells alon ## Hyperlink for column headers -The pivot table has an option to show hyperlink option for column header cells alone that are currently in display. To do so, the user need to set [ShowColumnHeaderHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowColumnHeaderHyperlink) to **true**. +The Pivot Table provides an option to display hyperlinks specifically in column header cells that are currently visible. To enable this functionality, set the [ShowColumnHeaderHyperlink](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_ShowColumnHeaderHyperlink) property to **true** within the [PivotViewHyperlinkSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html) class. This ensures that only the column headers will display hyperlinks, while other cell types remain unaffected. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         + + + + + + + + + + + -     - - + + + @code{ - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } } ``` @@ -329,28 +346,30 @@ The pivot table has an option to show hyperlink in the cells based on specific c ## Header based hyperlink -The pivot table has an option to show hyperlink in the cells based on specific row or column header. It can be configured using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_HeaderText) option through code behind, during initial rendering. +The Pivot Table supports displaying hyperlinks in cells based on specific row or column headers. This functionality can be enabled using the [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_HeaderText) property, which is configured through code-behind during initial rendering. + +In the below code example, the value **FY 2015** is assigned to [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewHyperlinkSettings.html#Syncfusion_Blazor_PivotView_PivotViewHyperlinkSettings_HeaderText), which means the Pivot Table will show hyperlinks only in cells that match this specific header combination. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @@ -378,75 +397,83 @@ The pivot table has an option to show hyperlink in the cells based on specific r ## Event -The event [HyperlinkCellClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_HyperlinkCellClicked) fires on every hyperlink cell click. +The Pivot Table triggers the [`HyperlinkCellClicked`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_HyperlinkCellClicked) event whenever a hyperlink cell is clicked. This event allows you to either customize the clicked cell or retrieve information about it. + +It provides two parameters: -It has following parameters - [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_Cancel) and [CurrentCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_CurrentCell). The parameter [CurrentCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_CurrentCell) is used to customize the host cell element by any means. Meanwhile, when the parameter [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_Cancel) is set to **true**, applied customization will not be updated to the host cell element. +* [`CurrentCell`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_CurrentCell): Refers to the clicked cell element, which can be modified as needed. +* [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_Cancel): If set to **true**, prevents any changes from being applied to the cell. +* [`Data`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_Data): Contains detailed information about the clicked cell, including its value, row and column headers, position, and whether it’s a summary cell. +* [`NativeEvent`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_NativeEvent): Represents the original browser event triggered by the click, useful for advanced event handling. + +In the example below, when a hyperlink cell is clicked, the cell is checked to determine if it is a row header. If it is a row header (e.g., 'France'), the user is redirected to the corresponding Wikipedia page (e.g., 'https://en.wikipedia.org/wiki/France'). If the clicked cell is a column header, value cell, or summary cell, the user is redirected to 'https://syncfusion.com/'. The [`Cancel`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.HyperCellClickEventArgs.html#Syncfusion_Blazor_PivotView_HyperCellClickEventArgs_Cancel) property is set to **false** to enable this interaction. ```cshtml @using Syncfusion.Blazor.PivotView @inject IJSRuntime JSRuntime - -     -             -             -         -         -             -             -         -         -             -         -     - - - + + + + + + + + + + + + + + + + -@code{ - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } - public async Task OnHyperLinkClick(HyperCellClickEventArgs args) - { - int row= (args.Data as AxisSet).RowIndex; - int col= (args.Data as AxisSet).ColIndex; - string baseUrl = "https://en.wikipedia.org/wiki/"; - await JSRuntime.InvokeVoidAsync("navigateFromPivotCellCoordinates", row, col, baseUrl); - } +@code { + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } + public async Task OnHyperLinkClick(HyperCellClickEventArgs args) + { + int row = (args.Data as AxisSet).RowIndex; + int col = (args.Data as AxisSet).ColIndex; + string baseUrl = "https://en.wikipedia.org/wiki/"; + await JSRuntime.InvokeVoidAsync("navigateFromPivotCellCoordinates", row, col, baseUrl); + } } ``` diff --git a/blazor/pivot-table/images/blazor-pivottable-show-sub-total-using-toolbar.png b/blazor/pivot-table/images/blazor-pivottable-show-sub-total-using-toolbar.png index af6968f3ed..24e807b625 100644 Binary files a/blazor/pivot-table/images/blazor-pivottable-show-sub-total-using-toolbar.png and b/blazor/pivot-table/images/blazor-pivottable-show-sub-total-using-toolbar.png differ diff --git a/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-bottom.png b/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-bottom.png new file mode 100644 index 0000000000..55dd0c7607 Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-bottom.png differ diff --git a/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-top.png b/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-top.png new file mode 100644 index 0000000000..f0d82cb6b2 Binary files /dev/null and b/blazor/pivot-table/images/blazor-pivottable-show-sub-totals-at-top.png differ diff --git a/blazor/pivot-table/images/blazor-pivottable-show-total-using-toolbar.png b/blazor/pivot-table/images/blazor-pivottable-show-total-using-toolbar.png index 7af4bdd125..c672c1571c 100644 Binary files a/blazor/pivot-table/images/blazor-pivottable-show-total-using-toolbar.png and b/blazor/pivot-table/images/blazor-pivottable-show-total-using-toolbar.png differ diff --git a/blazor/pivot-table/images/code-web-app.jpeg b/blazor/pivot-table/images/code-web-app.jpeg new file mode 100644 index 0000000000..0c9c04448b Binary files /dev/null and b/blazor/pivot-table/images/code-web-app.jpeg differ diff --git a/blazor/pivot-table/images/ms-data-sqlclient-nuget-package-install.jpeg b/blazor/pivot-table/images/ms-data-sqlclient-nuget-package-install.jpeg new file mode 100644 index 0000000000..d7732fdaef Binary files /dev/null and b/blazor/pivot-table/images/ms-data-sqlclient-nuget-package-install.jpeg differ diff --git a/blazor/pivot-table/images/mysql-data.PNG b/blazor/pivot-table/images/mysql-data.PNG index d7fb48593a..0381aa1b34 100644 Binary files a/blazor/pivot-table/images/mysql-data.PNG and b/blazor/pivot-table/images/mysql-data.PNG differ diff --git a/blazor/pivot-table/images/next-nuget-package-install.png b/blazor/pivot-table/images/next-nuget-package-install.png new file mode 100644 index 0000000000..928de53378 Binary files /dev/null and b/blazor/pivot-table/images/next-nuget-package-install.png differ diff --git a/blazor/pivot-table/images/oracle-code-web-app.png b/blazor/pivot-table/images/oracle-code-web-app.png new file mode 100644 index 0000000000..c0ca1ed345 Binary files /dev/null and b/blazor/pivot-table/images/oracle-code-web-app.png differ diff --git a/blazor/pivot-table/images/postgresql_data.png b/blazor/pivot-table/images/postgresql_data.png new file mode 100644 index 0000000000..fea9e9ec88 Binary files /dev/null and b/blazor/pivot-table/images/postgresql_data.png differ diff --git a/blazor/pivot-table/number-formatting.md b/blazor/pivot-table/number-formatting.md index 3d247196f7..57b1a6bc2d 100644 --- a/blazor/pivot-table/number-formatting.md +++ b/blazor/pivot-table/number-formatting.md @@ -9,30 +9,40 @@ documentation: ug # Number Formatting in Blazor Pivot Table Component -Allows you to specify the required display format that should be used in values of the pivot table. Supported display formats are: +The Pivot Table component provides comprehensive number formatting capabilities, allowing you to display numeric values in various formats. This enhances data readability and ensures values are displayed accurately to meet your specific needs. -* Number -* Currency -* Percentage -* Custom +## Supported format types -You can apply format for the numeric values using the following properties in the [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). +The Pivot Table component supports the following display formats for numeric values: -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Name): It allows to specify the field name. -* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): It allows to specify the format of the respective field. +* **Number** - Standard numeric formatting with optional grouping separators and configurable decimal places. +* **Currency** - Formats currency values with appropriate symbols, optional grouping separators, and customizable decimal places. +* **Percentage** - Values displayed as percentages with the % symbol. +* **Custom** - User-defined formatting patterns for specific display requirements. -Possible formatting values are: +## Defining number format settings -1. N - denotes numeric type. -2. C - denotes currency type. -3. P - denotes percentage type. +To configure number formats for numeric values, use the [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). Use the following main properties within the [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings) option to define how values are formatted: -N> If no format is specified it takes number as default format type. +### Essential formatting properties -Other properties include: +* [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. +* [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format): Defines the format pattern for the respective field. -* [UseGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_UseGrouping): It allows to enable or disable the separator, for example, $100,000,000 or $100000000 respectively. By default, it will be set as **true**. -* [Currency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Currency): It allows to set the currency code which needs to be considered for the currency formatting. +### Format type codes + +Use these standard format codes to specify the formatting type: + +1. **N** - Numeric formatting (e.g., 1,234.56) +2. **C** - Currency formatting (e.g., $1,234.56) +3. **P** - Percentage formatting (e.g., 12.34%) + +N> When no format is specified, the component applies numeric formatting as the default. + +### Additional formatting options + +* [UseGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_UseGrouping): Controls the display of grouping separators. When set to **true** (default), displays values like $100,000,000; when **false**, displays as $100000000. +* [Currency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Currency): Specifies the currency code to be considered for currency formatting (e.g., USD, EUR, GBP). ```cshtml @using Syncfusion.Blazor.PivotView @@ -74,7 +84,7 @@ You can also format the values at runtime using the formatting dialog. This opti ## Custom format -You can add any custom format directly to the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format) property in the [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). Custom format can be achieved by using one or more format specifiers listed in the following table. +Custom format lets you display numbers in your preferred pattern by setting the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Format) property within the [FormatSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_FormatSettings). You can use one or more format specifiers (shown in the table below) to control how values appear in the Pivot Table. | Specifier | Description | Input | Format Output | | ------- |--------------- | ---------------- | --------------- | @@ -86,7 +96,7 @@ You can add any custom format directly to the [Format](https://help.syncfusion.c | ; | Denotes separate formats for positive, negative and zero values. | { format: '###.##;(###.00);-0' } | '(120.00)' | | 'String' (single Quotes) | Denotes the characters that are enclosed in the single quote (') to be replaced in the resulting string. | { format: "####.00 '@'" } | "123.00 @" | -N> If custom format is defined, certain properties such as [UseGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_UseGrouping) and [Currency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Currency) will not be considered. +N> When you define a custom format, certain properties such as [UseGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_UseGrouping) and [Currency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewFormatSetting.html#Syncfusion_Blazor_PivotView_PivotViewFormatSetting_Currency) in the format settings will be ignored. ```cshtml @using Syncfusion.Blazor.PivotView @@ -127,7 +137,7 @@ N> If custom format is defined, certain properties such as [UseGrouping](https:/ ## Toolbar -You can enable formatting dialog option in the toolbar by adding `NumberFormatting` in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar). After that, you can see the option to invoke the formatting dialog in the toolbar. +Number formatting can be applied instantly at runtime through the built-in dialog, accessible from the toolbar. To enable this, set both the [AllowNumberFormatting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowNumberFormatting) and [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) properties to **true**, and include the **NumberFormatting** option in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property. The toolbar will then automatically display the "Number Formatting" icon. Clicking this icon opens the dialog, allowing you to specify number formats for value fields directly within the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/paging.md b/blazor/pivot-table/paging.md index 2e1f67a2f3..03de65cb94 100644 --- a/blazor/pivot-table/paging.md +++ b/blazor/pivot-table/paging.md @@ -11,7 +11,9 @@ documentation: ug N> This feature is applicable only for relational data source. -Paging allows you to load large amounts of data that can be divided and displayed page by page in the pivot table. It can be enabled by setting the [EnablePaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnablePaging) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. It can be configured at code-behind by using the [PivotViewPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html) property, during initial rendering of the component. The properties required are: +The paging feature in the Pivot Table component is designed to handle large datasets efficiently by dividing the data into manageable pages. This prevents performance issues associated with rendering large amounts of data at once, allowing users to navigate through rows and columns page by page. + +To enable paging, set the [EnablePaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnablePaging) property to **true**. Paging can be configured in the code-behind during the initial rendering of the component using the [PivotViewPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html) property. This allows you to define the initial page setup for rows and columns. The key properties within [PivotViewPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html) include: * [CurrentRowPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html#Syncfusion_Blazor_PivotView_PivotViewPageSettings_CurrentRowPage): Allows user to set the current row page number to be displayed in the pivot table. * [CurrentColumnPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html#Syncfusion_Blazor_PivotView_PivotViewPageSettings_CurrentColumnPage): Allows user to set the current column page number to be displayed in the pivot table. @@ -20,7 +22,7 @@ Paging allows you to load large amounts of data that can be divided and displaye ## Pager UI -When paging is enabled, a built-in pager UI appears at the bottom of the pivot table, allowing you to change the current page in the row and column axes by navigating to a desired page using the navigation buttons or an input text box, as well as change the page size via dropdown at runtime. +When paging is enabled, a built-in pager UI appears at the bottom of the Pivot Table by default. This user-friendly interface enables seamless navigation across row and column axis pages using navigation buttons or an input box, and allows dynamic page size adjustments via dropdown menus. You can also change the position, visibility, compact view, and template of the row and column pagers by using the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html). @@ -67,9 +69,9 @@ You can also change the position, visibility, compact view, and template of the ### Show pager UI at top or bottom -You can display the pager UI at top or bottom of the pivot table by using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Position) property. To show the pager UI at top of the pivot table, set the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Position) property in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) to [PagerPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PagerPosition.html#Syncfusion_Blazor_PivotView_PagerPosition_Top). +The Pivot Table component allows you to configure the placement of the pager UI to match your layout preferences. You can display the pager UI either at the top or bottom of the pivot table by setting the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Position) property within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. By default, the pager UI appears at the bottom, but setting the position property to **Top** places it above the pivot table. This can be ideal for layouts where navigation controls are preferred at the top for better visibility or alignment with other UI elements. -N> By default, the pager UI appears at the bottom of the pivot table. +The following code demonstrates how to configure the pager UI to appear at the top of the pivot table: ```cshtml @using Syncfusion.Blazor.PivotView @@ -114,9 +116,7 @@ N> By default, the pager UI appears at the bottom of the pivot table. ### Inverse pager -Toggles and displays row and column pager. To show the column pager on the left side of the pager UI, set the [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_IsInversed) property in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) to **true**. - -N> By default, the row pager is displayed on the left side of the pager UI, while the column pager is displayed on the right side. +The Pivot Table allows you to toggle the positions of the row and column pagers in the pager UI. By default, the row pager appears on the left side of the pager UI, and the column pager appears on the right. To swap these positions—displaying the column pager on the left and the row pager on the right—set the [IsInversed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_IsInversed) property to **true** within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. ```cshtml @using Syncfusion.Blazor.PivotView @@ -161,7 +161,7 @@ N> By default, the row pager is displayed on the left side of the pager UI, whil ### Compact view -By hiding all except the previous and next navigation buttons, the pager UI can be displayed with the absolute minimum of paging options. The compact view can be enabled by setting the [EnableCompactView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_EnableCompactView) property in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) to **true**. +The Pivot Table provides a compact view for the pager UI, displaying only the previous and next navigation buttons to minimize the interface. To enable the compact view, set the [EnableCompactView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_EnableCompactView) property to **true** within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. This streamlined layout focuses on essential navigation controls, ideal for layouts requiring a simplified paging experience. ```cshtml @using Syncfusion.Blazor.PivotView @@ -206,9 +206,9 @@ By hiding all except the previous and next navigation buttons, the pager UI can ### Show or hide paging option -By using the [ShowRowPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPager) and [ShowColumnPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowColumnPager) properties in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html), you can show or hide row and column pager separately in the pager UI. +The Pivot Table allows you to control the visibility of the row and column pagers in the pager UI using the [ShowRowPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPager) and [ShowColumnPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowColumnPager) properties within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. By default, both row and column pagers are visible in the pager UI. To hide either the row pager or the column pager, set the corresponding property to **false**. This allows you to display only the necessary navigation controls based on your layout requirements. -In the following example, row pager has been disabled by setting the [ShowRowPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPager) property in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) to **false**. +The following code demonstrates how to hide the row pager by setting the [ShowRowPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPager) property to **false**: ```cshtml @using Syncfusion.Blazor.PivotView @@ -253,7 +253,7 @@ In the following example, row pager has been disabled by setting the [ShowRowPag ### Show or hide page size -By using the [ShowRowPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPageSize) and [ShowColumnPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowColumnPageSize) properties in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html), you can show or hide "Rows per page" and "Columns per page" dropdown menu. The dropdown menu contains a list of pre-defined or user-defined page sizes, which will be displayed in the "Rows per page" and "Columns per page" dropdowns, allowing you to change the page size for the row and column axes at runtime. +The Pivot Table allows you to control the visibility of the "Rows per page" and "Columns per page" dropdowns in the pager UI using the [ShowRowPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowRowPageSize) and [ShowColumnPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ShowColumnPageSize) properties within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. These dropdowns display a list of predefined or user-defined page sizes, enabling you to adjust the number of rows or columns displayed per page at runtime. By default, both dropdowns are visible in the pager UI. To hide either the "Rows per page" or "Columns per page" dropdown, set the corresponding property to **false**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -298,11 +298,9 @@ By using the [ShowRowPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion. ### Customize page size -By using the [RowPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_RowPageSizes) and [ColumnPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ColumnPageSizes) properties in [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html), you can specify a set of desired page sizes, which will be displayed in the "Rows per page" and "Columns per page" dropdowns, allowing you to change the page size for the row and column axes at runtime. +The Pivot Table allows you to specify a list of page sizes for the "Rows per page" and "Columns per page" dropdowns in the pager UI using the [RowPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_RowPageSizes) and [ColumnPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ColumnPageSizes) properties within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. By default, the "Rows per page" dropdown includes page sizes of 10, 50, 100, and 200, while the "Columns per page" dropdown includes page sizes of 5, 10, 20, 50, and 100. To define a different set of page sizes, assign an array of numbers to the [RowPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_RowPageSizes) or [ColumnPageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_ColumnPageSizes) properties. -N> By default, the "Rows per page" dropdown have pre-defined page sizes of **10, 50, 100, and 200**, while the "Columns per page" dropdown have pre-defined page sizes of **5, 10, 20, 50, and 100**. - -In the following example, the "Rows per page" dropdown is set with user-defined page sizes of **10, 20, 30, 40, and 50** and the "Columns per page" dropdown is set with user-defined page sizes of **5, 10, 15, 20, and 30**. +The following example sets the "Rows per page" dropdown with page sizes of 10, 20, 30, 40, and 50, and the "Columns per page" dropdown with page sizes of 5, 10, 15, 20, and 30: ```cshtml @using Syncfusion.Blazor.PivotView @@ -347,7 +345,9 @@ In the following example, the "Rows per page" dropdown is set with user-defined ### Template -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Template) property allows to change the appearance of the pager UI by displaying user-defined HTML elements instead of built-in HTML elements. +The Pivot Table allows you to define a custom layout for the pager UI using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Template) property within the [PivotViewPagerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html) configuration. By default, the pager UI displays built-in navigation controls. To replace these with custom HTML elements, define the custom elements within the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Template) property in the Razor page. This enables you to create a unique pager interface that aligns with your application’s design requirements. + +This following example shows how to create a custom template for both row and column pagers directly within the Razor page. The Syncfusion [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) control is used within the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPagerSettings.html#Syncfusion_Blazor_PivotView_PivotViewPagerSettings_Template) property to define the custom layout. You can configure the pager by setting properties like [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize), [TotalItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_TotalItemsCount), and [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_CurrentPage). When you click on a custom row or column pager, the [CurrentRowPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html#Syncfusion_Blazor_PivotView_PivotViewPageSettings_CurrentRowPage) and [CurrentColumnPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html#Syncfusion_Blazor_PivotView_PivotViewPageSettings_CurrentColumnPage) properties in [PivotViewPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewPageSettings.html) are updated, enabling navigation with the custom pager. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/pdf-export.md b/blazor/pivot-table/pdf-export.md index a13aa412df..555ac29aa5 100644 --- a/blazor/pivot-table/pdf-export.md +++ b/blazor/pivot-table/pdf-export.md @@ -9,9 +9,11 @@ documentation: ug # PDF Export in Blazor Pivot Table Component -The PDF export allows Pivot Table data to be exported as PDF document. To enable PDF export in the pivot table, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowPdfExport) in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) as **true**. Once the API is set, the user needs to call the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method for exporting, on external button click. +The PDF export allows users to easily export their Pivot Table data as a PDF document. To enable PDF export in the Pivot Table, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_AllowPdfExport) property to **true** in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) configuration. Once enabled, you can use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method to generate and download the PDF file. -N> The pivot table component can be exported to PDF format using options available in the toolbar. For more details [refer](./tool-bar) here. +In the following example, an external button is used to start the PDF export process. When the user clicks the button, the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method is called so that the Pivot Table data can be saved as a PDF file. + +N> The Pivot Table component can be exported to PDF format using options available in the toolbar. For more details [refer](./tool-bar) here. ```cshtml @using Syncfusion.Blazor.PivotView @@ -57,7 +59,7 @@ N> The pivot table component can be exported to PDF format using options availab ## Export table and chart into the same document -When the [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View) property is set to [View.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.View.html#Syncfusion_Blazor_PivotView_View_Both) within the [PivotViewDisplayOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html) tag, you can export both the table and the chart into the same PDF document. To achieve this, use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__) method and set the **exportTableAndChart** parameter to **true**. +If you want to export both the table and the chart from the Pivot Table into a single PDF file, set the [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View) property to [View.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.View.html#Syncfusion_Blazor_PivotView_View_Both) within the [PivotViewDisplayOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html) tag. Then, when you use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__) method, make sure to set the **exportTableAndChart** parameter to **true**. This will include both the data table and its chart in one PDF document when you export. N> This support is applicable only when the virtual scrolling is enabled. @@ -111,22 +113,29 @@ N> This support is applicable only when the virtual scrolling is enabled. } ``` +Additionally, we recommend configuring the maximum incoming SignalR message size in your **Program.cs** file, as shown in the code snippet below. This configuration helps ensure smooth handling of large data operations, especially when exporting data from the Pivot Table component. + +```csharp +builder.Services.AddServerSideBlazor().AddHubOptions(options => { options.MaximumReceiveMessageSize = 1024 * 128; }); +``` + ## To add header and footer while exporting -You can customize text, page number, line, page size and changing orientation in header and footer of the exported document. +When exporting data from the Pivot Table to a PDF document, you can include additional information in the header or footer. You can add text, lines, page numbers, or images to ensure your exported document includes important details, such as your organization's name or branding, and to improve readability. + +To do this, you can use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeader.html) or [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfFooter.html) options in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html). These options allow you to specify what content to display at the top or bottom of each PDF page when exporting. ### To add a text in header/footer -You can add text either in header or footer of the exported PDF document like in the below code example. +You can include custom text in the header or footer of the exported PDF document. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterElement.html#Syncfusion_Blazor_Grids_PdfHeaderFooterElement_Type) property to **Text** in the contents array to add text. The following example shows how to add the text "Northwind Traders" to the header: ```cshtml @code { private List headerContent = new List { new PdfHeaderFooterContent() { - // Here you can set the content type, value, and other properties for customizing the header or footer of the exported PDF document. Type = ContentType.Text, - Value = "Pivot Table", + Value = "Northwind Traders", Position = new PdfPosition() { X = 0, Y = 50 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } } @@ -148,10 +157,9 @@ You can add text either in header or footer of the exported PDF document like in ### To draw a line in header/footer -You can add line either in header or footer of the exported PDF document like in the below code example. - -Supported line styles are, +You can draw lines in the header or footer to create visual separators or decorative elements. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterElement.html#Syncfusion_Blazor_Grids_PdfHeaderFooterElement_Type) property to **Line** in the contents array to add line elements. The line can be styled with different dash patterns and colors. +**Supported line styles:** * Dash * Dot * DashDot @@ -186,15 +194,14 @@ Supported line styles are, ### Add page number in header/footer -You can add page number either in header or footer of the exported PDF document like in the below code example. +You can display page numbers in the header or footer using various numbering formats. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterElement.html#Syncfusion_Blazor_Grids_PdfHeaderFooterElement_Type) property to **PageNumber** in the contents array to add page number elements. This helps users navigate through multi-page PDF documents easily. -Supported page number types are, - -* LowerLatin - a, b, c, -* UpperLatin - A, B, C, -* LowerRoman - i, ii, iii, -* UpperRoman - I, II, III, -* Number - 1,2,3. +**Supported page number types:** +* LowerLatin - a, b, c +* UpperLatin - A, B, C +* LowerRoman - i, ii, iii +* UpperRoman - I, II, III +* Arabic - 1, 2, 3 ```cshtml @code { @@ -225,7 +232,7 @@ Supported page number types are, ### Add an image in header/footer -You can add image (Base64 string) either in header or footer of the exported PDF document like in the below code example. +You can include images in the header or footer by providing a Base64 encoded string. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterElement.html#Syncfusion_Blazor_Grids_PdfHeaderFooterElement_Type) property to **Image** in the contents array to add image elements. This allows you to add logos, watermarks, or other visual elements to your PDF documents. ```cshtml @code { @@ -297,7 +304,7 @@ The below code illustrates the PDF export customization options. { new PdfHeaderFooterContent() { Type = ContentType.Text, - Value = "Pivot Table", + Value = "Northwind Traders", Position = new PdfPosition() { X = 0, Y = 50 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } } @@ -335,9 +342,9 @@ The below code illustrates the PDF export customization options. ## Changing the pivot table style while exporting -The PDF export provides an option to change colors for headers, caption and records in the pivot table before exporting. In-order to apply colors, define **theme** settings in **pdfExportProperties** object and pass it as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. +When you export the Pivot Table as a PDF document, you can change the colors used for headers, captions, and records. To do this, use the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html) property inside the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. Pass this object to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. This allows you to adjust how the Pivot Table looks in the exported PDF. -N> By default, material theme will be applied to the pivot table during PDF exporting. +N> By default, the Material theme is applied to the exported PDF document. ```cshtml @using Syncfusion.Blazor.PivotView @@ -409,7 +416,7 @@ N> By default, material theme will be applied to the pivot table during PDF expo ## Changing the file name while exporting -The PDF export provides an option to change the file name of the document before exporting. In-order to change the file name, define **fileName** property in **pdfExportProperties** object and pass it as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. +The PDF export provides an option to change the file name of the document before exporting. To change the file name, define the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class and pass it as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. ```cshtml @using Syncfusion.Blazor.PivotView @@ -417,38 +424,38 @@ The PDF export provides an option to change the file name of the document before - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + @code { - SfPivotView pivot; - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind your dataSource collection here, refer the getting started section. for more information. - } - public void OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) - { - Syncfusion.Blazor.Grids.PdfExportProperties pdfExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties() { FileName = "sample.pdf" }; - this.pivot.ExportToPdfAsync(pdfExportProperties); - } + SfPivotView pivot; + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind your dataSource collection here, refer the getting started section for more information. + } + public void OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) + { + Syncfusion.Blazor.Grids.PdfExportProperties pdfExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties() { FileName = "sample.pdf" }; + this.pivot.ExportToPdfAsync(pdfExportProperties); + } } ``` @@ -456,9 +463,11 @@ The PDF export provides an option to change the file name of the document before ## Changing page size while exporting -The PDF export provides an option to change page size of the document before exporting. In-order to change the page size, define **pageSize** property in **pdfExportProperties** object and pass it as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. +When exporting Pivot Table data to PDF, users can select a specific page size for the PDF document. To set the page size, define the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageSize) property within the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class, and pass this object as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. -**Supported page sizes are:** Letter, Note, Legal, A0, A1, A2, A3, A5, A6, A7, A8, A9, B0, B1, B2, B3, B4, B5, Archa, Archb, Archc, Archd, Arche, Flsa, HalfLetter, Letter11x17, Ledger. +You can choose from various page sizes, such as Letter, Note, Legal, A0, A1, A2, A3, A5, A6, A7, A8, A9, B0, B1, B2, B3, B4, B5, Archa, Archb, Archc, Archd, Arche, Flsa, HalfLetter, Letter11x17, and Ledger. + +This option lets users easily adjust the PDF layout to fit their specific needs before exporting the data from the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -505,7 +514,7 @@ The PDF export provides an option to change page size of the document before exp ## Changing page orientation while exporting -The PDF export provides an option to change page orientation of the document before exporting. In-order to change the page orientation, define **pageOrientation** property in **pdfExportProperties** object and pass it as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. By default, the page orientation will be in **Portrait** and it can be changed to **Landscape** based on the user requirement. +When exporting the Pivot Table as a PDF, users can choose the page orientation of the document. By default, the PDF is exported in **Portrait** orientation. If you want to change the orientation to **Landscape**, set the [PageOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageOrientation) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. Then, pass this object as a parameter to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. This lets you select either Portrait or Landscape orientation based on your needs before saving the exported PDF. ```cshtml @using Syncfusion.Blazor.PivotView @@ -513,38 +522,38 @@ The PDF export provides an option to change page orientation of the document bef - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + @code { - SfPivotView pivot; - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } - public void OnPdfExport() - { - Syncfusion.Blazor.Grids.PdfExportProperties pdfExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties() { PageOrientation = Syncfusion.Blazor.Grids.PageOrientation.Landscape }; - this.pivot.ExportToPdfAsync(pdfExportProperties); - } + SfPivotView pivot; + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } + public void OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) + { + Syncfusion.Blazor.Grids.PdfExportProperties pdfExportProperties = new Syncfusion.Blazor.Grids.PdfExportProperties() { PageOrientation = Syncfusion.Blazor.Grids.PageOrientation.Landscape }; + this.pivot.ExportToPdfAsync(pdfExportProperties); + } } ``` @@ -552,9 +561,9 @@ The PDF export provides an option to change page orientation of the document bef ## Saving PDF document to stream -Rather than exporting the Pivot Table as a downloadable file, user can save the PDF document as a memory stream. This is achieved by setting the **asBlob** option to **true** in the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Nullable_System_Boolean__) method. The resulting memory stream can then be further processed and customized by the user before being exported as a document. +Rather than exporting the Pivot Table as a downloadable file, users can save the PDF document as a memory stream. This is achieved by setting the **asBlob** option to **true** in the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Nullable_System_Boolean__) method. The resulting memory stream can then be further processed and customized by the user before being exported as a document. -N> This option is only available if virtualization is enabled in the pivot table. +N> This option is only available if virtualization is enabled in the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -611,9 +620,6 @@ N> This option is only available if virtualization is enabled in the pivot table // Here you can obtain the PDF document as a memory stream by setting the last parameter as "true" in the "ExportToPdfAsync" method. memoryStream = await this.pivot.ExportToPdfAsync(null, false, true); // You can then process the memory stream based on your needs and save it as mentioned in the last statement. - ...... - ...... - ...... await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "default.pdf", Convert.ToBase64String(memoryStream.ToArray()) }); } } @@ -623,14 +629,16 @@ N> This option is only available if virtualization is enabled in the pivot table ### PdfQueryCellInfo -The event [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_PdfQueryCellInfo) triggers on framing each row and value cell during PDF export. It allows the user customize the cell value, style, etc. of the current cell. It has the following parameters. +The [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_PdfQueryCellInfo) event occurs for each row and value cell while exporting the Pivot Table to a PDF. This event allows users to change the value, appearance, or other details of the current cell in the PDF file. The following parameters are available in this event: + +- [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Value): The content displayed in the cell. +- [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Column): The column information for the current cell. **Note:** This option is applicable only when virtualization is disabled. +- [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Cell): The complete cell information for the cell. +- [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Style): The style properties that control how the cell looks in the PDF. +- [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_RowIndex): It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. +- [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_ColumnIndex): It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. -* [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Value) : It holds the cell value. -* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Column) : It holds the column information, including row and column indexes required to obtain the current cell information. **Note:** This option is applicable only when virtualization is disabled. -* [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Cell) : It holds the current cell information. -* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_Style) : It holds the style properties for the cell. -* [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_RowIndex) : It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. -* [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfQueryCellInfoEventArgs-1.html#Syncfusion_Blazor_Grids_PdfQueryCellInfoEventArgs_1_ColumnIndex) : It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. +By using this event, users can easily update the cell text, apply different styles such as font or background color, or adjust other settings as needed during PDF export. ```cshtml @using Syncfusion.Blazor.PivotView @@ -639,71 +647,71 @@ The event [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + @code { - private SfPivotView pivot; - public List data { get; set; } - - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } - - public void OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) - { - this.pivot.ExportToPdfAsync(); - } - - // Triggers every time for row header and value cells during exporting. - public void PdfQueryCellEvent(PdfQueryCellInfoEventArgs args) - { - Matrix> pivotValues = pivot?.PivotValues; - AxisSet cellInfo = null; - if (pivot?.EnableVirtualization == true) - { - if (pivotValues != null) - { - cellInfo = pivotValues[args.RowIndex]?[args.ColumnIndex]; - } - } - else - { - IDictionary cellCoordinates = args.Column?.CustomAttributes; - if (pivotValues != null && cellCoordinates != null && cellCoordinates.ContainsKey("aria-colindex") && cellCoordinates.ContainsKey("aria-rowindex")) - { - // You will get the row index required to find the current cell information from the pivot value collection here. - int rowIndex = int.Parse(cellCoordinates["aria-rowindex"].ToString(), System.Globalization.NumberStyles.None); - // You will get the column index required to find the current cell information from the pivot value collection here. - int colIndex = int.Parse(cellCoordinates["aria-colindex"].ToString(), System.Globalization.NumberStyles.None); - cellInfo = pivotValues[rowIndex]?[colIndex]; - } - } - if (cellInfo?.IsGrandSum == true || cellInfo?.Axis == "row") - { - args.Style.BackgroundBrush = new Syncfusion.PdfExport.PdfSolidBrush(cellInfo?.Axis == "row" ? new Syncfusion.PdfExport.PdfColor(System.Drawing.Color.LightGoldenrodYellow) : new Syncfusion.PdfExport.PdfColor(System.Drawing.Color.LightYellow)); - args.Style.TextPen = new Syncfusion.PdfExport.PdfPen(System.Drawing.Color.IndianRed); - } - } + private SfPivotView pivot; + public List data { get; set; } + + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } + + public void OnPdfExport(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) + { + this.pivot.ExportToPdfAsync(); + } + + // Triggers every time for row header and value cells during exporting. + public void PdfQueryCellEvent(PdfQueryCellInfoEventArgs args) + { + Matrix> pivotValues = pivot?.PivotValues; + AxisSet cellInfo = null; + if (pivot?.EnableVirtualization == true) + { + if (pivotValues != null) + { + cellInfo = pivotValues[args.RowIndex]?[args.ColumnIndex]; + } + } + else + { + IDictionary cellCoordinates = args.Column?.CustomAttributes; + if (pivotValues != null && cellCoordinates != null && cellCoordinates.ContainsKey("aria-colindex") && cellCoordinates.ContainsKey("aria-rowindex")) + { + // You will get the row index required to find the current cell information from the pivot value collection here. + int rowIndex = int.Parse(cellCoordinates["aria-rowindex"].ToString(), System.Globalization.NumberStyles.None); + // You will get the column index required to find the current cell information from the pivot value collection here. + int colIndex = int.Parse(cellCoordinates["aria-colindex"].ToString(), System.Globalization.NumberStyles.None); + cellInfo = pivotValues[rowIndex]?[colIndex]; + } + } + if (cellInfo?.IsGrandSum == true || cellInfo?.Axis == "row") + { + args.Style.BackgroundBrush = new Syncfusion.PdfExport.PdfSolidBrush(cellInfo?.Axis == "row" ? new Syncfusion.PdfExport.PdfColor(System.Drawing.Color.LightGoldenrodYellow) : new Syncfusion.PdfExport.PdfColor(System.Drawing.Color.LightYellow)); + args.Style.TextPen = new Syncfusion.PdfExport.PdfPen(System.Drawing.Color.IndianRed); + } + } } ``` @@ -711,13 +719,15 @@ The event [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl N> The row header cell can be obtained by using the `PdfQueryCellInfo` event. It can be identified using `AxisSet.Axis == "row"` and for reference, see the code snippet in the previous topic. -The event [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_PdfHeaderQueryCellInfo) triggers on framing each column header cell during PDF export. It allows the user to customize the cell value, style, etc. of the current cell. It has the following parameters: +The [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_PdfHeaderQueryCellInfo) event is triggered for each column header cell when exporting the Pivot Table to a PDF document. This event allows users to easily change values or apply styles to the column header cells in the exported PDF file. + +The event provides the following parameters: -* [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Column) : It holds the column information, including row and column indexes required to obtain the current cell information. **Note:** This option is applicable only when virtualization is disabled. -* [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Cell) : It holds the current cell information. -* [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Style) : It holds the style properties for the cell. -* [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_RowIndex) : It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. -* [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_ColumnIndex) : It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. +- [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Column): Gives information about the current header cell being exported. **Note:** This option is applicable only when virtualization is disabled. +- [Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Cell): Contains the current cell information. +- [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_Style): Contains style properties that can be used to format the cell. +- [RowIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_RowIndex): It holds the row index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. +- [ColumnIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_PdfHeaderQueryCellInfoEventArgs_ColumnIndex): It holds the column index required to get the current cell information. **Note:** When virtualization is enabled, this option is applicable. ```cshtml @using Syncfusion.Blazor.PivotView @@ -797,4 +807,4 @@ The event [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfus ![Customizing the Blazor Pivot Table cell values and styles while exporting](images/blazor-pivottable-pdfexportevents.png) -N> You can 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. +N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/pivot-chart.md b/blazor/pivot-table/pivot-chart.md index cc71fb8374..63d1aedaa3 100644 --- a/blazor/pivot-table/pivot-chart.md +++ b/blazor/pivot-table/pivot-chart.md @@ -9,17 +9,17 @@ documentation: ug # Pivot Chart in Blazor Pivot Table Component -In [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component, pivot chart would act as an additional visualization component with its basic and important characteristic like drill down and drill up, 15+ chart types, series customization, axis customization, legend customization, export, print and tooltip. Its main purpose is to show the pivot data in graphical format. +The Pivot Chart in the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table) component helps users visualize aggregated values in a clear and graphical format. It provides essential options like drill down and drill up operations, over 15 chart types, and various display settings for series, axes, legends, export, print, and tooltips. The main purpose of the Pivot Chart is to present Pivot Table data in a way that is easy to understand and interact with. -To have a quick glance about Pivot Chart in the Blazor Pivot Table, watch this video: +To have a quick glance about Pivot Chart in the [Blazor Pivot Table](https://www.syncfusion.com/blazor-components/blazor-pivot-table), watch this video: {% youtube "youtube:https://www.youtube.com/watch?v=-R-aoblUd1k&t=1s"%}. -If the user prefers, the pivot chart component can also be displayed individually with pivot values and can change the report dynamically with the help of field list and grouping bar. Using the [PivotViewDisplayOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class, user can set the visibility of grid and chart in pivot table component. It holds the following properties, +Users can display the pivot chart component individually with pivot values and modify the report dynamically using the field list and grouping bar. The [PivotViewDisplayOption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class allows users to control the visibility of both the grid and chart components. This property includes the following options: -* [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View): Specifies the pivot table component to display grid alone or chart alone or both. -* [Primary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_Primary): Specifies the pivot table to display either grid or chart as primary component during initial loading. It is applicable only when setting the property [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View) to [View.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.View.html). +* [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View): Determines whether the Pivot Table component displays only the grid, only the chart, or both components. +* [Primary](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_Primary): Specifies which component (grid or chart) appears as the primary view during initial loading. This option applies only when the [View](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDisplayOption.html#Syncfusion_Blazor_PivotView_PivotViewDisplayOption_View) property is set to [View.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.View.html#Syncfusion_Blazor_PivotView_View_Both). The following sample displays the pivot chart component based on the pivot report bound on it. @@ -58,19 +58,17 @@ The following sample displays the pivot chart component based on the pivot repor //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart](images/blazor-pivotchart.png) ## Data Binding -End user can bind both local and remote data binding options available in the component to feed the data. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property can be assigned either with an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) or list of object. -For more information [refer](./data-binding) here. +The Pivot Table component supports both local and remote data binding options to populate data in the pivot chart. Users can bind data to the component using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_DataSource) property, which accepts either an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for remote data sources or a list of objects for local data. For further details, [refer](./data-binding) here. ## Chart Types -Supports 19 different types of charts as follows, +The Pivot Chart offers 19 different chart types, allowing users to visualize and analyze data in various ways. You can choose any of these chart types based on your needs: * Line * Column @@ -92,9 +90,9 @@ Supports 19 different types of charts as follows, * Polar * Radar -[ChartSeriesType.Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ChartSeriesType.html) is the default pivot chart type. User can change the pivot chart type by using the property [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Type) in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) class. +By default, the **Line** chart type is displayed in the Pivot Chart. Users can change the chart type at any time using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Type) property in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) class. -In the following code sample, the pivot chart type is set as [ChartSeriesType.Bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ChartSeriesType.html). +In the following code sample, the pivot chart type is set as [ChartSeriesType.Bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ChartSeriesType.html#Syncfusion_Blazor_PivotView_ChartSeriesType_Bar). ```cshtml @using Syncfusion.Blazor.PivotView @@ -127,23 +125,22 @@ In the following code sample, the pivot chart type is set as [ChartSeriesType.Ba //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Bar Chart](images/blazor-pivot-bar-chart.png) ## Accumulation Charts -Supports 4 different types of accumulation charts as follows, +Pivot Chart supports four types of accumulation charts: -* Pie -* Doughnut -* Funnel -* Pyramid +- Pie +- Doughnut +- Funnel +- Pyramid -As like other chart types it can be changed using the property [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Type) in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) class. +You can use any of these chart types to visualize your aggregated data clearly. To select a specific accumulation chart, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Type) property in the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) class. -In the following code sample, the **Pie** chart is rendered, and the other accumulation charts can be switched using the drop-down list. +In the code example below, the **Pie** chart is displayed by default. You can switch to other accumulation chart types, such as Doughnut, Funnel, or Pyramid, using the dropdown list. ```cshtml @using Syncfusion.Blazor.PivotView @@ -223,20 +220,19 @@ In the following code sample, the **Pie** chart is rendered, and the other accum public ChartSeriesType Value { get; set; } } } - ``` ![Blazor Accumulation Chart](images/blazor-accumulation-chart.png) -### Drill Down/Up +### Drill down and up -In the accumulation charts, drill down and drill up operations can be performed using the built-in context menu option. It will be shown while clicking on the chart series. The context menu has the following options: +In accumulation charts, you can use the drill down and drill up options to explore data at different levels. When you click on a chart series, a built-in context menu appears with the following options: -**Expand** - It is to drill down the corresponding series until the last level. -**Collapse** - It is to drill up the corresponding series until the first level. -**Exit** - It is to close the context menu. +- **Expand**: Drill down to view more detailed data for the selected series, continuing until the lowest level is reached. +- **Collapse**: Drill up to view higher-level, summarized information for that series, returning to the top level as needed. +- **Exit**: Close the context menu without making any changes. -N> The drill operation in accumulation charts can be performed only for row headers. +N> You can use the drill operation for row headers only in accumulation charts. ```cshtml @using Syncfusion.Blazor.PivotView @@ -266,9 +262,7 @@ N> The drill operation in accumulation charts can be performed only for row head @code{ - public ChartSeriesType ChartType = ChartSeriesType.Pie; - public List data { get; set; } protected override void OnInitialized() { @@ -276,16 +270,15 @@ N> The drill operation in accumulation charts can be performed only for row head //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pie Chart with Drill Down and Up](images/blazor-pie-chart-drill-down-up.png) ### Column Headers and Delimiters -Unlike other chart types, the accumulation charts consider the values of a single column from the pivot table to be drawn. Preferably the first column of the pivot table is considered by default. But it can be changed by defining the column headers using the `ColumnHeader` property in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. +In accumulation charts, only the values from a single column in the pivot chart are displayed. By default, the first column is used. If you want to show values from a different column, you can specify the column headers with the [ColumnHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ColumnHeader) property in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -If the column has more than one header, then mention all the headers separated by the delimiter **-**, for example,**Germany-Road Bikes**. Using the property `ColumnDelimiter` in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class, one can set the desired delimiter to separate the column headers. +If the column has more than one header, enter all the headers separated by a delimiter, such as **Germany-Road Bikes**. You can set your preferred delimiter using the [ColumnDelimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ColumnDelimiter) property in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. This allows you to display the correct values in your accumulation chart according to how your columns are grouped in the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -317,16 +310,13 @@ If the column has more than one header, then mention all the headers separated b @code{ - public ChartSeriesType ChartType = ChartSeriesType.Doughnut; - public List data { get; set; } protected override void OnInitialized() { this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } - } ``` @@ -334,14 +324,16 @@ If the column has more than one header, then mention all the headers separated b ### Data Label Customization -The data labels are visible by default showing header name. Its visibility can be modified using the `Visible` boolean property in `DataLabel` Tag. With regard to the label arrangement, the **Smart Labels** options helps to arrange labels efficiently without overlapping. It can be disabled by setting the `EnableSmartLabels` property in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class as **false**. +By default, the data labels in accumulation charts display the header name. You can control their visibility using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartDataLabel_Visible) property in the [PivotChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html) settings. -The `position` property in `dataLabel` allows to specify the position of the data label. The available options are, +To improve label arrangement and prevent overlapping, the **Smart Labels** option arranges labels efficiently. You can disable this option by setting the [EnableSmartLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableSmartLabels) property to **false** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -* `Outside`: Positions the label outside the point. It is the default option. -* `Inside`: Positions the label inside the point. +The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartDataLabel_Position) property in [PivotChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html) allows you to specify where the data label appears. The available options are: -In the following code sample, the data labels are placed inside. +* `Outside`: Places the label outside the chart point. This is the default option. +* `Inside`: Places the label inside the chart point. + +In the following code sample, the data labels are placed inside the chart points. ```cshtml @using Syncfusion.Blazor.PivotView @@ -372,7 +364,6 @@ In the following code sample, the data labels are placed inside. @code{ - public ChartSeriesType ChartType = ChartSeriesType.Pyramid; public PivotChartLabelPosition Position = PivotChartLabelPosition.Inside; public List data { get; set; } @@ -382,12 +373,11 @@ In the following code sample, the data labels are placed inside. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pyramid Chart with Label](images/blazor-pyramid-chart-label.png) -The **Connector Line** will be visible when the data label is placed outside the chart. It can be customized using the `ConnectorStyle` property in `PivotChartDataLabel` class for its color, length, width etc. In the following code sample, the connector line is customized. +The **Connector Line** appears when data labels are positioned outside the chart. You can style this connector line using the [ConnectorStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartDataLabel_ConnectorStyle) property in [PivotChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html) class to modify its color, length, width, and other properties. In the example below, the connector line appearance is changed to show a different style. ```cshtml @using Syncfusion.Blazor.PivotView @@ -421,7 +411,6 @@ The **Connector Line** will be visible when the data label is placed outside the @code{ - public ChartSeriesType ChartType = ChartSeriesType.Funnel; public PivotChartLabelPosition Position = PivotChartLabelPosition.Outside; public List data { get; set; } @@ -431,14 +420,13 @@ The **Connector Line** will be visible when the data label is placed outside the //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Funnel Chart with Connector](images/blazor-funnel-chart-connector.png) -## Data Label Template +### Data Label Template -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartMarkerDataLabel_Template) property in the [PivotChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html) allows you to customize the appearance of data labels in the pivot chart series by using your own HTML elements for displaying the desired UI. The parameter named [AccumulationChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartDataPointInfo.html) is always passed in as a context within the template, allowing it to access the data points such as x and y and display the associated data point within a customized UI, as shown in the code example below. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartMarkerDataLabel_Template) property in the [PivotChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartDataLabel.html) class lets users change the look of data labels in the pivot chart series using custom HTML elements. The [AccumulationChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartDataPointInfo.html) parameter is passed as context to the template, enabling access to data points like x and y for displaying them in a custom design, as shown below. ```cshtml @using Syncfusion.Blazor.PivotView @@ -492,14 +480,13 @@ The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with data label customization using template for accumulation chart series](images/blazor-pieChart-dataLabel-customized-by-template.png) ### Pie and Doughnut Customization -User can draw pie and doughnut charts within the specified range using the `StartAngle` and `EndAngle` properties in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. The default value of the `StartAngle` property is **0**, and the `EndAngle` property is **360**. By customizing these properties, user can draw semi pie and semi doughnut charts. +You can draw pie and doughnut charts within a specific range by using the [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_EndAngle) properties in the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. The default value for the [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_StartAngle) property is **0**, and the [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_EndAngle) property is **360**. By modifying these properties, you can create semi-pie and semi-doughnut charts. ```cshtml @using Syncfusion.Blazor.PivotView @@ -528,7 +515,6 @@ User can draw pie and doughnut charts within the specified range using the `Star @code{ - public ChartSeriesType ChartType = ChartSeriesType.Doughnut; public List data { get; set; } protected override void OnInitialized() @@ -537,14 +523,13 @@ User can draw pie and doughnut charts within the specified range using the `Star //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Doughnut Chart with Custom Angle](images/blazor-dougnut-chart-custom-angle.png) -Users can get doughnut chart from pie chart and vice-versa using the `InnerRadius` property in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. If the property is greater than **0** percent, the doughnut chart will appear from the pie chart. +You can convert a pie chart to a doughnut chart and vice-versa using the [InnerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_InnerRadius) property in the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. When this property is set to a value greater than **0** percent, the chart appears as a doughnut instead of a pie chart. -N> It takes the value only in percentage. +N> This property accepts values only in percentage format. ```cshtml @using Syncfusion.Blazor.PivotView @@ -574,7 +559,6 @@ N> It takes the value only in percentage. @code{ - public ChartSeriesType ChartType = ChartSeriesType.Pie; public List data { get; set; } protected override void OnInitialized() @@ -583,16 +567,13 @@ N> It takes the value only in percentage. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pie Chart with Custom Radius](images/blazor-pie-chart-custom-radius.png) #### Radius customization -You can easily customize the radius of the pie chart series using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Radius) property of the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html). The pie chart series has a radius of 80% of its total size by default. - -The radius of the pie chart series is set to **70%** in the following code sample. +Users can adjust the radius of a pie chart series using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Radius) property in the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. By default, the pie chart series has a radius of 80% of its total size. For example, the following code sets the radius to 70%. ```cshtml @using Syncfusion.Blazor.PivotView @@ -616,12 +597,11 @@ The radius of the pie chart series is set to **70%** in the following code sampl - + @code{ - public List data { get; set; } protected override void OnInitialized() { @@ -629,14 +609,13 @@ The radius of the pie chart series is set to **70%** in the following code sampl //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with radius customization](images/blazor-pivotChart-with-customize-radius.png) -You can also change the radius of each slice (i.e., data point) within the chart series. This can be accomplished by using the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ChartSeriesCreated) event, which is triggered whenever a series is rendered in the chart area. Within this event, you can set the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartData.html#Syncfusion_Blazor_PivotView_PivotChartData_Radius) property for each data object from the datasource, allowing the display of pie chart slices with different radii to meet your requirements. +You can adjust the radius of each slice (i.e., data point) in the chart series using the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ChartSeriesCreated) event, which triggers when a series is rendered in the chart area. In this event, you can set the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartData.html#Syncfusion_Blazor_PivotView_PivotChartData_Radius) property for each data object in the data source, enabling the display of pie chart slices with varying radii to suit your needs. -In the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ChartSeriesCreated) event, the radius for each slice in the pie chart series is set to different values: **80%**, **85%**, and **90%** in the following code sample. To effectively use these radius values, it's essential to configure the `args.Series[0].Radius` property as **Radius**. +In the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_ChartSeriesCreated) event, the radius of each slice in the pie chart series is set to different values: **80%**, **85%**, and **90%**, as shown in the following code sample. To apply these radius values effectively, you must set the `args.Series[0].Radius` property to **Radius**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -666,7 +645,6 @@ In the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla @code{ - public List data { get; set; } protected override void OnInitialized() { @@ -683,14 +661,13 @@ In the [ChartSeriesCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla args.Series[0].Radius = "Radius"; } } - ``` ![Blazor Pivot Chart series with different radius customization for each slice](images/blazor-pivotChart-slice-with-different-radius.png) ### Exploding Series Points -Exploding can be enabled by setting the `Explode` property in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class to **true**. The series points will be exploded either on mouse click or touch. +You can make an individual point in a pivot chart stand out by enabling the exploding option. To do this, set the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Explode) property in the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class to **true**. When this option is turned on, a chart point will separate from the rest of the series when a user clicks it with a mouse or taps it on a touch device. This makes it easier for users to highlight and identify specific data points in accumulation charts like Pie, Doughnut, Funnel, or Pyramid. ```cshtml @using Syncfusion.Blazor.PivotView @@ -720,7 +697,6 @@ Exploding can be enabled by setting the `Explode` property in [PivotChartSeries] @code{ - public ChartSeriesType ChartType = ChartSeriesType.Pie; public List data { get; set; } protected override void OnInitialized() @@ -729,16 +705,13 @@ Exploding can be enabled by setting the `Explode` property in [PivotChartSeries] //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotChart with Explode Series Point](images/blazor-pivotchart-explode-series-point.png) ## Field List -User can enable the field list by setting the property [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class as **true**. - -By using this, user can customize the report dynamically and view the result in pivot chart. For more information regarding the field list, refer the [field list](./field-list) topic. +The field list makes it easy to add, remove, or rearrange fields in the pivot chart, so you can display exactly the data you need. To show the field list in the Pivot Chart, set the [ShowFieldList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowFieldList) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When you make changes with the field list, the pivot chart updates right away to show the new results. To learn more about the field list and how it works, see the [field list](./field-list) topic in the documentation. ```cshtml @using Syncfusion.Blazor.PivotView @@ -775,16 +748,15 @@ By using this, user can customize the report dynamically and view the result in //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with FieldList](images/blazor-pivotchart-field-list.png) ## Grouping Bar -User can enable the grouping bar by setting the property [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class as **true**. The grouping bar in pivot chart shows a dropdown list in value axis instead of buttons. The dropdown list holds list of value fields bounded in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) and it can be switched to draw the pivot chart with the selected value field. This has been defined as the default behavior in the pivot chart component. For more information regarding the grouping bar, refer the [grouping bar](./grouping-bar) topic. +You can display the grouping bar in the Pivot Chart by setting the [ShowGroupingBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowGroupingBar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. When enabled, the grouping bar in the pivot chart shows a drop-down list on the value axis. This drop-down lets users select from the value fields defined in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). Users can switch between these fields to update the chart based on the selected value field. This method of selection is the default behavior in the Pivot Chart component. For more details about how the grouping bar works, refer to the [grouping bar](./grouping-bar) documentation. -N> For multiple axis support, buttons will be placed in value axis instead of dropdown list. +N> When there are multiple axes, buttons appear on the value axis instead of the drop-down list. ```cshtml @using Syncfusion.Blazor.PivotView @@ -821,12 +793,11 @@ N> For multiple axis support, buttons will be placed in value axis instead of dr //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with GroupBar](images/blazor-pivotchart-groupbar.png) -For accumulation charts alone, a drop-down list will be placed in the column axis instead of the buttons. The drop-down list shows the column headers available in the pivot table. Users can dynamically switch column headers with the help of the drop-down list, and the accumulation chart will be updated accordingly. +When using accumulation charts, the drop-down list appears on the column axis. This list contains the column headers available in the Pivot Chart. Users can switch column headers using this drop-down, and the accumulation chart will update with the selected header. ```cshtml @using Syncfusion.Blazor.PivotView @@ -856,7 +827,6 @@ For accumulation charts alone, a drop-down list will be placed in the column axi @code{ - public ChartSeriesType ChartType = ChartSeriesType.Pie; public List data { get; set; } protected override void OnInitialized() @@ -865,14 +835,13 @@ For accumulation charts alone, a drop-down list will be placed in the column axi //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Grouping in Blazor Pivot Chart](images/blazor-pivotchart-group.png) ## Single Axis -By default, the pivot chart will be drawn with the value field (measure) which is set first in the report under value axis. But, user can change to specific value field using the property [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_Value) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. +By default, the pivot chart uses the first value field (measure) from your report as the value axis. If you want to display data using a different value field, you can do this easily. Use the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_Value) property inside [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. This option lets you show a specific value field in the pivot chart, allowing you to focus on the data you need. ```cshtml @using Syncfusion.Blazor.PivotView @@ -915,32 +884,32 @@ By default, the pivot chart will be drawn with the value field (measure) which i ## Multiple Axis -User can draw the pivot chart with multiple value fields by setting the property [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class as **true**. In the following code sample, the pivot chart will be drawn with both value fields **Sold** and **Amount** available in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +The pivot chart can be drawn with multiple value fields by setting the [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) property to **true** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. In the following code sample, the pivot chart displays both value fields **Sold** and **Amount** from the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). -> The multiple axis support is not applicable for the accumulation chart types like pie, doughnut, pyramid, and funnel. +N> Multiple axis support is not applicable for accumulation chart types like pie, doughnut, pyramid, and funnel. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + @code{ @@ -955,30 +924,30 @@ User can draw the pivot chart with multiple value fields by setting the property ![Blazor Pivot Chart with Multiple Axis](images/blazor-pivotchart-multi-axis.png) -If the user binds more value fields, the result will be multiple pivot charts, and each chart will shrink within the parent container height. To avoid this, set the [EnableScrollOnMultiAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableScrollOnMultiAxis) property in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) to **true**. By doing so, each pivot chart will only shrink to a minimal "160px" – "180px" height showing a vertical scrollbar for a clear view. +When binding more value fields, the result displays multiple pivot charts, with each chart shrinking within the parent container height. To prevent this behavior, set the [EnableScrollOnMultiAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableScrollOnMultiAxis) property to **true** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. This ensures each pivot chart maintains a minimum height of "160px" to "180px" and displays a vertical scroll bar for better visibility. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + @code{ @@ -993,9 +962,9 @@ If the user binds more value fields, the result will be multiple pivot charts, a ![Blazor Pivot Chart with ScrollBar](images/blazor-pivotchart-scrollbar.png) -Meanwhile, there is another way to display multiple values in a chart. In this approach, the series drawn from multiple values are grouped and displayed in a single chart. And, based on the values, multiple Y axis scales will be framed with different ranges. This can be achieved by setting the properties [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) as **true** and [MultipleAxisMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_MultipleAxisMode) as **Single** in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html). +Alternatively, you can display multiple values in a single chart. In this approach, the series from multiple values are grouped and displayed together. Based on the values, multiple Y-axis scales are created with different ranges. This can be achieved by setting [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) to **true** and [MultipleAxisMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_MultipleAxisMode) to **Single** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -In the following code sample, the pivot chart can be seen as a single chart with multiple value fields such as **Sold** and **Amount** that are drawn as multiple Y axis. +In the following code sample, the pivot chart appears as a single chart with multiple value fields such as **Sold** and **Amount**, each represented with its own Y-axis. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1033,11 +1002,11 @@ In the following code sample, the pivot chart can be seen as a single chart with ![Multiple Axis Mode in Blazor Pivot Chart](images/blazor-pivotchart-multiple-axis-mode.png) -Additionally, to display chart series for multiple values within a single y-axis, set the properties [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) to **true** and the [MultipleAxisMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MultipleAxisMode.html) to **Combined**, in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html). +To display multiple value fields on a single y-axis in the pivot chart, set the [EnableMultipleAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_EnableMultipleAxis) property to **true** and the [MultipleAxisMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.MultipleAxisMode.html) property to **Combined** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -> The y-axis range values will be formatted using the first value field on the value axis. For example, if the first value field is in currency format and the remaining value fields are in different number formats or no format, the y-axis range values will be displayed in the currency format of the first value field. +> The y-axis range values are formatted based on the first value field in the value axis. For example, if the first value field uses currency format and other value fields use different number formats or no format, the y-axis range values will appear in the currency format of the first value field. -The pivot chart in the following code sample can be seen as a single chart with multiple value fields such as **Sold** and **Amount** drawn as a single y-axis. +The following code sample shows a pivot chart with multiple value fields, such as **Sold** and **Amount**, displayed on a single y-axis. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1075,12 +1044,11 @@ The pivot chart in the following code sample can be seen as a single chart with ![Multiple axis mode set to combined in Blazor Pivot Chart](images/blazor-pivotchart-multiple-axis-Combined-mode.png) - ### Show point color based on members -When multiple axes are enabled, you can display the same color for each member in the column axis by setting the [ShowPointColorByMembers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ShowPointColorByMembers) property to **true** in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html). As a result, the end user can easily identify each member across different measures in the entire chart. +When you enable multiple axes in the pivot chart, you can use the [ShowPointColorByMembers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ShowPointColorByMembers) property in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class to display the same color for each member on the column axis across all measures. Setting this property to **true** makes it easy for users to spot and compare each member throughout the entire chart. -Furthermore, end user can see or hide specific members across different measures in the entire chart with a single click on the legend item. +In addition, users can show or hide specific members from all measures in the chart by clicking the corresponding legend item. This interaction allows users to focus on the members they want to analyze without distraction. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1124,35 +1092,33 @@ Furthermore, end user can see or hide specific members across different measures ## Series Customization -User can customize series of the pivot chart using [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. The changes handled in the property will be reflected commonly in all chart series. +You can customize the series in the pivot chart by using the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) property inside [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. Any changes you make to the [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html#Syncfusion_Blazor_PivotView_PivotChartSettings_ChartSeries) property will apply to all series in the chart. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - - - - - - - - - @* Other major options are: *@ - @* *@ - @* *@ - - + +   +         +             +             +         +         +             +             +         +         + +             +         +         +             +         +     + + + + @code{ @@ -1163,70 +1129,67 @@ User can customize series of the pivot chart using [PivotChartSeries](https://he //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with Custom Series](images/blazor-pivotchart-custom-series.png) ## Data Label Customization -You can customize data label of the pivot chart markers in terms of angle, alignment, border, color, margin, position, visibility, and more using [PivotChartMarkerDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerSettings.html#Syncfusion_Blazor_PivotView_PivotChartMarkerSettings_DataLabel) in [PivotChartMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Marker) class. The changes handled in the property will be reflected commonly in all chart series. +Users can adjust data labels in the pivot chart using the [PivotChartMarkerDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerSettings.html#Syncfusion_Blazor_PivotView_PivotChartMarkerSettings_DataLabel) class in [PivotChartMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_Marker). Options include changing the angle, alignment, border, color, margin, position, and visibility. These settings apply to all chart series, as shown in the example below. ```cshtml - @using Syncfusion.Blazor.PivotView +@using Syncfusion.Blazor.PivotView - - - -      - - - - - - - - - - - - - - -      - - - - - - - - - - - - - - - - + + + +      + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - @code{ - public List data { get; set; } - protected override void OnInitialized() - { - this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } +@code{ + public List data { get; set; } + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } - +} ``` -![Blazor Pivot Chart with Custom Data Label](images/blazor-pivotchart-custom-data-label.png) +![Blazor Pivot Chart with custom data label](images/blazor-pivotchart-custom-data-label.png) ## Data Label Template -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartMarkerDataLabel_Template) property in the [PivotChartMarkerDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html) allows you to customize the appearance of data labels in the pivot chart series by using your own HTML elements for displaying the desired UI. The parameter named [ChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataPointInfo.html) is always passed in as a context within the template, allowing it to access the data points such as x and y and display the associated data point within a customized UI, as shown in the code example below. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html#Syncfusion_Blazor_PivotView_PivotChartMarkerDataLabel_Template) property in the [PivotChartMarkerDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerDataLabel.html) class allows users to change the appearance of data labels in the pivot chart series using custom HTML elements. The [ChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataPointInfo.html) parameter provides access to data points like x and y, enabling a custom display, as shown below. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1283,16 +1246,17 @@ The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with data label customization using template](images/blazor-pivotChart-dataLabel-customized-by-template.png) ## Axis Customization -User can customize axis of the pivot chart using [PivotChartPrimaryXAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryXAxis.html) and [PivotChartPrimaryYAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryYAxis.html) properties in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. +Users can customize the x-axis and y-axis of the pivot chart using the [PivotChartPrimaryXAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryXAxis.html) and [PivotChartPrimaryYAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryYAxis.html) options in the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -N> Axis customization is not applicable for the accumulation chart types like pie, doughnut, pyramid, and funnel. +N> Please note that axis customization is not supported for accumulation chart types, such as pie, doughnut, pyramid, and funnel. + +For example, in the sample below, the titles for the y-axis and x-axis are set to custom values. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1329,40 +1293,39 @@ N> Axis customization is not applicable for the accumulation chart types like pi //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with Custom Axis](images/blazor-pivotchart-custom-axis.png) ## Legend Customization -User can customize legend using [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. By default, legend will be visible and it can be hidden by setting the property [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html#Syncfusion_Blazor_PivotView_PivotChartLegendSettings_Visible) in [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html) class as **false**. +Users can easily change the legend in the pivot chart by using the [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html) option inside the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. By default, the legend is shown. If you want to hide it, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html#Syncfusion_Blazor_PivotView_PivotChartLegendSettings_Visible) property in [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html) to **false**. -The pivot chart support different types of legend shapes as follows, +The pivot chart allows users to select from various legend shapes, including: -* Circle -* Rectangle -* VerticalLine -* Pentagon -* InvertedTriangle -* SeriesType -* Triangle -* Diamond -* Cross -* HorizontalLine +- Circle +- Rectangle +- VerticalLine +- Pentagon +- InvertedTriangle +- SeriesType (default) +- Triangle +- Diamond +- Cross +- HorizontalLine -Here [PivotChartLegendShape.SeriesType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendShape.html) would act as the default shape and it can be changed using the property [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_LegendShape) in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html) class. +The default shape for the legend is **SeriesType**, but you can change it by setting the [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html#Syncfusion_Blazor_PivotView_PivotChartSeries_LegendShape) property in [PivotChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSeries.html). -Also user can set the position of the legend in pivot chart using the property [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html#Syncfusion_Blazor_PivotView_PivotChartLegendSettings_Position) in [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html) class. The available options to set the legend position are as follows, +Users can also choose where the legend appears in the pivot chart by setting the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html#Syncfusion_Blazor_PivotView_PivotChartLegendSettings_Position) property in [PivotChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartLegendSettings.html). The available positions include: -* Auto: Places the legend based on area type. This is the default. -* Top: Displays the legend at the top of the pivot chart. -* Left: Displays the legend at the left of the pivot chart. -* Bottom: Displays the legend at the bottom of the pivot chart. -* Right: Displays the legend at the right of the pivot chart. -* Custom: Displays the legend based on the given x and y values. +- **Auto**: Places the legend based on the chart area (default). +- **Top**: Shows the legend above the pivot chart. +- **Left**: Displays the legend to the left of the chart. +- **Bottom**: Places the legend below the chart. +- **Right**: Shows the legend on the right side. +- **Custom**: Positions the legend using specific x and y values you provide. -N> By default, the legend is not visible for the accumulation chart types like pie, doughnut, pyramid, and funnel. +N> Legends are not shown by default for accumulation charts such as pie, doughnut, pyramid, and funnel. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1397,7 +1360,6 @@ N> By default, the legend is not visible for the accumulation chart types like p //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with Pentagon Legend](images/blazor-pivotchart-pentagon-legend.png) @@ -1406,11 +1368,11 @@ N> By default, the legend is not visible for the accumulation chart types like p ### Marker and CrossHair -User can enable and customize the marker and crosshair using [PivotChartMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerSettings.html) and [PivotChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartCrosshairSettings.html) properties in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class respectively. +You can show and customize markers and crosshair's on the pivot chart. To do this, use the [PivotChartMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartMarkerSettings.html) and [PivotChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartCrosshairSettings.html) options within the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -Also user can enable and customize the crosshair tooltip for axes using [PivotChartPrimaryXAxisCrosshairTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryXAxisCrosshairTooltip.html) and [PivotChartPrimaryYAxisCrosshairTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryYAxisCrosshairTooltip.html) classes. +If you want to display a tooltip when hovering over an axis crosshair, use the [PivotChartPrimaryXAxisCrosshairTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryXAxisCrosshairTooltip.html) and [PivotChartPrimaryYAxisCrosshairTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartPrimaryYAxisCrosshairTooltip.html) options. -N> Marker and crosshair is not applicable for the accumulation chart types like pie, doughnut, pyramid, and funnel. +N> Please note, marker and crosshair options do not work with accumulation chart types, such as pie, doughnut, pyramid, or funnel. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1430,17 +1392,8 @@ N> Marker and crosshair is not applicable for the accumulation chart types like               - - - - - - - - - - - + + @@ -1452,31 +1405,28 @@ N> Marker and crosshair is not applicable for the accumulation chart types like //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor Pivot Chart with Marker and Crosshair](images/blazor-pivotchart-marker-crosshair.png) ### Zooming and Panning -User can customize zooming and panning option using the property [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. - -The pivot chart support four types of zooming which can be set as follows, +Users can customize the zooming and panning options in the pivot chart by using the [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html) property within [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. The pivot chart supports four zooming options: -* [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnablePinchZooming) -* [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableSelectionZooming) -* [EnableDeferredZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableDeferredZooming) -* [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableMouseWheelZooming) +- [EnablePinchZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnablePinchZooming) – Zooms by pinching on touch devices. +- [EnableSelectionZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableSelectionZooming) – Zooms into a selected region on the chart. +- [EnableDeferredZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableDeferredZooming) – Applies zooming only after the selection is complete, which helps improve performance for large data. +- [EnableMouseWheelZooming](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_EnableMouseWheelZooming) – Zooms using the mouse wheel. -Three modes of zooming direction specifies whether to zoom vertically or horizontally or in both ways and they are, +The direction of zooming can be controlled using the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_Mode) property in [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html). The available options are: -* x: Pivot chart can be zoomed horizontally. -* y: Pivot chart can be zoomed vertically. -* x,y: Pivot chart can be zoomed both vertically and horizontally. +- `x`: zooms horizontally, +- `y`: zooms vertically, +- `x,y`: zooms both horizontally and vertically. -This can be set using the property [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_Mode) in [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html) class. By default, if the pivot chart is zoomed, a toolbar would display with the options - Zoom, ZoomIn, ZoomOut, Pan, and Reset. User can also customize its option using the property [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_ToolbarItems) in [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_ToolbarItems) class. +When the pivot chart is zoomed, a toolbar appears at the top of the chart with tools for Zoom, Zoom In, Zoom Out, Pan, and Reset actions. This toolbar can be customized using the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html#Syncfusion_Blazor_PivotView_PivotChartZoomSettings_ToolbarItems) property in [PivotChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartZoomSettings.html). -N> Zooming and panning is not applicable for the accumulation chart types like pie, doughnut, pyramid, and funnel. +N> Zooming and panning are not available for accumulation chart types, such as pie, doughnut, pyramid, and funnel. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1525,9 +1475,9 @@ N> Zooming and panning is not applicable for the accumulation chart types like p ### Tooltip -By default, tooltip for the pivot chart is enabled. User can customize it by using the property [PivotChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html) in [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. +The tooltip in the Pivot Chart is enabled by default, showing detailed information about each data point when users move the pointer over the chart. Users can change how the tooltip looks and functions by using the [PivotChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html) option inside the [PivotChartSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartSettings.html) class. -N> The tooltip can be disabled by setting the property [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html#Syncfusion_Blazor_PivotView_PivotChartTooltipSettings_Enable) in [PivotChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html) class as **false**. +If users do not want to show the tooltip, they can disable it by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html#Syncfusion_Blazor_PivotView_PivotChartTooltipSettings_Enable) property in [PivotChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotChartTooltipSettings.html) to **false**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1570,16 +1520,20 @@ N> The tooltip can be disabled by setting the property [Enable](https://help.syn ## Export -The pivot chart can be exported using the [ExportToChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToChartAsync_Syncfusion_Blazor_Charts_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Nullable_System_Boolean__) method which holds parameters like export type, file name, PDF orientation, and base64 string in the same order. The mandatory parameters for this method are export type and file name whereas other parameters are optional. +You can export the pivot chart to various file formats by using the [ExportToChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToChartAsync_Syncfusion_Blazor_Charts_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Nullable_System_Boolean__) method. This method requires the `type` parameter, which specifies the file format. The supported export formats are: + +- PNG +- JPEG +- SVG +- PDF -The following are the four export types: +Other parameters for the [ExportToChartAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ExportToChartAsync_Syncfusion_Blazor_Charts_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Nullable_System_Boolean__) method include: -* PNG -* JPEG -* SVG -* PDF +- `fileName`: Specifies the file name for the exported file. The default export file name is "PivotChart". +- `orientation`: Specifies the portrait or landscape orientation of the page. +- `asBase64`: Specify whether to obtain the chart image as a base64 string or not. -In the following code sample, exporting can be done using an external button named as "Chart Export". +The example below shows how to export the pivot chart using an external button labeled "Chart Export": ```cshtml @using Syncfusion.Blazor.PivotView @@ -1625,16 +1579,15 @@ In the following code sample, exporting can be done using an external button nam //this.pivot.ExportToChartAsync(Syncfusion.Blazor.Charts.ExportType.JPEG, "sample"); } } - ``` ![Blazor Pivot Chart with PDF Export](images/blazor-pivotchart-pdf-export.png) ## Print -The rendered pivot chart can be printed directly from the browser by calling [PrintChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_PrintChart) method. +You can print the current view of the pivot chart directly from the browser by using the [PrintChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_PrintChart) method. This allows you to create a physical or digital copy of your pivot chart as displayed on the screen. -In the following code sample, printing can be done using an external button named as "Print Chart". +In the example below, clicking an external button labeled "Print Chart" calls the [PrintChart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_PrintChart) method and prints the rendered pivot chart. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1678,7 +1631,6 @@ In the following code sample, printing can be done using an external button name this.pivot.PrintChart(); } } - ``` ![Printing in Blazor Pivot Chart](images/blazor-pivotchart-printing.png) diff --git a/blazor/pivot-table/row-and-column.md b/blazor/pivot-table/row-and-column.md index da821e307f..67d904fe0a 100644 --- a/blazor/pivot-table/row-and-column.md +++ b/blazor/pivot-table/row-and-column.md @@ -18,34 +18,38 @@ To learn about how to use the row and column options effectively in the Blazor P ## Width and Height -Allows end user to set the pivot table's height and width by using [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_Width) properties in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class respectively. The supported formats to set [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_Width) properties are, +Setting appropriate dimensions for the Pivot Table ensures optimal display and better user experience across different screen sizes and layouts. You can define the Pivot Table's dimensions using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Width) properties in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to meet your specific requirements. -* Pixel: For example - 100, 200, "100px", "200px". -* Percentage: For example - "100%", "200%". -* Auto: For example - "auto". This is the default value. It takes 100% of parent container's size to fit the pivot table component inside it. +These dimension properties support multiple formats to accommodate various layout scenarios and provide flexibility in how you define the component's size: -N> The pivot table will not be displayed less than **400px**, since it's the minimum width of the component. +**Supported formats:** + +* **Pixel**: Specify exact dimensions using numeric values or pixel units. For example: `100`, `200`, `"100px"`, or `"200px"`. +* **Percentage**: Set dimensions relative to the parent container. For example: `"100%"` or `"200%"`. +* **Auto**: This option is available only for the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Height) property. When set to **auto**, the Pivot Table expands beyond its parent container height without showing a vertical scrollbar within the component. Instead, the parent container displays its vertical scrollbar once the component exceeds its boundaries. + +N> The Pivot Table maintains a minimum width of **400px** to ensure proper display and functionality, even if a smaller width is specified. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @code{ @@ -56,17 +60,15 @@ N> The pivot table will not be displayed less than **400px**, since it's the min //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Setting Height and Width in Blazor PivotTable](images/blazor-pivottable-set-height-width.png) ## Row Height -Allows end user to set the height of each pivot table rows commonly using the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. +Adjusting the row height in the Pivot Table helps make your data easier to view and interact with, especially when there are many rows or large amounts of content. To make these adjustments, you can use the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property within the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. This property allows you to control how much space each row occupies, so the Pivot Table remains clear and readable according to your needs. -N> By default, the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property is set as **30** pixels for desktop layout and **36** pixels for mobile layout. -
The height of the column headers alone may vary when grouping bar feature is enabled. +N> By default, the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) is set to **36** pixels for desktop layouts and **48** pixels for mobile layouts. However, if you enable the grouping bar option, note that only the column header height may change, while the rest of the rows maintain the specified height. In the following code sample, the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property is set as **60** pixels. @@ -75,21 +77,21 @@ In the following code sample, the [RowHeight](https://help.syncfusion.com/cr/bla -     -             -             -         -         -             -             -         -         -             -         + + + + + + + + + + + -     + @@ -101,16 +103,15 @@ In the following code sample, the [RowHeight](https://help.syncfusion.com/cr/bla //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Changing Row Height in Blazor PivotTable](images/blazor-pivottable-change-row-height.png) ## Column Width -Allows end user to set the width of each pivot table columns commonly using the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. +Controlling the width of columns allows users to view their data in the Pivot Table more clearly, making each column easy to read and ensuring that information is not cut off. To achieve this, you can use the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) property, which is available under the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. -N> By default, the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) property is set as **110** pixels to each columns except the first column. For first column, **250** pixels and **200** pixels are set respectively with and without grouping bar. +N> By default, the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) is set to **110** pixels for all columns except the first one. The first column is assigned a width of **250** pixels if the grouping bar is enabled, or **200** pixels when it is not. This ensures that the data in the row header is always easily visible. In the following example, the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) property is set as **200** pixels. @@ -119,21 +120,21 @@ In the following example, the [ColumnWidth](https://help.syncfusion.com/cr/blazo -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @@ -145,14 +146,13 @@ In the following example, the [ColumnWidth](https://help.syncfusion.com/cr/blazo //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Changing Column Width in Blazor PivotTable](images/blazor-pivottable-change-column-width.png) ### Adjust width based on columns -By default, if the component width set in code-behind is more than the width of the total columns, then the columns will be stretched to make it fit. To avoid the stretching, set the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AutoFit) property in the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) to **false**. By doing so, the component will be adjusted based on the width of total columns. +By default, when the component width exceeds the total width of all columns, the columns are automatically stretched to fill the available space. To prevent this stretching behavior, set the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AutoFit) property in the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **false**. This ensures that the Pivot Table adjusts its overall width to match the combined width of all columns, maintaining their original proportions and improving data readability. ```cshtml @using Syncfusion.Blazor.PivotView @@ -184,36 +184,37 @@ By default, if the component width set in code-behind is more than the width of //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![AutoFit Column in Blazor PivotTable](images/blazor-pivottable-autofit-column.png) ## Reorder -Allows end user to reorder a particular column header from one index to another index within the pivot table through drag-and-drop option. It can be enabled by setting the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowReordering) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. +The reorder option provides users with the flexibility to reorganize column headers within the Pivot Table by dragging and dropping them to different positions. This allows users to customize the layout of their data for better analysis and presentation. + +To enable this option, set the [AllowReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowReordering) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. Once enabled, users can simply click and drag any column header to move it to their desired position within the table. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     - + + @code{ @@ -224,36 +225,36 @@ Allows end user to reorder a particular column header from one index to another //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Reordering Specific Column in Blazor PivotTable](images/blazor-pivottable-reorder-specific-column.png) ## Column Resizing -Allows end user to resize the columns by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. To enable column resizing option, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowResizing) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. +Column resizing in the Pivot Table helps users adjust the column widths to better view and compare data. Users can easily resize columns by clicking and dragging the right edge of any column header. As the user drags, the column’s width is updated immediately, offering a responsive and comfortable viewing experience. + +This option is enabled by default. To control column resizing, set the [AllowResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowResizing) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true** or **false** as needed. -N> By default, the column resizing option is enabled. -
In RTL mode, user can click and drag the left edge of the header cell to resize the column. +N> In right-to-left (RTL) mode, users should click and drag the left edge of the header cell to resize the column. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         -     - + + + + + + + + + + + + + @code{ @@ -264,36 +265,35 @@ N> By default, the column resizing option is enabled. //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Column Resizing in Blazor PivotTable](images/blazor-pivottable-column-resizing.png) ## Text Wrap -Allows end user to wrap the cell content to the next line when it exceeds the boundary of the cell width. To enable text wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowTextWrap) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. +The Pivot Table allows users to wrap cell content to the next line when the content exceeds the boundary of the cell width. To enable text wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowTextWrap) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     - + + @code{ @@ -304,43 +304,42 @@ Allows end user to wrap the cell content to the next line when it exceeds the bo //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Text Wrapping in Blazor PivotTable](images/blazor-pivottable-text-wrap.png) ## Text Align -Allows end user to align the content of the pivot table's row headers, column headers and value cells by using both [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) and [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) properties in the [BeforeColumnsRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_BeforeColumnsRender) event. The following alignments are: +Text alignment provides flexibility in positioning content within cells, making the data presentation more organized and visually appealing. You can align the content of the Pivot Table's row headers, column headers, and value cells using the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) and [HeaderTextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderTextAlign) properties in the [BeforeColumnsRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_BeforeColumnsRender) event. The available alignment options are: -* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Left) - It allows the content to be positioned on the left. -* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Right) - It allows the content to be positioned on the right. -* [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Center) - It allows the content to be positioned in the middle. -* [Justify](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Justify) - It allows the content to be as flexible as possible, when the cell does not occupy the entire available area. +* [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Left) - Positions the content on the left side of the cell. +* [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Right) - Positions the content on the right side of the cell. +* [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Center) - Positions the content in the center of the cell. +* [Justify](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.TextAlign.html#Syncfusion_Blazor_Grids_TextAlign_Justify) - Distributes the content evenly across the cell width for optimal space utilization. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         + + + + + + + + + -             -         - + + + -     - + + @code{ @@ -369,48 +368,47 @@ Allows end user to align the content of the pivot table's row headers, column he } } } - ``` ![Align text inside the Blazor Pivot Table cell](images/text-align.png) ## Grid Lines -Allows end user to display cell border for each cells using [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_GridLines) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. +The grid lines option provides visual structure to the Pivot Table by displaying cell borders, making it easier for users to read and analyze data. You can control the display of grid lines using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_GridLines) property within the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. -Available mode of grid lines are: +The following grid line modes are available: -| Modes | Actions | -|-------|---------| -| Both | Displays both the horizontal and vertical grid lines.| -| None | No grid lines are displayed.| -| Horizontal | Displays the horizontal grid lines only.| -| Vertical | Displays the vertical grid lines only.| -| Default | Displays grid lines based on the theme.| +| Mode | Description | +|------|-------------| +| Both | Shows both horizontal and vertical grid lines around each cell | +| None | Hides all grid lines for a clean appearance | +| Horizontal | Shows only horizontal grid lines between rows | +| Vertical | Shows only vertical grid lines between columns | +| Default | Shows grid lines based on the applied theme settings | -N> By default, pivot table renders grid lines in [PivotGridLine.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_GridLines) mode. +N> The Pivot Table displays grid lines in [PivotGridLine.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableGridLine.html#Syncfusion_Blazor_PivotView_PivotTableGridLine_None) mode by default. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     - + + @code{ @@ -421,44 +419,44 @@ N> By default, pivot table renders grid lines in [PivotGridLine.Both](https://he //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Grid lines in Blazor Pivot Table](images/blazor-pivotgrid-gridlines.png) ## Selection -Selection provides an option to highlight a row or a column or a cell. It can be done through simple mouse down or arrow keys. To enable selection in the pivot table, set the [AllowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowSelection) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. +Selection in the Pivot Table allows users to easily highlight rows, columns, or individual cells for better data focus and visualization. This makes it simple to compare and analyze specific data points within your table. -The pivot table supports two types of selection that can be set using [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Type) property in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class. The selection types are: +To enable selection, set the [AllowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_AllowSelection) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class to **true**. This allows users to select table elements using a mouse click or arrow keys. -* [PivotSelectionType.Single](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html): It is set by default, and it only allows selection of a single row or a column or a cell. -* [PivotSelectionType.Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html): Allows you to select multiple rows or columns or cells. -To perform multi-selection, press and hold "CTRL" key and click the desired rows or cells. To select range of rows or cells, press and hold the "SHIFT" key and click the rows or columns or cells. +The Pivot Table provides two selection modes, controlled by the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Type) property in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class: + +* [PivotSelectionType.Single](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html#Syncfusion_Blazor_PivotView_PivotTableSelectionType_Single): Allows you to select only one row, column, or cell at a time. This is the default mode. +* [PivotSelectionType.Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html#Syncfusion_Blazor_PivotView_PivotTableSelectionType_Multiple): Lets you select several rows, columns, or cells. To select multiple items, hold down the "CTRL" key and click the rows or cells you wish to select. To select a range, hold the "SHIFT" key and click the first and last item in the range. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     - - - + + + + @code{ @@ -469,43 +467,44 @@ To perform multi-selection, press and hold "CTRL" key and click the desired rows //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Selection in Blazor PivotTable](images/blazor-pivottable-selection.png) ### Selection Mode -The pivot table supports four types of selection mode that can be set using [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Mode) in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class. The selection modes are: +You can choose how selection works by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Mode) property within the [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class. The Pivot Table offers four simple options for selection mode: -* [SelectionMode.Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html): It is set by default, and allows user to select only rows. -* [SelectionMode.Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html): Allows user to select only columns. -* [SelectionMode.Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html): Allows user to select only cells. -* [SelectionMode.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html): Allows user to select rows and columns at the same time. +* [SelectionMode.Row](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Row): This is the default mode. It lets the user select an entire row with a single click. +* [SelectionMode.Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Column): In this mode, only entire columns can be selected. +* [SelectionMode.Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Cell): This mode allows the user to select one or more individual cells. +* [SelectionMode.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Both): This option lets users select both rows and columns at the same time, providing more flexibility. + +By choosing the right selection mode, users can quickly highlight and review the data that matters most to them. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     - - - + + + + @code{ @@ -516,41 +515,44 @@ The pivot table supports four types of selection mode that can be set using [Mod //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Blazor PivotTable with Row and Column Selection](images/blazor-pivottable-row-column-selection.png) ### Cell Selection Mode -The pivot table supports two types of cell selection mode that can be set using [PivotCellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_CellSelectionMode) in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class. The cell selection modes are: +To set the cell selection mode, use the [PivotCellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_CellSelectionMode) option within the [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class. The available modes are: + +* [PivotCellSelectionMode.Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectionMode.html#Syncfusion_Blazor_PivotView_PivotCellSelectionMode_Flow): Selects a continuous range of cells from the starting cell to the ending cell, including all rows in between. +* [PivotCellSelectionMode.Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectionMode.html#Syncfusion_Blazor_PivotView_PivotCellSelectionMode_Box): Selects a rectangular block of cells that spans from the starting cell to the ending cell, covering all intermediate rows and columns within the range. -* [PivotCellSelectionMode.Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectionMode.html): It is set by default. The range of cells are selected between the start index and end index that includes in-between cells of rows. -* [PivotCellSelectionMode.Box](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectionMode.html): Range of cells are selected from the start and end column indexes that includes in-between cells of rows within the range. +* [PivotCellSelectionMode.BoxWithBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectionMode.html#Syncfusion_Blazor_PivotView_PivotCellSelectionMode_BoxWithBorder): This mode works like Box mode but also highlights the selected cells with borders for better visibility. + +N> Cell selection requires [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Mode) property in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class to be [SelectionMode.Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Cell) or [SelectionMode.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html#Syncfusion_Blazor_PivotView_SelectionMode_Both), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Type) property should be [PivotSelectionType.Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html#Syncfusion_Blazor_PivotView_PivotTableSelectionType_Multiple). ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         + + + + + + + + + + + -     - - - + + + + @code{ @@ -561,48 +563,45 @@ The pivot table supports two types of cell selection mode that can be set using //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` -N> Cell selection requires [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Mode) property in [PivotViewSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html) class to be [SelectionMode.Cell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html) or [SelectionMode.Both](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SelectionMode.html), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSelectionSettings.html#Syncfusion_Blazor_PivotView_PivotViewSelectionSettings_Type) property should be [PivotSelectionType.Multiple](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html). - ![Cell Selection in Blazor PivotTable](images/blazor-pivottable-cell-selection.png) ### Changing background color of the selected cell -The background-color of the selected cell can be changed using built-in CSS names. To do so, refer to the code sample below, which shows that the selected cells are changed to a **green yellow** color. +Highlighting selected cells in the Pivot Table with a different background color helps users quickly identify and focus on important data. To achieve this effect seamlessly, you can apply built-in CSS classes that customize the appearance of selected cells. + +In the example below, selected cells appear with a **green-yellow** background. Simply add the custom styles to your stylesheet, and they will be applied when you select a cell using the mouse or arrow keys. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         + + + + + + + + + -             -         -     - - - + + + + + + @code{ public List data { get; set; } @@ -612,63 +611,63 @@ background-color: greenYellow !important; //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` ![Changing Cell Selection Background Color in Blazor PivotTable](images/blazor-pivottable-cell-selection-color.png) ### Event -The event `CellSelected` is triggered when cell selection gets completed. It provides selected cells information with its corresponding column and row headers. This event includes a parameter named [SelectedCellsInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectedEventArgs.html#Syncfusion_Blazor_PivotView_PivotCellSelectedEventArgs_SelectedCellsInfo). This event allows user to view selected cells information and user can pass those selected cells information to any external component for data binding. +#### CellSelected -```cshtml +When a user finishes selecting cells, the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_CellSelected) event is triggered. This event provides details about the selected cells, including the related row and column headers. The event holds important parameters, including [SelectedCellsInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotCellSelectedEventArgs.html#Syncfusion_Blazor_PivotView_PivotCellSelectedEventArgs_SelectedCellsInfo). Users can use this information to easily identify the selected data and share it with other parts of their application, such as for data binding or additional processing. +```cshtml @using Syncfusion.Blazor.PivotView
-
- - - - - - - - - - - - - - - - - - - - -
-
-
Event Trace:

-
- @if (SelectedCells != null) - { - @if (SelectedCells.SelectedCellsInfo != null) - { - @foreach (var cell in SelectedCells.SelectedCellsInfo) - { -

- ColumnHeader: @cell.ColumnHeaders
- RowHeader: @cell.RowHeaders
- Value: @cell.Value
- Measure: @cell.Measure -

-
- } - } - } -
-
+
+ + + + + + + + + + + + + + + + + + + + +
+
+
Event Trace:

+
+ @if (SelectedCells != null) + { + @if (SelectedCells.SelectedCellsInfo != null) + { + @foreach (var cell in SelectedCells.SelectedCellsInfo) + { +

+ ColumnHeader: @cell.ColumnHeaders
+ RowHeader: @cell.RowHeaders
+ Value: @cell.Value
+ Measure: @cell.Measure +

+
+ } + } + } +
+
@code{ @@ -684,41 +683,40 @@ The event `CellSelected` is triggered when cell selection gets completed. It pro //args.SelectedCellsInfo -> get selected cells information } } - ``` ![Displaying Selection Event Details in Blazor PivotTable](images/blazor-pivottable-selection-event-details.png) ## Clip Mode -The clip mode provides options to display its overflow cell content in the pivot table. It can be configured using the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ClipMode) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. The pivot table supports three types of clip modes, +The clip mode option in the Pivot Table determines how cell content is displayed when it exceeds the cell’s boundaries. You can set this option using the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ClipMode) property within the [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) class. The Pivot Table provides the following clip mode options: -* [PivotClipMode.Clip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html): Truncates the cell content when it overflows its area. -* [PivotClipMode.Ellipsis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html): Displays ellipsis when the cell content overflows its area. -* [PivotClipMode.EllipsisWithTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html): Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hovering over the ellipsis. +* [PivotClipMode.Clip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableClipMode.html#Syncfusion_Blazor_PivotView_PivotTableClipMode_Clip): Cuts off any part of the cell content that does not fit within the cell. +* [PivotClipMode.Ellipsis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableClipMode.html#Syncfusion_Blazor_PivotView_PivotTableClipMode_Ellipsis): Shows an ellipsis (`...`) at the end of the cell if the content is too long to fit. +* [PivotClipMode.EllipsisWithTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableClipMode.html#Syncfusion_Blazor_PivotView_PivotTableClipMode_EllipsisWithTooltip): Shows an ellipsis (`...`) for overflowing content, and also displays the full content in a tooltip when the user hovers over the ellipsis. -N>By default, [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ClipMode) value is set to [PivotClipMode.Ellipsis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableSelectionType.html). +N> By default, the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ClipMode) property is set to [PivotClipMode.Ellipsis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotTableClipMode.html#Syncfusion_Blazor_PivotView_PivotTableClipMode_Ellipsis). This helps users quickly identify when there is more content hidden and easily view the complete information by hovering over the cell. ```cshtml @using Syncfusion.Blazor.PivotView -     -             -             -         -         -             -             -         -         -             -         - + + + + + + + + + + + + -     + @@ -734,20 +732,18 @@ N>By default, [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ![Blazor PivotTable with Clip Mode](images/blazor-pivottable-clip-mode.png) - ## Cell Template -You can customize the pivot table cell element by using the `CellTemplate` property in `PivotViewTemplates` class. The `CellTemplate` property accepts either an HTML string or the element's ID, which can be used to append additional HTML elements to showcase each cell with custom format. +You can change how each cell in the Pivot Table looks 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. With [CellTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html#Syncfusion_Blazor_PivotView_PivotViewTemplates_CellTemplate), you can use either an HTML string or the ID of an HTML element to add custom content to every cell. This helps you display cell values in any format you prefer, such as adding icons, colors, or other elements for better understanding. To know about **Cell Template** in Blazor Pivot Table Component, you can check this video. {% youtube "youtube:https://www.youtube.com/watch?v=C2w2KWKc0f8"%} -In this demo, the revenue cost for each year is represented with trend icons. - -N>The model type for datasource needs to be specified from which the context will be generated and accessed in the CellTemplate. Using the context, define the conditions based on the templates that will be appended to the cell element. +In this demo, each year’s revenue cost is displayed along with trend icons, giving users a clear and quick way to view changes in the data at a glance. +N> Specify the model type for the data source, as it determines the context that will be generated and accessed within the [CellTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewTemplates.html#Syncfusion_Blazor_PivotView_PivotViewTemplates_CellTemplate). Using this context, define the conditions based on the templates that will be appended to the cell element ```cshtml @using Syncfusion.Blazor.PivotView @@ -769,7 +765,6 @@ N>The model type for datasource needs to be specified from which the context wil { } - } @@ -793,15 +788,12 @@ N>The model type for datasource needs to be specified from which the context wil @code{ - public List dataSource { get; set; } - protected override void OnInitialized() { this.dataSource = TemplateData.GetTemplateData(); } } - ``` ![Blazor PivotTable with Cell Template](images/blazor-pivottable-cell-template.png) diff --git a/blazor/pivot-table/server-side-pivot-engine.md b/blazor/pivot-table/server-side-pivot-engine.md index 7247ba6e5b..d22e01e23a 100644 --- a/blazor/pivot-table/server-side-pivot-engine.md +++ b/blazor/pivot-table/server-side-pivot-engine.md @@ -7,33 +7,36 @@ control: Pivot Table documentation: ug --- -> In general, the Blazor Pivot Table is created using the built-in engine for the given data source. This is an optional feature that allows you to create the Blazor Pivot Table with a server-side pivot engine and external data binding. This server-side pivot engine improves the rendering performance of the pivot table, particularly in Blazor WebAssembly application. And this option is applicable only for relational data source. +> By default, the Pivot Table processes and displays data using its built‑in engine with the given data source. Alternatively, you can use a server‑side pivot engine to connect external data to the Pivot Table, which is especially useful when working with large datasets. This option is applicable only for relational data sources. The server‑side pivot engine improves rendering performance, particularly in Blazor WebAssembly applications. -# Getting Started with Syncfusion® Server-side Pivot Engine +# Getting Started with the Server-Side Engine in Blazor Pivot Table -This section briefs the Syncfusion® assembly [Syncfusion.Pivot.Engine](https://www.nuget.org/packages/Syncfusion.Pivot.Engine), which is used in a server-side application to perform all pivot calculations such as aggregation, filtering, sorting, grouping, and so on, and only the information to be displayed in the pivot table's viewport is passed to the client-side (browser) via web service (Web API) rather than the entire data source. It reduces network traffic and improves the rendering performance of the pivot table, especially when dealing with large amounts of data. It also works best with virtual scrolling enabled and supports all the pivot table's existing features. +This section explains how to use the Syncfusion® assembly [Syncfusion.Pivot.Engine](https://www.nuget.org/packages/Syncfusion.Pivot.Engine) in a server-side application. The server-side engine performs operations such as aggregation, filtering, sorting, and grouping on the server. Only the information required for the Pivot Table viewport is sent to the client through a web service (Web API), instead of transferring the entire data source. This approach helps reduce network traffic and improves Pivot Table rendering performance when working with large data sets. It works efficiently with the virtual scrolling option and supports all existing features in the Pivot Table. ## Quick steps to render the Blazor Pivot Table by using the server-side Pivot Engine ### Download and installing Server-side Pivot Engine -**1.** Download the ASP.NET Core-based stand-alone [application](https://github.com/SyncfusionExamples/server-side-pivot-engine-for-blazor-pivot-table.git) from the GitHub repository. +1. Download the ASP.NET Core-based standalone [application](https://github.com/SyncfusionExamples/server-side-pivot-engine-for-blazor-pivot-table.git) from the GitHub repository. This application includes all necessary files to set up and use the server-side Pivot Engine. -**2.** The **PivotController** (Server-side) application that is downloaded includes the following files. +2. The downloaded **PivotController** application contains the following files to support data communication and processing: + - **PivotController.cs** in the **Controllers** folder: Handles data communication between the server and the Pivot Table. + - **DataSource.cs** in the **DataSource** folder: Defines the structure of the data sources using model classes. + - Sample data source files, **sales.csv** and **sales-analysis.json**, in the **DataSource** folder: Provide example data for testing the Pivot Table. -* **PivotController.cs** file under **Controllers** folder – This helps to do data communication with pivot table. -* **DataSource.cs** file under **DataSource** folder – This file has model classes to define the structure of the data sources. -* The sample data source files **sales.csv** and **sales-analysis.json** under **DataSource** folder. - -**3.** Open the **PivotController** application in Visual Studio where the Syncfusion® library [Syncfusion.Pivot.Engine](https://www.nuget.org/packages/Syncfusion.Pivot.Engine) will be downloaded automatically from the nuget.org site. +3. Open the **PivotController** application in Visual Studio. The Syncfusion [Syncfusion.Pivot.Engine](https://www.nuget.org/packages/Syncfusion.Pivot.Engine) library will automatically download from nuget.org, enabling server-side calculations such as aggregation, filtering, and sorting for the Pivot Table. ![Solution Explorer](./images/blazor-pivotcontroller-solution-explorer.png) ### Connecting Blazor Pivot Table to Server-side Pivot Engine -**1.** Run the **PivotController** (Server-side) application which will be hosted in IIS shortly. +This section explains how to connect the Pivot Table to the server-side Pivot Engine to display data efficiently. Follow these steps to set up the connection and configure the Pivot Table using the server-side application created in the previous section. + +1. **Start the server-side application** +Run the **PivotController** application (downloaded and installed in the previous section) in Visual Studio. This hosts the server-side Pivot Engine on a local server, typically at a URL like `http://localhost:61379/api/pivot/post`. Ensure the application is running before proceeding. -**2.** Then in the Pivot Table [sample](https://github.com/SyncfusionExamples/server-side-pivot-engine-for-blazor-pivot-table/tree/master/Sample/PivotTable), set the [EnableServerSideAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableServerSideAggregation) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **true** and map the URL of the hosted Server-side application in [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). +2. **Configure the Pivot Table for server-side mode** +In your Blazor application, update the Pivot Table’s settings to connect to the server-side Pivot Engine. Set the [EnableServerSideAggregation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableServerSideAggregation) property under [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **true** and map the URL of the hosted Server-side application in [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Url) property of [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). ```cshtml @using Syncfusion.Blazor.PivotView @@ -55,10 +58,10 @@ This section briefs the Syncfusion® assembl public string Year { get; set; } } } - ``` -**3.** Frame and set the report based on the data source available in the **PivotController** application. +3. **Set up the Pivot Table report** +Define the report to organize and display data from the server-side Pivot Engine. Use the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) properties to specify rows, columns, values, and formatting based on the data source in the **PivotController** application (e.g., `sales.csv` or `sales-analysis.json`). For example, you can configure the report to show product details, sales amounts, and production years. ```cshtml @using Syncfusion.Blazor.PivotView @@ -92,29 +95,31 @@ This section briefs the Syncfusion® assembl public string Year { get; set; } } } - ``` -**4.** Run the sample to get the following result. +4. **Run the Blazor application** +Launch your Blazor application to view the Pivot Table. The Pivot Table will connect to the server-side Pivot Engine, retrieve the processed data, and display the results based on the configured report. ![Pivot Table demo using server-side pivot engine](./images/blazor-server-side-demo.png) ## Available configurations in Server-side application +This section explains how to set up and use different data sources with the server-side Pivot Engine in the Blazor [Pivot Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.html). + ### Supportive Data Sources -The server-side pivot engine supports the following data sources, -* Collection -* JSON -* CSV -* DataTable -* Dynamic +The server-side Pivot Engine supports the following data sources: +- Collection +- JSON +- CSV +- DataTable +- Dynamic #### Collection -The collection data sources such as List, IEnumerable, and so on are supported. This can be bound using the **GetData** method in the Web API controller **PivotController.cs**. +The server-side pivot engine supports collection-based data sources, such as List or IEnumerable. You can bind these data sources using the `GetData` method in the server-side controller. In the Pivot Table, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Type) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to `JSON`, which is the default value. -In the server-side application **(PivotController)**, a collection type data source is framed in the **DataSource.cs** file as shown in the following. +In the server-side application, define the collection data source in the **DataSource.cs** file, as shown below: ```csharp public class PivotViewData @@ -146,17 +151,15 @@ public class PivotViewData return VirtualData; } } - ``` -To bind the data source, set its model type **PivotViewData** to **TValue** of the **PivotEngine** class. +To bind this data source, set the model type **PivotViewData** to the **TValue** parameter of the **PivotEngine** class, as shown below: ```csharp private PivotEngine PivotEngine = new PivotEngine(); - ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +Next, call the data source in the **GetData** method within the **PivotController.cs** file: ```csharp public async Task GetData(FetchData param) @@ -167,15 +170,13 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind the collection type data source. + // Bind the collection-based data source here. return new DataSource.PivotViewData().GetVirtualData(); - }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Finally, configure the Pivot Table by setting the appropriate report in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to match the data source, as shown below: ```cshtml @using Syncfusion.Blazor.PivotView @@ -209,16 +210,15 @@ Finally set the appropriate report to the pivot table sample based on the above public string Year { get; set; } } } - ``` ![Server-Side Pivot Engine using collection](./images/blazor-server-side-with-collection-data.png) #### JSON -The JSON data from a local *.json file type can be connected to the pivot table. Here, the file can be read by the **StreamReader** option, which will give the result in the string format. The resultant string needs to be converted to collection data that can be bound to the Server-side pivot engine. +You can use JSON data from a local *.json file to connect to the Pivot Table. The file can be read using the **StreamReader**, which returns the content as a string. This string should then be converted into a collection that can be used with the server-side pivot engine. -In the Server-side application, **sales-analysis.json** file is available under **DataSource** folder and its model type is defined in **DataSource.cs** file. +In your server-side application, the **sales-analysis.json** file is located in the **DataSource** folder, and its model type is defined in the **DataSource.cs** file: ```csharp public class PivotJSONData @@ -240,16 +240,15 @@ public class PivotJSONData return Newtonsoft.Json.JsonConvert.DeserializeObject>(result); } } - ``` -To bind the data source, set its model type **PivotJSONData** to **TValue** of the **PivotEngine** class. +To use this data with the Pivot Table, assign the model type **PivotJSONData** to the **TValue** parameter of the **PivotEngine** class. ```csharp -private PivotEngine PivotEngine = new PivotEngine(); +private PivotEngine PivotEngine = new PivotEngine(); ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +Next, retrieve the JSON data in the **GetData** method of the **PivotController.cs** file. This example shows how to load the **sales-analysis.json** file from the local server: ```csharp public async Task GetData(FetchData param) @@ -260,14 +259,13 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind JSON type data source from the sales-analysis.json file. + // Bind JSON data source from the sales-analysis.json file. return new DataSource.PivotJSONData().ReadJSONData(_hostingEnvironment.ContentRootPath + "\\DataSource\\sales-analysis.json"); }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Then, configure the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property in the Pivot Table to use the JSON data source: ```cshtml @using Syncfusion.Blazor.PivotView @@ -301,12 +299,11 @@ Finally set the appropriate report to the pivot table sample based on the above public int ProCost { get; set; } } } - ``` ![Server-Side Pivot Engine with JSON data](./images/blazor-server-side-with-json-data.png) -JSON data from any remote server, like a local JSON file, can also be supported. It accepts both directly downloadable files (*.json) and web service URLs. To bind this, the URL of the *.json file of a remote server has to be mapped under the **GetData** method. The rest of the configurations are the same as described above. +You can also use JSON data from a remote server in the same way as a local JSON file. Both directly downloadable *.json files and web service URLs are supported. To do this, specify the URL of the remote *.json file in the **GetData** method. The remaining configurations stay the same. In the server-side application, the CDN link is used to connect the same **sales-analysis.json** file which is already hosted in the Syncfusion® server. @@ -319,18 +316,17 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind JSON type data source from remote server. + // Bind JSON data source from a remote server. return new DataSource.PivotJSONData().ReadJSONData("http://cdn.syncfusion.com/data/sales-analysis.json"); }); } - ``` #### CSV -The CSV data from a local *.csv file type can be connected to the pivot table. Here, the file can be read by the **StreamReader** option, which will give the result in the string format. The resultant string needs to be converted to collection data that can be bound to the server-side pivot engine. +The server-side Pivot Engine supports CSV data from a local *.csv file or a remote server. To use a local CSV file, read the file using the **StreamReader** class, which converts the file content into a string. This string is then split into a collection that can be bound to the server-side Pivot Engine. In the Pivot Table, set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Type) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **CSV**. -In the server application, the **sales.csv** file is available under the **DataSource** folder, and its model type is defined in the **DataSource.cs** file. +In the server application, the **sales.csv** file is located in the **DataSource** folder, and its data model is defined in the **DataSource.cs** file as shown below: ```csharp public class PivotCSVData @@ -350,7 +346,6 @@ public class PivotCSVData public double TotalCost { get; set; } public double TotalProfit { get; set; } - public List ReadCSVData(string url) { List data = new List(); @@ -369,16 +364,15 @@ public class PivotCSVData } } } - ``` -To bind the data source, set its model type **PivotCSVData** to **TValue** of the **PivotEngine** class. +To bind the CSV data, set the **PivotCSVData** model as the **TValue** type for the **PivotEngine** class: ```csharp -private PivotEngine PivotEngine = new PivotEngine(); +private PivotEngine PivotEngine = new PivotEngine(); ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +Next, retrieve the CSV data in the **GetData** method of the **PivotController.cs** file: ```csharp public async Task GetData(FetchData param) @@ -389,14 +383,13 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind CSV type data source from sales.csv file. + // Bind CSV data from the local sales.csv file. return new DataSource.PivotCSVData().ReadCSVData(_hostingEnvironment.ContentRootPath + "\\DataSource\\sales.csv"); }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Finally, configure the Pivot Table with the appropriate report settings based on the CSV data source: ```cshtml @using Syncfusion.Blazor.PivotView @@ -438,14 +431,13 @@ Finally set the appropriate report to the pivot table sample based on the above public double TotalProfit { get; set; } } } - ``` ![Server-Side Pivot Engine using CSV data](./images/blazor-server-side-with-csv-data.png) -CSV data from any remote server, like a local CSV file, can also be supported. It accepts both directly downloadable files (*.csv) and web service URLs. To bind this, the URL of the *.csv file of a remote server has to be mapped under **GetData** method. The rest of the configurations are the same as described above. +You can also use CSV data from a remote server, such as a downloadable file or a web service URL. To do this, provide the CSV file URL in the **GetData** method. The process for setting up the Pivot Table remains the same as described above. -In the server application, the CDN link is used to connect the same **sales.csv** file which is already hosted in the Syncfusion® server. +Here is an example of using a remote CSV file hosted on the Syncfusion server: ```csharp public async Task GetData(FetchData param) @@ -456,16 +448,15 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind CSV type data source from remote server. + // Bind the CSV-type data source from remote server. return new DataSource.PivotCSVData().ReadCSVData("http://cdn.syncfusion.com/data/sales-analysis.csv"); }); } - ``` #### DataTable -In the server-side application, there is a manually created DataTable **BusinessObjectsDataView** by mapping the model type **PivotViewData** in **DataSource.cs** file. +In a server-side application, you can create a DataTable named **BusinessObjectsDataView** by mapping it to the **PivotViewData** model type defined in the **DataSource.cs** file. The following code demonstrates how to generate this DataTable from a collection of `PivotViewData` objects: ```csharp public class BusinessObjectsDataView @@ -491,17 +482,15 @@ public class BusinessObjectsDataView return dt; } } - ``` -To bind the data source, set its model type **PivotViewData** to **TValue** of the **PivotEngine** class. +To bind the data source, set the model type **PivotViewData** to the **TValue** property of the **PivotEngine** class, as shown below: ```csharp private PivotEngine PivotEngine = new PivotEngine(); - ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +Next, retrieve the data source by calling the **GetData** method in the **PivotController.cs** file. This method uses caching to improve performance: ```csharp public async Task GetData(FetchData param) @@ -512,14 +501,13 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here bind the DataTable. + // Bind the DataTable here. return new DataSource.BusinessObjectsDataView().GetDataTable(); }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Finally, configure the Pivot Table by setting the appropriate report using the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property. Below is an example configuration that connects to the server-side data source: ```cshtml @using Syncfusion.Blazor.PivotView @@ -553,18 +541,17 @@ Finally set the appropriate report to the pivot table sample based on the above public string Year { get; set; } } } - ``` ![Server-Side Pivot Engine using DataTable](./images/blazor-server-side-with-data-table.png) #### Dynamic -The model type has to be defined in the aforementioned data sources. However, there is no need to define a model type for the following data sources, which are also supported by the server-side pivot engine. +Usually, the model type must be defined for most data sources in the server-side pivot engine. However, when using certain data sources, such as dynamic types, it is not necessary to define a model type. The server-side pivot engine supports these data sources as well. ##### ExpandoObject -In the server-side application, an **ExpandoObject** type data source is available under the class **PivotExpandoData** in **DataSource.cs** file. +In a server-side application, users can use an **ExpandoObject** as a data source. This type of data source is managed by the `PivotExpandoData` class found in the **DataSource.cs** file. The following code shows how to create a list of **ExpandoObject** items: ```csharp public class PivotExpandoData @@ -587,17 +574,15 @@ public class PivotExpandoData return Orders; } } - ``` -To bind the data source, set its model type as **ExpandoObject** to **TValue** of the **PivotEngine** class. +To use this data source with the server-side pivot engine, specify **ExpandoObject** as the model type for `TValue` in the `PivotEngine` class: ```csharp private PivotEngine PivotEngine = new PivotEngine(); - ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +Next, in the **GetData** method of the **PivotController.cs** file, return the ExpandoObject data source: ```csharp public async Task GetData(FetchData param) @@ -608,14 +593,13 @@ public async Task GetData(FetchData param) cacheEntry.SetSize(1); cacheEntry.AbsoluteExpiration = DateTimeOffset.UtcNow.AddMinutes(60); - // Here returns ExpandoObject type data source. + // Returns ExpandoObject type data source. return new DataSource.PivotExpandoData().GetExpandoData(); }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Finally, configure the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property for the Pivot Table on the client side. Set the appropriate fields for rows, columns, and values to match the ExpandoObject properties: ```cshtml @using Syncfusion.Blazor.PivotView @@ -638,14 +622,13 @@ Finally set the appropriate report to the pivot table sample based on the above @code { //other codes here... } - ``` ![Server-Side Pivot Engine using ExpandoObject](./images/blazor-server-side-with-expandoobject.png) ##### Dynamic Objects -In the server-side application, a data source is framed by dynamic objects which is available under the class **PivotDynamicData** in the **DataSource.cs** file. +A dynamic object allows users to bind data to the [Pivot Table](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.html) without having to define a fixed model type. In a server-side application, a data source is created using dynamic objects which are available under the **PivotDynamicData** class in the **DataSource.cs** file. ```csharp public class PivotDynamicData @@ -687,17 +670,15 @@ public class PivotDynamicData } } } - ``` -To bind the data source, set its class **PivotDynamicData** to **TValue** of the **PivotEngine** class. +To use this data source in the server-side code, assign the **PivotDynamicData** class to the **TValue** of the `PivotEngine` class: ```csharp private PivotEngine PivotEngine = new PivotEngine(); - ``` -Then call the data source in **GetData** method of **PivotController.cs** file. +When loading data in the **GetData** method of the **PivotController.cs** file, return the dynamic data source as shown below: ```csharp public async Task GetData(FetchData param) @@ -712,10 +693,9 @@ public async Task GetData(FetchData param) return new DataSource.PivotDynamicData().GetDynamicData(); }); } - ``` -Finally set the appropriate report to the pivot table sample based on the above data source. +Finally, configure the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) property for the Pivot Table on the client side. ```cshtml @using Syncfusion.Blazor.PivotView @@ -738,7 +718,6 @@ Finally set the appropriate report to the pivot table sample based on the above @code { //other codes here... } - ``` ![Server-Side Pivot Engine using Dynamic Objects](./images/blazor-server-side-with-dynamic-object.png) @@ -747,7 +726,7 @@ Finally set the appropriate report to the pivot table sample based on the above #### Memory Cache -In the server-side application, the [`Memory Cache`](https://learn.microsoft.com/en-us/dotnet/api/system.runtime.caching.memorycache?view=net-9.0-pp) option is used to store the data source and engine properties in RAM, which will be used for UI operations. To improve performance, this limits the execution of all initial rendering code to regenerate the aggregated values during each UI operation. The codes below show how we use the memory cache option in the **GetEngine** method to store engine properties. +In a server-side application, the [`Memory Cache`](https://learn.microsoft.com/en-us/dotnet/api/system.runtime.caching.memorycache?view=net-9.0) option helps store the data source and engine properties in RAM for use during UI actions in the Pivot Table. This approach improves performance by preventing the need to recalculate aggregated values every time the user interacts with the Pivot Table. The following example shows how the memory cache is used in the **GetEngine** method to store engine properties: ```csharp public async Task GetEngine(FetchData param) @@ -765,21 +744,20 @@ public async Task GetEngine(FetchData param) return await PivotEngine.GetEngine(param); }); } - ``` -The engine properties are stored in RAM as a cache with a unique ID (GUID) that is transferred from the client-side source code. The GUID is generated at random and will be changed if the page containing the pivot table is refreshed or opened in a new tab/window. As a result, each GUID's memory cache contains unique information, and the component operates independently. +Engine properties are saved in RAM using a unique ID (GUID) that is received from the client-side source code. This GUID is randomly generated and changes if the user refreshes the page or opens the Pivot Table in a new browser tab or window. Because of this, each GUID in the memory cache holds information unique to that session, allowing each Pivot Table instance to work independently. -Meanwhile, the memory cache is set to expire after 60 minutes from RAM to free its memory. If the component is still running, the data will be generated and stored for another 60 minutes. +The memory cache is configured to expire after 60 minutes to help free up RAM. If the user is still working with the Pivot Table after this period, the required data will be generated and cached for another 60 minutes. #### Methods and its needs -* **Post:** Allows to get the information from the client-side source and calls appropriate controller methods. -* **GetEngine:** Allows to store the engine properties in RAM as a cache which fires on initial rendering or when the memory cache is expired. -* **GetData:** Allows to store data source in RAM as a cache which fires on initial rendering or when the memory cache is expired. -* **GetMembers:** Allows to get the members of a field. This fires when the member editor is opened to do a filtering operation. -* **GetRawData:** Allows to get raw data of an aggregated value cell. This fires when the drill-through or editing dialog is opened. -* **GetPivotValues:** Allows to update the stored engine properties in-memory cache and returns the aggregated values to browser to render the pivot table. Here, the return value can be modified. The pivot table will be rendered in the browser based on this. +- **Post:** This method receives requests from the client side of the Pivot Table and forwards them to the appropriate server-side method for processing. +- **GetEngine:** Stores engine properties in RAM as a cache. This method is triggered during the initial rendering of the Pivot Table or when the memory cache expires. +- **GetData:** This method stores the Pivot Table’s data source in a cache on the server. Like **GetEngine**, it is triggered on the first load or after the memory cache is cleared. This enables faster retrieval of the Pivot Table’s data and allows the table to respond quickly to changes. +- **GetMembers:** Allows retrieval of the members of a field. This method is triggered when the member editor is opened for a filtering operation. +- **GetRawData:** Fetches the raw, unaggregated data behind a value cell. This method is used when the user opens the drill-through dialog or starts editing a value in the Pivot Table. +- **GetPivotValues:** Updates the stored engine properties in the in-memory cache and returns the aggregated values to the browser to render the Pivot Table. The return value can be modified, and the Pivot Table will be rendered in the browser based on this. ## Excel Export @@ -1145,4 +1123,4 @@ Then, based on the **Action** parameter (**onPivotExcelExport** or **onPivotCsvE ``` -![Export as Pivot](images/export-as-pivot.png) \ No newline at end of file +![Export as Pivot](images/export-as-pivot.png) diff --git a/blazor/pivot-table/show-hide-totals.md b/blazor/pivot-table/show-hide-totals.md index 070582862b..c3b690e54c 100644 --- a/blazor/pivot-table/show-hide-totals.md +++ b/blazor/pivot-table/show-hide-totals.md @@ -1,21 +1,25 @@ --- layout: post -title: Hide Totals in Blazor Pivot Table Component | Syncfusion -description: Checkout and learn here all about hide totals in Syncfusion Blazor Pivot Table component and much more. +title: Show or hide Totals in Blazor Pivot Table Component | Syncfusion +description: Check out and learn all about showing or hiding totals in the Syncfusion Blazor Pivot Table component and much more. platform: Blazor control: Pivot Table documentation: ug --- -# Hide Totals in Blazor Pivot Table Component +# Show or Hide Totals in Blazor Pivot Table Component + +The Pivot Table component allows users to easily customize the display of grand totals and sub-totals. This documentation explains how to control their visibility and positioning to suit your data analysis needs. ## Show or hide grand totals -Allows to show or hide grand totals in rows and columns using the [ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowGrandTotals) property. To hide the grand totals in rows and columns, set the property [ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowGrandTotals) in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false**. +The Pivot Table component provides options to display or hide grand totals for rows, columns, or both. These options are configured using the following properties within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class: -End user can also hide grand totals for row or columns separately by setting the property [ShowRowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowGrandTotals) or [ShowColumnGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnGrandTotals) in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false** respectively. +- [ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowGrandTotals): Controls the visibility of grand totals for both rows and columns. Set this property to **false** to hide grand totals in both directions. +- [ShowRowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowGrandTotals): When set to **false**, this property hides only the row grand totals. +- [ShowColumnGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnGrandTotals): When set to **false**, this property hides only the column grand totals. -N> By default, [ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowGrandTotals), [ShowRowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowGrandTotals) and [ShowColumnGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnGrandTotals) properties in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class are set as **true**. +N> By default, all of these properties—[ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowGrandTotals), [ShowRowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowGrandTotals), and [ShowColumnGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnGrandTotals)—are set to **true** in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. ```cshtml @using Syncfusion.Blazor.PivotView @@ -53,9 +57,11 @@ N> By default, [ShowGrandTotals](https://help.syncfusion.com/cr/blazor/Syncfusio ![Hiding Grand Total in Blazor PivotTable](images/blazor-pivottable-hide-grand-total.png) -## Show grand totals at top or bottom +## Set grand totals position + +You can specify the position of grand totals for rows and columns in a Pivot Table by configuring the [GrandTotalsPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GrandTotalsPosition.html) property within the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class. You can choose to place the grand totals either at the top or at the bottom of the pivot table, depending on your preference. -Allows to show grand totals either at top or bottom in rows and columns using the [GrandTotalsPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GrandTotalsPosition.html) property. To show grand totals at top in rows and columns, set the [GrandTotalsPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GrandTotalsPosition.html) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **Top**. +To display grand totals at the top of both rows and columns, set the [GrandTotalsPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.GrandTotalsPosition.html) property to **Top**. To show grand totals at the bottom (which is the default setting), set it to **Bottom**. This property applies to both row and column grand totals simultaneously. ```cshtml @using Syncfusion.Blazor.PivotView @@ -96,9 +102,13 @@ Allows to show grand totals either at top or bottom in rows and columns using th ## Show or hide sub-totals -Allows to show or hide sub-totals in rows and columns using the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowSubTotals) property. To hide all the sub-totals in rows and columns, set the property [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowSubTotals) in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false**. End user can also hide sub-totals for rows or columns separately by setting the property [ShowRowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowSubTotals) or [ShowColumnSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnSubTotals) in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **false** respectively. +The Pivot Table component enables showing or hiding sub-totals for rows, columns, or both. Use the following properties in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to configure these options: -N> By default, [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowSubTotals), [ShowRowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowSubTotals) and [ShowColumnSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnSubTotals) properties in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class are set as **true**. +* [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowSubTotals): Set to `false` to hide all sub-totals for rows and columns. +* [ShowRowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowSubTotals): Set to `false` to hide row sub-totals only. +* [ShowColumnSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnSubTotals): Set to `false` to hide column sub-totals only. + +N> By default, the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowSubTotals), [ShowRowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowRowSubTotals), and [ShowColumnSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_ShowColumnSubTotals) properties in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class are set to **true**, ensuring sub-totals are visible across the Pivot Table. ```cshtml @using Syncfusion.Blazor.PivotView @@ -139,9 +149,9 @@ N> By default, [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion. ## Show or hide sub-totals for specific fields -Allows to show or hide sub-totals for specific fields in rows and columns using the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) property. To hide sub-totals for a specific field in row or column axis, set the property [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) in [PivotViewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRows.html) or [PivotViewColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) class to **false** respectively. +The Pivot Table component allows users to show or hide sub-totals for specific fields in the row and column axes using the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) property. To hide sub-totals for a specific field in either axis, set the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) property to **false** in the corresponding field configuration within the rows or columns axis. -N> By default, [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) property in [PivotViewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRows.html) or [PivotViewColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) class is set as **true**. +N> By default, the [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRow.html#Syncfusion_Blazor_PivotView_PivotViewRow_ShowSubTotals) property for fields in both the [PivotViewRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewRows.html) and [PivotViewColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewColumn.html) classes is set to **true**. ```cshtml @using Syncfusion.Blazor.PivotView @@ -179,63 +189,97 @@ N> By default, [ShowSubTotals](https://help.syncfusion.com/cr/blazor/Syncfusion. ![Hiding Sub Total for Specific Field in Blazor PivotTable](images/blazor-pivottable-hide-sub-total-for-specific-field.png) -## Show or hide totals using toolbar +## Show sub-totals at top or bottom -It can also be achieved using built-in toolbar options by setting the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Also, include the items [ToolbarItems.GrandTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html#Syncfusion_Blazor_PivotView_ToolbarItems_GrandTotal) and [ToolbarItems.SubTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html#Syncfusion_Blazor_PivotView_ToolbarItems_SubTotal) within the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class. End user can now see "Show/Hide Grand totals" and "Show/Hide Sub totals" icons in toolbar UI automatically. +You can configure the position of sub-totals within header groups for both rows and columns in the Pivot Table using the [`SubTotalsPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SubTotalsPosition.html) property in the [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html). By default, the [`SubTotalsPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SubTotalsPosition.html) property is set to **Auto**, which displays column sub-totals at the bottom and row sub-totals at the top of their respective header groups in the pivot table. + +To display sub-totals at the top of header groups for both rows and columns, set the [`SubTotalsPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SubTotalsPosition.html) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **Top**. ```cshtml @using Syncfusion.Blazor.PivotView - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + -@code{ - public List toolbar = new List { - ToolbarItems.SubTotal, - ToolbarItems.GrandTotal - }; +@code { public List data { get; set; } + protected override void OnInitialized() { this.data = ProductDetails.GetProductData().ToList(); //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } +``` + +![Show sub-totals at top](images/blazor-pivottable-show-sub-totals-at-top.png) +To display sub-totals at the bottom of header groups for both rows and columns, set the [`SubTotalsPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SubTotalsPosition.html) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) to **Bottom**. + +```cshtml +@using Syncfusion.Blazor.PivotView + + + + + + + + + + + + + + + + + + + + + +@code { + public List data { get; set; } + + protected override void OnInitialized() + { + this.data = ProductDetails.GetProductData().ToList(); + //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } +} ``` - -![Displaying Grand Total using Toolbar in Blazor PivotTable](images/blazor-pivottable-show-total-using-toolbar.png) -
-
-![Displaying Specific Total using Toolbar in Blazor PivotTable](images/blazor-pivottable-show-sub-total-using-toolbar.png) +![Show sub-totals at bottom](images/blazor-pivottable-show-sub-totals-at-bottom.png) + +## Show or hide totals using toolbar -## Show or hide totals using toolbar +You can show or hide grand totals and sub-totals in the Pivot Table using the built-in toolbar. To enable the toolbar, set the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Then, include [ToolbarItems.GrandTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html#Syncfusion_Blazor_PivotView_ToolbarItems_GrandTotal) and [ToolbarItems.SubTotal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html#Syncfusion_Blazor_PivotView_ToolbarItems_SubTotal) in the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property. This displays "Show/Hide Grand Totals" and "Show/Hide Subtotals" icons in the toolbar, allowing users to quickly manage grand totals and sub-totals in the table. -It can also be achieved using built-in toolbar options setting the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) property in pivot table to **true** . Also,include the items `GrandTotal` and `SubTotal` within the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in pivottable. End user can now see "Show/Hide Grand totals" and "Show/Hide Sub totals" icons in toolbar UI automatically. +The toolbar also includes options for "Grand Totals Position" and "Subtotals Position." These options allow users to specify whether grand totals and sub-totals appear at the top or bottom of rows and columns. This flexibility helps users position grand totals and sub-totals to best suit their reporting or data analysis needs. ```cshtml @using Syncfusion.Blazor.PivotView - + @@ -249,15 +293,15 @@ It can also be achieved using built-in toolbar options setting the [ShowToolbar] - + @code{ public List toolbar = new List { - ToolbarItems.SubTotal, - ToolbarItems.GrandTotal + ToolbarItems.GrandTotal, + ToolbarItems.SubTotal }; public List data { get; set; } protected override void OnInitialized() @@ -266,11 +310,13 @@ It can also be achieved using built-in toolbar options setting the [ShowToolbar] //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. } } - ``` -Additionally, with the built-in option available in the grand totals drop down menu, the grand totals can be dynamically displayed at the top or bottom of the pivot table’s row and column axes. By default, the grand totals are displayed at the bottom of the pivot table’s row and column axes. + +![Displaying Grand Total using Toolbar in Blazor PivotTable](images/blazor-pivottable-show-total-using-toolbar.png) +
-![Displaying Grand Total Position using Toolbar in Blazor PivotTable](images/blazor-pivottable-show-grand-total-position.png) +![Displaying Specific Total using Toolbar in Blazor PivotTable](images/blazor-pivottable-show-sub-total-using-toolbar.png) +
N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/sorting.md b/blazor/pivot-table/sorting.md index 7f069ff570..71a081d79e 100644 --- a/blazor/pivot-table/sorting.md +++ b/blazor/pivot-table/sorting.md @@ -18,24 +18,35 @@ To have a quick glance on how to sort data in the Blazor Pivot Table, watch this ## Member Sorting -Allows to order field members in rows and columns either in ascending or descending order. By default, field members in rows and columns are in ascending order. +The Member Sorting functionality enables you to arrange field members in the rows and columns of a pivot table in either **ascending** or **descending** order. By default, field members are sorted in ascending order. -Member sorting can be enabled by setting the [EnableSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableSorting) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **true**. After enabling this API, click the sort icon besides each field in row or column axis, available in the field list or grouping bar UI for re-arranging members either in ascending or descending order. +### Enabling Member Sorting -N> By default the [EnableSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableSorting) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class set as **true**. If it is set as **false**, then the field members arrange in pivot table as its data source order. And, the sort icons in grouping bar and field list buttons will be removed. +To enable member sorting, set the [EnableSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableSorting) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class to **true**. Once enabled, you can click the sort icon next to each field in the row or column axis within the **Field List** or **Grouping Bar** UI to reorder members in ascending or descending order. -![Sorting in Blazor PivotTable Field List](images/blazor-pivottable-sorting-in-field-list.png) -
-![Sorting in Blazor PivotTable Grouping Bar](images/blazor-pivottable-sorting-in-groupbar.png) -
-![Sorting in Blazor PivotGrid](images/blazor-pivotgrid-sorting.png) +N> By default the [EnableSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_EnableSorting) property in [PivotViewDataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html) class set as **true**. If we set it as **false**, then the field members arrange in pivot table as its data source order. And, the sort icons in grouping bar and field list buttons will be removed. + +#### Visual Reference + +- **Field List Sort Icon**: + ![Member sorting icon in field list](images/blazor-pivottable-sorting-in-field-list.png) + +- **Grouping Bar Sort Icon**: + ![Member sorting icon in grouping bar](images/blazor-pivottable-sorting-in-groupbar.png) -Member sorting can also be configured using the [PivotViewSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html) class through the code behind, during the initial rendering. The settings required to sort are: +- **Sorted Pivot Table**: + ![Resultant pivot table after member sorting](images/blazor-pivotgrid-sorting.png) -* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html#Syncfusion_Blazor_PivotView_PivotViewSortSetting_Name): It allows to set the field name. -* [Order](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html#Syncfusion_Blazor_PivotView_PivotViewSortSetting_Order): It allows to set the sort direction either to ascending or descending of the respective field. +### Configuring Member Sorting Code Behind -N> By default the [Order](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html#Syncfusion_Blazor_PivotView_PivotViewSortSetting_Order) property in the [PivotViewSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html) class set as [Sorting.Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Sorting.html). Meanwhile, the field members can arrange its order in data source by setting it as [Sorting.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Sorting.html) where the sort icons in grouping bar and field list buttons for the corresponding field will be removed. +You can also configure member sorting during initial rendering using the [PivotViewSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html) class through code behind. The required settings are: + +* [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotSortSetting.html#Syncfusion_Blazor_PivotView_PivotSortSetting_Name): Specifies the name of the field to sort. +* [Order](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotSortSetting.html#Syncfusion_Blazor_PivotView_PivotSortSetting_Order): Defines the sort direction, either **Ascending** or **Descending**. + +N> By default the [Order](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotSortSetting.html#Syncfusion_Blazor_PivotView_PivotSortSetting_Order) property in the [PivotViewSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewSortSetting.html) class set as [Sorting.Ascending](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Sorting.html). Meanwhile, we can arrange the field members as its order in data source by setting it as [Sorting.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.Sorting.html#Syncfusion_Blazor_PivotView_Sorting_None) where the sort icons in grouping bar and field list buttons for the corresponding field will be removed. + +The following example demonstrates how to configure the Pivot Table to enable member sorting and set the "Country" field to sort in descending order: ```cshtml @using Syncfusion.Blazor.PivotView @@ -78,7 +89,9 @@ N> By default the [Order](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ### Alphanumeric Sorting -Usually string sorting is applied to field members even if it starts with numbers. But this kind of field members can also be sorted on the basis of the numbers that are placed at the beginning of the member name. This can be achieved by setting the [DataType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_DataType) property as number to the desired field. +Usually, string sorting is applied to field members even if their names start with numbers. To sort field members numerically based on the numbers at the beginning of their names, you can set the [DataType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_DataType) property to **number** for the specific field. This enables numeric sorting instead of alphabetical sorting, allowing for better logical ordering of numbered items. + +When [DataType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FieldOptions.html#Syncfusion_Blazor_PivotView_FieldOptions_DataType) is set to **number**, the component intelligently sorts members like '71-AJ', '209-FB', '36-SW' in the correct numerical sequence (36-SW, 71-AJ, 209-FB) rather than alphabetical order (209-FB, 36-SW, 71-AJ). ```cshtml @using Syncfusion.Blazor.PivotView @@ -151,17 +164,17 @@ Usually string sorting is applied to field members even if it starts with number ![Alpha Numeric Sorting in Blazor PivotTable](images/blazor-pivottable-alpha-numberic-sorting.png) -## Value sorting +## Value Sorting -Allows to sort individual value field and its aggregated values either in row or column axis in both ascending and descending order. It can be enabled by setting the [EnableValueSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableValueSorting) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. On enabling, the end user can sort the values by directly clicking the value field header positioned either in row or column axis of the pivot table component. +Value sorting allows users to sort a specific value field and its aggregated values in either the row or column axis, in ascending or descending order. To enable this functionality, set the [EnableValueSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableValueSorting) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. Once enabled, users can sort values by clicking the header of a value field in the pivot table's row or column axis. -The value sorting can also be configured using the [PivotViewValueSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html) option through the code behind. The settings required to sort value fields are: +You can also configure value sorting programmatically using the [PivotViewValueSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html) option. The required settings are: -* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_HeaderText): It allows to set the header names with delimiters, that is used for value sorting. The header names are arranged from Level 1 to Level N, down the hierarchy with a delimiter for better specification. -* [HeaderDelimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels. -* [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_SortOrder): It allows to set the sort direction of the value field. +* [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_HeaderText): It allows to set the header names with delimiters, that is used for value sorting. The header names are arranged from Level 1 to Level N, down the hierarchy with a delimiter for better specification. +* [HeaderDelimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels. +* [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_SortOrder): It allows to set the sort direction of the value field. -N> Value fields are set to the column axis by default. In such cases, the value sorting applied will have an effect on the column alone. You need to place the value fields in the row axis to do so in row wise. For more information, [refer here](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#values-in-row-axis). +N> Value fields are set to the column axis by default. In such cases, the value sorting applied will have an effect on the column alone. You need to place the value fields in the row axis to do so in row wise. For more information, please [refer here](https://blazor.syncfusion.com/documentation/pivot-table/data-binding#values-in-row-axis). ```cshtml @using Syncfusion.Blazor.PivotView @@ -202,15 +215,15 @@ N> Value fields are set to the column axis by default. In such cases, the value ### Multiple Axis Sorting -Users can apply value sorting to both row and column axes simultaneously for more dynamic and precise data analysis. The following settings are used to configure sorting: +Multiple axis sorting allows simultaneous sorting of value fields in both row and column axes for more flexible and precise data analysis. Apply this functionality using the following settings in [PivotViewValueSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html): -* [ColumnHeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_ColumnHeaderText): Specifies the column header hierarchy for value sorting. Header levels are defined from Level 1 to N using a delimiter for clarity. -* [HeaderDelimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels. -* [ColumnSortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_ColumnSortOrder): Sets the delimiter string used to separate levels in the column header text. -* [RowHeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_RowHeaderText): Defines the specific row header for which the value sorting should be applied. -* [RowSortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotViewValueSortSettings_RowSortOrder): Determines the sorting direction for the specified row header. +* [ColumnHeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_ColumnHeaderText): Specifies the column header hierarchy for value sorting. Header levels are defined from Level 1 to N using a delimiter for clarity. +* [HeaderDelimiter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_HeaderDelimiter): It allows to set the delimiters string to separate the header text between levels. +* [ColumnSortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_ColumnSortOrder): Determines the sorting direction for the specified column header. +* [RowHeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_RowHeaderText): Defines the specific row header for which the value sorting should be applied. +* [RowSortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotValueSortSettings.html#Syncfusion_Blazor_PivotView_PivotValueSortSettings_RowSortOrder): Determines the sorting direction for the specified row header. -N> This feature is applicable only to relational data sources. +N> This feature is applicable only to relational data sources and operates exclusively with client-side engine. ```cshtml @using Syncfusion.Blazor.PivotView @@ -232,7 +245,7 @@ N> This feature is applicable only to relational data sources.                                - +      @@ -248,26 +261,25 @@ N> This feature is applicable only to relational data sources. ``` ## Events -### OnActionBegin - -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when clicking the value sort icon or the sort icon in the field button, which is present in both grouping bar and field list UI. This allows user to identify the current action being performed at runtime. It has the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +### OnActionBegin -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): It holds the name of the current action began. The following are the UI actions and their names: +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event is triggered when the user clicks the value sort icon or the sort icon in a field button, available in both the grouping bar and field list UI. This event allows the user to detect the current action being performed at runtime. The event argument includes the following properties: -| Action | Action Name| -|----------------|-------------| -| [Sort field](./sorting#member-sorting)| Sort field | -| [Value sort icon](./sorting#value-sorting)| Sort value| +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current data source settings, including input data, rows, columns, values, filters, format settings, and more. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Indicates the name of the action that has begun. The possible UI actions and corresponding names are: -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): It holds the selected field information. + | Action | Action Name| + |------|-------------| + | [Sort field](./sorting#member-sorting) | Sort field | + | [Value sort icon](./sorting#value-sorting) | Sort value | -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_FieldInfo): Provides information about the selected field. +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Set this property to **true** to prevent the current action. -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): It allows user to restrict the current action. +N> This event is triggered only when field-based UI actions such as filtering, sorting, removing fields from the grouping bar, editing, or changing the aggregation type are performed. -In the following example, sort action can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +In the sample below, the sort action is restricted by setting the **args.Cancel** property to **true** in the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event handler. ```cshtml @using Syncfusion.Blazor.PivotView @@ -312,24 +324,23 @@ In the following example, sort action can be restricted by setting the **args.Ca } ``` -### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the UI actions such as value sorting or sorting via the field button, which is present in both grouping bar and field list UI, is completed. This allows user to identify the current UI action being completed at runtime. It has the following parameters: - -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. +### OnActionComplete -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): It holds the name of the current action completed. The following are the UI actions and their names: +The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the UI actions such as value sorting or sorting via the field button, which is present in both grouping bar and field list UI, is completed. This allows user to identify the current UI actions being completed at runtime. The event argument includes the following properties: -| Action | Action Name| -|----------------|-------------| -| [`Sort field`](./sorting#member-sorting)| Field sorted| -| [`Value sort icon`](./sorting#value-sorting)| Value sorted| +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current data source settings, including input data, rows, columns, values, filters, format settings, and more. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Indicates the name of the completed action. The possible UI actions and corresponding names are: -* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): It holds the selected field information. + | Action | Action Name| + |------|-------------| + | [Sort field](./sorting#member-sorting) | Field sorted | + | [Value sort icon](./sorting#value-sorting) | Value sorted | -N> This option is applicable only when the field based UI actions are performed such as filtering, sorting, removing field from grouping bar, editing and aggregation type change. +* [FieldInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_FieldInfo): Provides information about the selected field. +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if sorting is completed, the event argument contains information such as sort order and the field name. -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): It holds the unique information about the current UI action. For example, if sorting is completed, the event argument contains information such as sort order and the field name. +N> This event is triggered only when field-based UI actions such as filtering, sorting, removing fields from the grouping bar, editing, or changing the aggregation type are performed. ```cshtml @using Syncfusion.Blazor.PivotView @@ -374,16 +385,17 @@ N> This option is applicable only when the field based UI actions are performed } ``` + ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event is triggered when a UI action fails to produce the expected result. This event provides detailed information about the failure through the following parameters: * [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): It holds the name of the current action failed. The following are the UI actions and their names: -| Action | Action Name| -|----------------|-------------| -| [`Sort field`](./sorting#member-sorting)| Sort field | -| [`Value sort icon`](./sorting#value-sorting)| Sort value| + | Action | Action Name| + |------|-------------| + | [Sort field](./sorting#member-sorting)| Sort field | + | [Value sort icon](./sorting#value-sorting)| Sort value| * [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): It holds the error information of the current UI action. diff --git a/blazor/pivot-table/state-persistence.md b/blazor/pivot-table/state-persistence.md index 95a92888a0..535f4cfd1c 100644 --- a/blazor/pivot-table/state-persistence.md +++ b/blazor/pivot-table/state-persistence.md @@ -9,14 +9,13 @@ documentation: ug # State Persistence in Blazor Pivot Table Component -State persistence allows user to maintain the current state of the component along with its report bounded in the browser local storage (cookie). Even if the browser is refreshed or if you move to the next page within the browser, components state will be persisted. State persistence stores the Pivot Table object in the local storage when [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnablePersistence) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class is set to **true**. +State persistence enables users to automatically retain the entire configuration of the Pivot Table component in the browser's local storage (cookies). This includes the current layout, field arrangements, sorting, applied filters, and the expanded or collapsed states of fields. By enabling the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnablePersistence) property in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class, all these interactive states and settings are saved automatically. As a result, users can refresh the browser or navigate to different pages and return at any time, knowing that all modified report settings will be retained—ensuring a seamless and uninterrupted data analysis experience. -N> The state of the pivot table is retained during page refresh and navigation based on its ID set. Make sure to set **unique ID** for each pivot table to store its state in browser. On duplication of ID, the state maintained will be overridden. +N> The state of the Pivot Table is retained during page refresh and navigation based on its ID set. Make sure to set **unique ID** for each Pivot Table to store its state in browser. On duplication of ID, the state maintained will be overridden. ```cshtml @using Syncfusion.Blazor.PivotView - @@ -43,7 +42,7 @@ N> The state of the pivot table is retained during page refresh and navigation b protected override void OnInitialized() { this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" section in getting started for more details. } } @@ -51,7 +50,7 @@ N> The state of the pivot table is retained during page refresh and navigation b ## Save and Load Pivot Layout -You can save the current layout of the pivot table by using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_GetPersistData) in string format. The saved layout can be loaded to pivot table any time by passing the saved data as a parameter to [LoadPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_LoadPersistData_System_String_) method in the [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html). +In addition to automatic state persistence, the Pivot Table component allows you to save and restore the current layout programmatically. By using the [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_GetPersistData) method, you can retrieve the complete state of the Pivot Table component as a serialized string. This string can be stored and later re-applied to the component by passing it to the [LoadPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_LoadPersistData_System_String_) method. This approach offers flexibility for saving user-specific layouts, restoring previous configurations, or implementing custom workflows for managing and reloading the component’s state as needed. ```cshtml @using Syncfusion.Blazor.PivotView @@ -87,7 +86,7 @@ You can save the current layout of the pivot table by using [GetPersistDataAsync protected override void OnInitialized() { this.data = ProductDetails.GetProductData().ToList(); - //Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + //Bind the data source collection here. Refer "Assigning sample data to the Pivot Table" section in getting started for more details. } public string persistData; public async void savedata(Microsoft.AspNetCore.Components.Web.MouseEventArgs e) @@ -102,4 +101,4 @@ You can save the current layout of the pivot table by using [GetPersistDataAsync ``` -N> You can 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. \ No newline at end of file +N> You can 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. \ No newline at end of file diff --git a/blazor/pivot-table/tool-bar.md b/blazor/pivot-table/tool-bar.md index 1d14420b77..dff321b36b 100644 --- a/blazor/pivot-table/tool-bar.md +++ b/blazor/pivot-table/tool-bar.md @@ -9,7 +9,7 @@ documentation: ug # Toolbar in Blazor Pivot Table Component -Toolbar option allows to access the frequently used features like switching between pivot table and pivot chart, changing chart types, conditional formatting, exporting, etc. with ease at runtime. This option can be enabled by setting the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. The [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class accepts the collection of built-in toolbar options. +The toolbar in the Blazor Pivot Table component provides easy access to commonly used features, such as switching between a pivot table and a pivot chart, changing chart types, applying conditional formatting, exporting data, and more. To enable the toolbar, set the [ShowToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowToolbar) property to **true**. Additionally, the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_Toolbar) property accepts a collection of built-in toolbar options, allowing users to interact with the Pivot Table efficiently at runtime. To have a quick glance on how to add and customize toolbar in the Blazor Pivot Table, watch this video: @@ -18,27 +18,27 @@ To have a quick glance on how to add and customize toolbar in the Blazor Pivot T ## Built-in Toolbar Options -The following table shows built-in toolbar options and its actions. +The following table lists the built-in toolbar options and their actions: | Built-in Toolbar Options | Actions | -|------------------------|---------| +|--------------------------|---------| | New | Creates a new report | | Save | Saves the current report | -| Save As | Save as current report | -| Rename | Renames the current report | -| Delete | Deletes the current report | -| Load | Loads any report from the report list | -| Grid | Shows pivot table | -| Chart | Shows a chart in any type from the built-in list and option to enable/disable multiple axes | -| Exporting | Exports the pivot table as PDF/Excel/CSV and the pivot chart as PDF and image | -| Sub-total | Shows or hides sub totals | -| Grand Total | Shows or hides grand totals | -| Conditional Formatting | Shows the conditional formatting pop-up to apply formatting | -| Number Formatting | Shows the number formatting pop-up to apply number formatting | -| Field List | Shows the fieldlist pop-up | -| MDX | Shows the MDX query that was run to retrieve data from the OLAP data source. **NOTE: This applies only to the OLAP data source.** | - -N> The order of toolbar options can be changed by simply moving the position of items in the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) collection. Also if end user wants to remove any toolbar option from getting displayed, it can be simply ignored from adding into the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) collection. +| Save As | Saves the current report with a new name | +| Rename | Changes the name of the current report | +| Delete | Removes the current report | +| Load | Opens a report from the report list | +| Grid | Displays the pivot table | +| Chart | Shows a pivot chart with options to select different chart types and enable or disable multiple axes | +| Exporting | Exports the pivot table as PDF, Excel, or CSV, or the pivot chart as a PDF or image | +| Sub-total | Shows or hides subtotals in the pivot table | +| Grand Total | Shows or hides grand totals in the pivot table | +| Conditional Formatting | Opens a pop-up to apply formatting to cells based on conditions | +| Number Formatting | Opens a pop-up to apply number formatting to cells | +| Field List | Opens the field list pop-up to configure the report settings | +| MDX | Displays the MDX query used to retrieve data from an OLAP data source. **Note**: This option applies only to OLAP data sources. | + +N> The order of toolbar options can be changed by simply moving the position of items in the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) collection. Also, if end user wants to remove any toolbar option from getting displayed, it can be simply ignored from adding into the [ToolbarItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.ToolbarItems.html) collection. ```cshtml @using Syncfusion.Blazor.PivotView @@ -165,7 +165,11 @@ N> The order of toolbar options can be changed by simply moving the position of ## Show desired chart types in the dropdown menu -By default, all the chart types are displayed in the dropdown menu included in the toolbar. However, based on the request for an application, it is required to show selective chart types on own. This can be achieved using the [ChartTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ChartTypes) property. To know more about supporting chart types, [click here](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#chart-types). +By default, the dropdown menu in the toolbar displays all available chart types. However, you may want to show only specific chart types in the dropdown menu based on your application’s needs. To do this, use the [ChartTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ChartTypes) property. This property allows you to define a list of chart types that will appear in the dropdown menu, ensuring users see only the options you select. + +For example, if you want the dropdown menu to show only the Column, Bar, Line, and Area chart types, you can set the [ChartTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ChartTypes) property to include these specific options. This makes the pivot chart easier to use by limiting the choices to those most relevant for your data. + +To learn more about the supported chart types, see the [Pivot Chart documentation](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#chart-types). ```cshtml @using Syncfusion.Blazor.PivotView @@ -217,14 +221,13 @@ By default, all the chart types are displayed in the dropdown menu included in t ## Switch the chart to multiple axes -In the chart, the user can switch from single axis to multiple axes with the help of the built-in checkbox available inside the chart type dropdown menu in the toolbar. For more information [refer here](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#multi-axis). +In the pivot chart, users can switch between a single axis and multiple axes using a built-in checkbox located in the chart type dropdown menu on the toolbar. This option allows users to display data on multiple axes for better visualization. For more details, [refer here](https://blazor.syncfusion.com/documentation/pivot-table/pivot-chart#multi-axis). ![Displaying Multiple Axes in Blazor PivotTable DropDown Menu](images/blazor-pivotchart-show-multiple-axes.png) ## Show or hide legend -In the chart, legend can be shown or hidden dynamically with the help of the built-in option available in the chart type drop-down menu. -N> By default, the legend will not be visible for the accumulation chart types like pie, doughnut, pyramid, and funnel. Users can enable or disable using the built-in checkbox option. +In the pivot chart, you can show or hide the legend dynamically using an option in the chart type drop-down menu on the toolbar. This allows you to control whether the legend appears alongside the chart. For accumulation chart types, such as pie, doughnut, pyramid, and funnel, the legend is hidden by default. You can enable or disable the legend using a built-in checkbox available in the drop-down menu. ![Blazor PivotChart with Legend](images/blazor-pivotchart-legend.png) @@ -238,7 +241,7 @@ SQL Server is a relational database management system (RDBMS) that can be used t **2.** To connect a SQL Server database using the Microsoft SqlClient in our application, we need to install the [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Microsoft.Data.SqlClient** and install it. -![Add the NuGet package Microsoft.Data.SqlClient to the project](./images/ms-data-sqlclient-nuget-package-install.png) +![Add the NuGet package Microsoft.Data.SqlClient to the project](./images/ms-data-sqlclient-nuget-package-install.jpeg) **3.** Next, in the **Index.razor** page, the **OpenConnection** method is used to connect to the SQL database. The **GetDataTable** method then processes the specified SQL query string, retrieves data from the database, and converts it into a **DataTable** using **SqlCommand** and **SqlDataAdapter**. This **DataTable** can be used to retrieve saved reports and modify them further as shown in the code block below. @@ -527,7 +530,7 @@ For example, the report shown in the following code snippet will be passed to th ![The current report has been saved in the SQL database](./images/blazor_output_save_report.png) -In the meantime, you can save a duplicate of the current report to the SQL Server database with a different name by selecting **"Save as current report"** from the toolbar. The [saveReport](#savereport) event will then be triggered with the new report name **"Sample Report 1"** and the current report. You can save them to the SQL Server database after passing them to the **SaveReportToDB** method, as mentioned above. +In the meantime, you can save a duplicate of the current report to the SQL Server database with a different name by selecting **"Save as current report"** from the toolbar. The [SaveReport](#savereport) event will then be triggered with the new report name **"Sample Report 1"** and the current report. You can save them to the SQL Server database after passing them to the **SaveReportToDB** method, as mentioned above. ![Copy of the current report has been saved in the SQL database](./images/blazor_output_save_as_report.png) @@ -869,7 +872,7 @@ When you select the **"Create a new report"** option from the toolbar, the [NewR **2.** To connect a SQL Server database using the Microsoft SqlClient in our application, we need to install the [Microsoft.Data.SqlClient](https://www.nuget.org/packages/Microsoft.Data.SqlClient) NuGet package. To do so, open the NuGet package manager of the project solution, search for the package **Microsoft.Data.SqlClient** and install it. -![Add the NuGet package Microsoft.Data.SqlClient to the project](images/ms-data-sqlclient-nuget-package-install.png) +![Add the NuGet package Microsoft.Data.SqlClient to the project](images/ms-data-sqlclient-nuget-package-install.jpeg) **3.** Under the **Controllers** folder, create a Web API controller (aka, PivotController.cs) file that aids in data communication with the Pivot Table. @@ -1187,7 +1190,7 @@ namespace MyWebService.Controllers ![The current report has been saved in the SQL database](images/blazor_output_save_report.png) -In the meantime, you can save a duplicate of the current report to the SQL Server database with a different name by selecting **"Save as current report"** from the toolbar. The [saveReport](#savereport) event will then be triggered with the new report name **"Sample Report 1"** and the current report. You can save them to the SQL Server database after passing them to the Web API service, as mentioned above. +In the meantime, you can save a duplicate of the current report to the SQL Server database with a different name by selecting **"Save as current report"** from the toolbar. The [SaveReport](#savereport) event will then be triggered with the new report name **"Sample Report 1"** and the current report. You can save them to the SQL Server database after passing them to the Web API service, as mentioned above. ![Copy of the current report has been saved in the SQL database](images/blazor_output_save_as_report.png) @@ -1628,7 +1631,7 @@ Below points need to be considered when saving the report to SQL Server database ## Load desired report from the report list as default -By default, the pivot table is displayed with the report bound at the code-behind. To load a desired report from the previously saved report collection during initial rendering, set the [DefaultReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FetchReportArgs.html#Syncfusion_Blazor_PivotView_FetchReportArgs_DefaultReportName) option in the [FetchReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FetchReport) event. +By default, the Pivot Table displays with the report configuration defined in the component initialization. To load a specific report from a previously saved report collection during the initial rendering process, configure the desired report name within the [FetchReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FetchReport) event by setting the [DefaultReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FetchReportArgs.html#Syncfusion_Blazor_PivotView_FetchReportArgs_DefaultReportName) property. This approach allows the Pivot Table to automatically apply the selected report's configuration, including field arrangements, filters, and formatting settings, as soon as the component completes its data binding process. ```cshtml @using Syncfusion.Blazor.PivotView @@ -1771,35 +1774,33 @@ By default, the pivot table is displayed with the report bound at the code-behin ### FetchReport -The event [FetchReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FetchReport) is triggered when dropdown list is clicked in the toolbar in-order to retrieve and populate saved reports. It has following parameter - [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FetchReportArgs.html#Syncfusion_Blazor_PivotView_FetchReportArgs_ReportName). This event allows the user to fetch the report names from the local storage and populate the dropdown list. +The [FetchReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FetchReport) event is triggered when a user clicks the dropdown list in the toolbar to retrieve saved reports. It includes the [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.FetchReportArgs.html#Syncfusion_Blazor_PivotView_FetchReportArgs_ReportName) parameter, which holds the name of the selected report. This event allows users to fetch report names from local storage and populate the dropdown list for easy selection. ### LoadReport -The event [LoadReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_FetchReport) is triggered when a report is selected from the dropdown list in the toolbar. It has the following parameters - [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadReportArgs.html#Syncfusion_Blazor_PivotView_LoadReportArgs_Report) and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadReportArgs.html#Syncfusion_Blazor_PivotView_LoadReportArgs_ReportName). This event allows the user to load the selected report to the pivot table. +The [LoadReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_LoadReport) event occurs when a user selects a report from the dropdown list in the toolbar of the Pivot Table. This event allows the user to load the chosen report into the Pivot Table for viewing or analysis. It includes two parameters: [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadReportArgs.html#Syncfusion_Blazor_PivotView_LoadReportArgs_Report), which contains the details of the selected report, and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.LoadReportArgs.html#Syncfusion_Blazor_PivotView_LoadReportArgs_ReportName), which specifies the name of the report. These parameters allow the user to load the selected report into the Pivot Table, updating the displayed data based on the chosen report. ### NewReport -The event [NewReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_NewReport) is triggered when the new report icon is clicked in the toolbar. It has following parameter - [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.NewReportArgs.html#Syncfusion_Blazor_PivotView_NewReportArgs_Report). This event allows user to create new report and add to the report list. +The [NewReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_NewReport) event is triggered when a user clicks the **New Report** icon in the toolbar. This event allows the user to create a new report and add it to the report list. The event provides a parameter, [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.NewReportArgs.html#Syncfusion_Blazor_PivotView_NewReportArgs_Report), which contains details about the new report. By using this event, users can easily start fresh with a new set of data configurations in the Pivot Table, managed through the report settings. ### RenameReport -The event [RenameReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_RenameReport) is triggered when rename report icon is clicked in the toolbar. It has following parameters - [Rename](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_Rename), [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_Report) and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_ReportName). This event allows user to rename the selected report from the report list. +The [RenameReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_RenameReport) event is triggered when a user clicks the rename report icon in the toolbar. This event allows users to change the name of a selected report from the report list. It includes the following parameters: [Rename](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_Rename), which holds the new report name entered by the user; [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_Report), which contains the details of the current report; and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RenameReportArgs.html#Syncfusion_Blazor_PivotView_RenameReportArgs_ReportName), which stores the original name of the report. ### RemoveReport -The event [RemoveReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_RemoveReport) is triggered when remove report icon is clicked in the toolbar. It has following parameters - [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RemoveReportArgs.html#Syncfusion_Blazor_PivotView_RemoveReportArgs_Report) and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RemoveReportArgs.html#Syncfusion_Blazor_PivotView_RemoveReportArgs_ReportName). This event allows user to remove the selected report from the report list. +The [RemoveReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_RemoveReport) event is triggered when a user clicks the remove report icon in the toolbar. It includes two parameters: [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RemoveReportArgs.html#Syncfusion_Blazor_PivotView_RemoveReportArgs_Report) and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.RemoveReportArgs.html#Syncfusion_Blazor_PivotView_RemoveReportArgs_ReportName). These parameters allow the user to identify and remove a selected report from the report list in the Pivot Table. ### SaveReport -The event [SaveReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_SaveReport) is triggered when save report icon is clicked in the toolbar. It has the following parameters - [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SaveReportArgs.html#Syncfusion_Blazor_PivotView_SaveReportArgs_Report) and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SaveReportArgs.html#Syncfusion_Blazor_PivotView_SaveReportArgs_ReportName). This event allows user to save the altered report to the report list. - - +The [SaveReport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_SaveReport) event triggers when a user clicks the save report icon in the toolbar. It allows the user to save changes made to the current report. The event includes two parameters: [Report](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SaveReportArgs.html#Syncfusion_Blazor_PivotView_SaveReportArgs_Report), which contains the report details, and [ReportName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SaveReportArgs.html#Syncfusion_Blazor_PivotView_SaveReportArgs_ReportName), which specifies the name of the saved report. ### BeforeExport -The pivot table (or) pivot chart can be exported as a PDF, Excel, CSV, or other document via the toolbar options. And, you can customize the export settings for exporting document by using the `BeforeExport` event in the toolbar. +The Pivot Table component allows users to export data as PDF, Excel, or CSV files using the toolbar options. The [BeforeExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_BeforeExport) event lets users customize settings for the exported document before the export process begins. For instance, users can add a header or footer to a PDF document by setting the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeader.html) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfFooter.html) properties in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class within this event. Similarly, for Excel exports, users can define headers using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class. -For example, you can add the header and footer for the PDF document by setting the `header` and `footer` properties for the `PdfExportProperties` in the `BeforeExport` event. +Here’s an example of how to use the [BeforeExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_BeforeExport) event to customize headers and footers for both PDF and Excel exports: ```cshtml @using Syncfusion.Blazor.PivotView @@ -1958,160 +1959,158 @@ For example, you can add the header and footer for the PDF document by setting t ### OnActionBegin -The event [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) triggers when the UI actions such as switching between pivot table and pivot chart, changing chart types, conditional formatting, exporting, etc. that are present in toolbar UI begin. This allows user to identify the current action being performed at runtime. It has the following parameters: +The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event triggers when a user starts an action in the toolbar, such as switching between the pivot table and pivot chart, changing chart types, applying conditional formatting, or exporting data. This event helps users identify the action being performed and provides options to control it. It includes the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName) : It holds the name of the current action began. The following are the UI actions and their names: +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_DataSourceSettings): Contains the current report settings of the pivot table, including the data source, rows, columns, values, filters, and format settings. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_ActionName): Indicates the name of the action being performed. Below is a list of toolbar actions and their corresponding names: -|Action | Action Name| +| Action | Action Name | | ------ | --------- | -|New report | Add new report | -|Save report | Save current report | -|Save as report | Save as current report | -|Rename report | Rename current report | -|Remove report | Remove current report | -|Report change | Report change | -|Conditional Formatting | Open conditional formatting dialog | -|Number Formatting| Open number formatting dialog| -|Export menu | PDF export, Excel export, CSV export, JPG export, PNG export | -|Show field list | Open field list | -|Show Table | Show table view | -|Chart menu | Show chart view | -|MDX query | Open MDX query dialog | -|Sub-totals menu | Hide sub-totals, Show row sub-totals, Show column sub-totals, Show sub-totals | -|Grand totals menu | Hide grand totals, Show row grand totals, Show column grand totals, Show grand totals | - - -* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel) : It allows user to restrict the current action. - -In the below sample, toolbar UI actions such as add new report and save current report can be restricted by setting the **args.Cancel** option to **true** in the `OnActionBegin` event. +| New report | Add new report | +| Save report | Save current report | +| Save as report | Save as current report | +| Rename report | Rename current report | +| Remove report | Remove current report | +| Report change | Report change | +| Conditional Formatting | Open conditional formatting dialog | +| Number Formatting | Open number formatting dialog | +| Export menu | PDF export, Excel export, CSV export | +| Show Fieldlist | Open field list | +| Show Table | Show table view | +| Chart menu | Show chart view | +| MDX query | Open MDX query dialog | +| Sub-totals menu | Hide sub-totals, Show row sub-totals, Show column sub-totals, Show sub-totals | +| Grand totals menu | Hide grand totals, Show row grand totals, Show column grand totals, Show grand totals | + +* [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionBeginEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionBeginEventArgs_Cancel): Allows users to stop the current action by setting this option to **true**. + +In the example below, the [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionBegin) event is used to prevent the "Add new report" and "Save current report" actions by setting args.Cancel to **true**. This stops these specific toolbar actions from proceeding. The code demonstrates how to control toolbar interactions effectively. ```cshtml @using Syncfusion.Blazor.PivotView;
- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
@code { - private SfPivotFieldList fieldList; - private SfPivotView pivot; - private List toolbar = new List { - ToolbarItems.New, - ToolbarItems.Save, - ToolbarItems.Grid, - ToolbarItems.Chart, - ToolbarItems.Export, - ToolbarItems.SubTotal, - ToolbarItems.GrandTotal, - ToolbarItems.ConditionalFormatting, - ToolbarItems.NumberFormatting, - ToolbarItems.FieldList - }; - private List data { get; set; } - - protected override void OnInitialized() - { - data = ProductDetails.GetProductData(); - // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. - } - // Triggers when the UI action begins. - public void ActionBegin(PivotActionBeginEventArgs args) - { - if (args.ActionName == "Add new report" || args.ActionName == "Save current report") - { - args.Cancel = true; - } - } -} + private SfPivotFieldList fieldList; + private SfPivotView pivot; + private List toolbar = new List { + ToolbarItems.New, + ToolbarItems.Save, + ToolbarItems.Grid, + ToolbarItems.Chart, + ToolbarItems.Export, + ToolbarItems.SubTotal, + ToolbarItems.GrandTotal, + ToolbarItems.ConditionalFormatting, + ToolbarItems.NumberFormatting, + ToolbarItems.FieldList + }; + private List data { get; set; } + protected override void OnInitialized() + { + data = ProductDetails.GetProductData(); + // Bind the data source collection here. Refer "Assigning sample data to the pivot table" section in getting started for more details. + } + // Triggers when the UI action begins. + public void ActionBegin(PivotActionBeginEventArgs args) + { + if (args.ActionName == "Add new report" || args.ActionName == "Save current report") + { + args.Cancel = true; + } + } +} ``` ### OnActionComplete -The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) triggers when the UI actions such as as switching between pivot table and pivot chart, changing chart types, conditional formatting, exporting, etc. that are present in toolbar UI, is completed. This allows user to identify the current UI actions being completed at runtime. It has the following parameters: +The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionComplete) event triggers after a toolbar action, such as switching between a pivot table and pivot chart, changing chart types, applying conditional formatting, or exporting data, is completed. This event helps users track the completion of these actions at runtime. It includes the following parameters: -* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings) : It holds the current data source settings such as input data source, rows, columns, values, filters, format settings and so on. -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName) : It holds the name of the current action completed. The following are the UI actions and their names: +* [DataSourceSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_DataSourceSettings): Contains the current report settings, including the input data, rows, columns, values, filters, and format settings. +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionName): Indicates the name of the completed action. The table below lists the toolbar actions and their corresponding names: -|Action | Action Name| +| Action | Action Name | | ------ | --------- | -|New report | New report added | -|Save report | Report saved | -|Save as report | Report re-saved | -|Rename report | Report renamed | -|Remove report | Report removed | -|Report change | Report changed | -|Conditional Formatting | Conditionally formatted | -|Number Formatting| Number formatted| -|Export menu | PDF exported, Excel exported, CSV exported, JPG exported, PNG exported | -|Show field list | Field list closed | -|Show Table | Table view shown | -|Chart menu | Chart view shown | -|MDX query | MDX query copied | -|Sub-totals menu | Sub-totals hidden, Row sub-totals shown, Column sub-totals shown, Sub-totals shown | -|Grand-totals menu | Grand totals hidden, Row grand totals shown, Column grand totals shown, Grand totals shown | - -* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo) : It holds the unique information about the current UI action. For example, while adding new report, the event argument contains information such as report name and the action name. +| New report | New report added | +| Save report | Report saved | +| Save as report | Report re-saved | +| Rename report | Report renamed | +| Remove report | Report removed | +| Report change | Report changed | +| Conditional Formatting | Conditionally formatted | +| Number Formatting | Number formatted | +| Export menu | PDF exported, Excel exported, CSV exported | +| Show Fieldlist | Field list closed | +| Show Table | Table view shown | +| Chart menu | Chart view shown | +| MDX query | Open MDX query dialog | +| Sub-totals menu | Sub-totals hidden, Row sub-totals shown, Column sub-totals shown, Sub-totals shown | +| Grand totals menu | Grand totals hidden, Row grand totals shown, Column grand totals shown, Grand totals shown | + +* [ActionInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionCompleteEventArgs-1.html#Syncfusion_Blazor_PivotView_PivotActionCompleteEventArgs_1_ActionInfo): Provides specific details about the completed action, such as the report name when adding a new report. ```cshtml @using Syncfusion.Blazor.PivotView;
- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
@code{ @@ -2148,62 +2147,61 @@ The event [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ### OnActionFailure -The event [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) triggers when the current UI action fails to achieve the desired result. It has the following parameters: +The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewEvents-1.html#Syncfusion_Blazor_PivotView_PivotViewEvents_1_OnActionFailure) event occurs when a user action in the Pivot Table does not complete as expected. This event helps users understand what went wrong during interactions with the toolbar. It includes the following parameters: -* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName) : It holds the name of the current action failed. The following are the UI actions and their names: +* [ActionName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ActionName): Identifies which user action did not succeed. The table below lists the actions and their corresponding names: -|Action | Action Name| +| Action | Action Name | | ------ | --------- | -|New report | Add new report | -|Save report | Save current report | -|Save as report | Save as current report | -|Rename report | Rename current report | -|Remove report | Remove current report | -|Report change | Report change | -|Conditional Formatting | Open conditional formatting dialog | -|Number Formatting| Open number formatting dialog| -|Export menu | PDF export, Excel export, CSV export, JPG export, PNG export | -|Show field list | Open field list | -|Show Table | Show table view | -|Chart menu | Show chart view | -|MDX query | Open MDX query dialog | -|Sub-totals menu | Hide sub-totals, Show row sub-totals, Show column sub-totals, Show sub-totals | -|Grand totals menu | Hide grand totals, Show row grand totals, Show column grand totals, Show grand totals| - -* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo) : It holds the error information of the current UI action. - - +| New report | Add new report | +| Save report | Save current report | +| Save as report | Save as current report | +| Rename report | Rename current report | +| Remove report | Remove current report | +| Report change | Report change | +| Conditional Formatting | Open conditional formatting dialog | +| Number Formatting | Open number formatting dialog | +| Export menu | PDF export, Excel export, CSV export | +| Show Fieldlist | Open field list | +| Show Table | Show table view | +| Chart menu | Show chart view | +| MDX query | Open MDX query dialog | +| Sub-totals menu | Hide sub-totals, Show row sub-totals, Show column sub-totals, Show sub-totals | +| Grand totals menu | Hide grand totals, Show row grand totals, Show column grand totals, Show grand totals | + +* [ErrorInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotActionFailureEventArgs.html#Syncfusion_Blazor_PivotView_PivotActionFailureEventArgs_ErrorInfo): Provides details about the error that occurred for the specific user action. + ```cshtml @using Syncfusion.Blazor.PivotView;
- - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + +
@code{ diff --git a/blazor/pivot-table/tool-tip.md b/blazor/pivot-table/tool-tip.md index 9414bee073..6bcf6b4dba 100644 --- a/blazor/pivot-table/tool-tip.md +++ b/blazor/pivot-table/tool-tip.md @@ -9,7 +9,7 @@ documentation: ug # Tooltip in Blazor Pivot Table Component -The tooltip can be enabled or disabled by setting the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowTooltip) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.html) class to **true**. By default, tooltip is enabled in the pivot table. +The tooltip displays contextual information when users hover over value cells in the pivot table. It can be enabled or disabled by setting the [ShowTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_ShowTooltip) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.html) class to **true** or **false**. By default, tooltip is enabled in the pivot table and shows the cell value along with row and column header information. ```cshtml @using Syncfusion.Blazor.PivotView diff --git a/blazor/pivot-table/virtual-scrolling.md b/blazor/pivot-table/virtual-scrolling.md index b9cffb0a1b..374769584d 100644 --- a/blazor/pivot-table/virtual-scrolling.md +++ b/blazor/pivot-table/virtual-scrolling.md @@ -11,7 +11,11 @@ documentation: ug # Virtual scrolling in Blazor Pivot Table component -Allows to load the large amounts of data without any performance degradation by rendering rows and columns only in the current content viewport. Rest of the aggregated data will be brought into viewport dynamically based on the vertical or horizontal scroll position. This feature can be enabled by setting the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. +## Virtual Scrolling + +Virtual scrolling enables efficient handling of large datasets by rendering only the rows and columns visible in the current viewport. This approach prevents performance degradation when working with substantial amounts of data, as content refreshes dynamically during vertical or horizontal scrolling. This feature can be enabled by setting the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html#Syncfusion_Blazor_PivotView_SfPivotView_1_EnableVirtualization) property in [SfPivotView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.SfPivotView-1.html) class to **true**. + +N> The Virtualization and [Paging](./paging) features in the Pivot Table should not be enabled simultaneously. You can use either feature at a time, but not both together, as they are designed to handle data rendering differently and may conflict when used together. ```cshtml @using Syncfusion.Blazor.PivotView @@ -47,7 +51,7 @@ Allows to load the large amounts of data without any performance degradation by protected override void OnInitialized() { - this.data =PivotVirtualData.GetVirtualData().ToList(); + this.data = PivotVirtualData.GetVirtualData().ToList(); } public class PivotVirtualData @@ -87,11 +91,11 @@ Allows to load the large amounts of data without any performance degradation by ![Virtual Scrolling in Blazor PivotTable](images/blazor-pivottable-virtual-scroll.png) -## Virtual scrolling with single page mode +## Virtual Scrolling with Single Page Mode -When virtual scrolling is enabled, the pivot table renders not only the current view page, but also the previous and next pages by default. This default behavior, however, can cause performance delays when dealing with a large number of rows and columns. This is because the same number of rows and columns from adjacent pages are also processed, resulting in additional computational load. This performance constraint can be avoided by setting the [AllowSinglePage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewVirtualScrollSettings.html#Syncfusion_Blazor_PivotView_PivotViewVirtualScrollSettings_AllowSinglePage) property to **true** within the [PivotViewVirtualScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewVirtualScrollSettings.html). +When virtual scrolling is enabled, the Pivot Table renders not only the current view page but also the adjacent previous and next pages by default. While this approach supports smooth navigation, it can increase computational load and reduce performance when working with extensive datasets, as additional rows and columns from surrounding pages are processed. -Enabling this property causes the pivot table to render only the rows and columns that are relevant to the current view page during virtual scrolling. This optimization significantly improves the performance of the pivot table, particularly in Blazor WASM applications, during initial rendering and when performing UI actions such as drill up/down, sorting, filtering, and more. +To optimize performance, set the [AllowSinglePage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewVirtualScrollSettings.html#Syncfusion_Blazor_PivotView_PivotViewVirtualScrollSettings_AllowSinglePage) property to **true** within the [PivotViewVirtualScrollSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewVirtualScrollSettings.html). Enabling this property ensures that only the rows and columns for the current view page are rendered during virtual scrolling. This significantly enhances the performance of the Pivot Table, particularly in Blazor WASM applications, especially during initial rendering and during user interactions such as drilling up, drilling down, sorting, filtering, and other operations. ```cshtml @using Syncfusion.Blazor.PivotView @@ -120,7 +124,7 @@ Enabling this property causes the pivot table to render only the rows and column private List data { get; set; } protected override void OnInitialized() { - this.data =PivotVirtualData.GetVirtualData().ToList(); + this.data = PivotVirtualData.GetVirtualData().ToList(); } public class PivotVirtualData @@ -158,23 +162,20 @@ Enabling this property causes the pivot table to render only the rows and column ``` -**Limitations for virtual scrolling** +## Limitations for Virtual Scrolling * In virtual scrolling, the [ColumnWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_ColumnWidth) property in [GridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html) should be in pixels, and percentage values are not accepted. -* Features such as auto fit, column resizing, text wrapping, and setting specific column widths through events can dynamically affect the row height and column width in the pivot table at runtime. However, these changes are not considered in the scroller calculations, particularly with large datasets. This can lead to performance issues and problems with UI functionality during scrolling. Therefore, it is not recommended to use these features alongside virtualization in the pivot table. -* Grouping, which takes additional time to splitting the raw items into the provided format. +* Features such as auto fit, column resizing, text wrapping, and setting specific column widths through events can dynamically affect the row height and column width in the Pivot Table at runtime. However, these changes are not considered in the scroller calculations, particularly with large datasets. This can lead to performance issues and problems with UI functionality during scrolling. Therefore, it is not recommended to use these features alongside virtualization in the Pivot Table. +* Grouping, which takes additional time to split the raw items into the provided format. * Date Formatting, which takes additional time to convert date format. -* Date Formatting with sorting, here additionally full date time format should be framed to perform sorting along with the provided date format which lags the performance. -* When using OLAP data, subtotals and grand totals are only displayed when measures are bound at the last position in the [rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows) or [columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns) axis. Otherwise, the data from the pivot table will be shown without summary totals. -* Even if virtual scrolling is enabled, not only is the current view port data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh. **Note:** If the pivot table's width and height are large, the loading data count in the current, previous, and next viewport (pages) will also increase, affecting performance. - -**Overcoming the browser's height limitation** - -You can load millions of records in the Blazor Pivot Table by using virtual scrolling, where the pivot table loads and renders rows on-demand while scrolling vertically. As a result, Pivot Table lightens the browser’s load by minimizing the DOM elements and rendering elements visible in the viewport. The height of the table is calculated using the Total Records Count * [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property. +* Date Formatting with sorting, here additionally full date time format should be framed to perform sorting along with the provided date format, which lags the performance. +* When using OLAP data, subtotals and grand totals are only displayed when measures are bound at the last position in the [rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Rows) or [columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewDataSourceSettings-1.html#Syncfusion_Blazor_PivotView_PivotViewDataSourceSettings_1_Columns) axis. Otherwise, the data from the Pivot Table will be shown without summary totals. +* Even if virtual scrolling is enabled, not only is the current viewport data retrieved, but also the data for the immediate previous page and the immediate next page. As a result, when the end user scrolls slightly ahead or behind, the next or previous page data is displayed immediately without requiring a refresh. **Note:** If the Pivot Table's width and height are large, the loading data count in the current, previous, and next viewport (pages) will also increase, affecting performance. -The browser has some maximum pixel height limitations for the scroll bar element. The content placed above the maximum height can’t be scrolled if the element height is greater than the browser’s maximum height limit. The browser height limit affects the virtual scrolling of the pivot table. Even when a large number of records are bound to the pivot table, it can only display the records until the maximum height limit of the browser. Once the browser’s height limit is reached while scrolling, you won’t be able to scroll further to view the remaining records. +## Overcoming the browser's height limitation -This maximum pixel height limitation differs between browsers and is entirely dependent on the browser's default behavior. So, it is best to set the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) to keep the virtual scroll bar element's height in the pivot table within the browser's maximum height limit. +The Pivot Table supports loading millions of records using virtual scrolling, where rows are loaded and rendered on-demand during vertical scrolling. This approach reduces the browser’s load by minimizing DOM elements, displaying only those visible in the viewport. The total height of the Pivot Table is determined by multiplying the total record count by the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property in [PivotViewGridSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html). +However, browsers impose a maximum pixel height limit on scroll bar elements, which can restrict scrolling if the content exceeds this limit. When the Pivot Table’s height surpasses the browser’s maximum height, users may not be able to scroll further to view additional records. This limitation varies across browsers and depends on their default behavior. -> You can 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. \ No newline at end of file +To address this, set the [RowHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.PivotView.PivotViewGridSettings.html#Syncfusion_Blazor_PivotView_PivotViewGridSettings_RowHeight) property to a value that keeps the virtual scroll bar’s height within the browser’s maximum limit. This ensures users can scroll through all records without interruption, maintaining smooth performance. \ No newline at end of file