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/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/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