From b701c9bc2ef785ad32f60175f2769ff720a05f7d Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Wed, 8 Oct 2025 13:47:51 +0530 Subject: [PATCH 1/3] 983838: Updated the UG content and example changes in the TreeMap control. --- blazor/treemap/accessibility.md | 30 +- blazor/treemap/color-mapping.md | 79 +- blazor/treemap/data-binding.md | 326 +++--- blazor/treemap/drill-down.md | 51 +- blazor/treemap/events.md | 102 +- .../place-treemap-inside-other-components.md | 955 +++++++++--------- blazor/treemap/internationalization.md | 34 +- blazor/treemap/labels.md | 54 +- blazor/treemap/layout.md | 100 +- blazor/treemap/leaf-item.md | 63 +- blazor/treemap/legend.md | 234 +++-- blazor/treemap/levels.md | 63 +- blazor/treemap/methods.md | 79 +- blazor/treemap/print-and-export.md | 23 +- blazor/treemap/selection-and-highlight.md | 39 +- blazor/treemap/tooltip.md | 49 +- 16 files changed, 1237 insertions(+), 1044 deletions(-) diff --git a/blazor/treemap/accessibility.md b/blazor/treemap/accessibility.md index 671331c05f..5f4cbda696 100644 --- a/blazor/treemap/accessibility.md +++ b/blazor/treemap/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more. +description: Check out and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more. platform: Blazor control: TreeMap documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor TreeMap Component -The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component follows commonly used accessibility guidelines and standards, such as [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). +The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component adheres to widely adopted accessibility standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles). -The accessibility compliance for the Blazor TreeMap component is outlined below. +The accessibility compliance for the Blazor TreeMap component is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -39,28 +39,28 @@ The accessibility compliance for the Blazor TreeMap component is outlined below. ## WAI-ARIA attributes -The Blazor TreeMap component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following `WAI-ARIA` attributes are used in the TreeMap component: +The Blazor TreeMap component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to support accessibility. The following ARIA attributes are used in the TreeMap component: | Attributes | Purpose | | --- | --- | -| `role=region` | It specifies the TreeMap areas that do not support interactive functions like selection and highlight. | -| `role=button` | It specifies the TreeMap areas where interactive functions such as selection and highlight are available. | -| `aria-label` | Provides an accessible name for the title, subtitle, data labels, legend title, and legend item labels. | +| `role=region` | Identifies TreeMap areas without interactive behavior such as selection or highlight. | +| `role=button` | Identifies TreeMap areas where interactive behavior such as selection or highlight is available. | +| `aria-label` | Provides accessible names for the title, subtitle, data labels, legend title, and legend item labels. | ## Screen reading in TreeMap -Accessibility in the Blazor TreeMap component ensures that all users, regardless of ability or disability, can use screen reading. The following TreeMap elements will be read aloud using screen reading software, such as Narrator for Windows. +Accessibility support in the Blazor TreeMap component enables screen readers to announce relevant content. The following TreeMap elements are read by screen readers such as Narrator on Windows. | Elements | Description | | --- | --- | -| Data labels | Reads the labels displayed on leaf items of the TreeMap. | -| Title | Reads the title in the TreeMap. | -| Subtitle | Reads the title below the main title content in the TreeMap. | -| Legend title | Reads the title of the legend in the TreeMap. | -| Legend item label | Reads the label of the legend item in the TreeMap. | +| Data labels | Announces the labels displayed on leaf items of the TreeMap. | +| Title | Announces the TreeMap title. | +| Subtitle | Announces the subtitle below the main title. | +| Legend title | Announces the legend title in the TreeMap. | +| Legend item label | Announces the label of each legend item in the TreeMap. | ## Ensuring accessibility -The Blazor TreeMap component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing. +The Blazor TreeMap component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing. -The accessibility compliance of the TreeMap component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate the accessibility of the TreeMap component with accessibility tools. +The accessibility compliance of the TreeMap component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate TreeMap accessibility with testing tools. diff --git a/blazor/treemap/color-mapping.md b/blazor/treemap/color-mapping.md index 2dc1cc6fb1..0292488e7d 100644 --- a/blazor/treemap/color-mapping.md +++ b/blazor/treemap/color-mapping.md @@ -1,7 +1,7 @@ --- layout: post title: Color Mapping in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Color Mapping in Syncfusion Blazor TreeMap component and much more. +description: Check out and learn how to configure Color Mapping in the Syncfusion Blazor TreeMap component and much more. platform: Blazor control: TreeMap documentation: ug @@ -9,10 +9,11 @@ documentation: ug # Color Mapping in Blazor TreeMap Component -Color mapping is used to customize the color for each group or item based on the specified types. The following options are available to customize the group and leaf items in the TreeMap component. +Color mapping customizes group and leaf item colors based on defined mapping types. The following options allow customizing group and leaf items in the TreeMap component. ## Range color mapping +Range color mapping applies colors to items based on numeric ranges of a specified value, defined by the [RangeColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RangeColorValuePath) property. ```cshtml @using Syncfusion.Blazor.TreeMap @@ -32,25 +33,28 @@ Color mapping is used to customize the color for each group or item based on the public string FruitName { get; set; } public double Count { get; set; } }; + public List Fruits = new List { - new Fruit { FruitName="Apple", Count=5000 }, - new Fruit { FruitName="Mango", Count=3000 }, - new Fruit { FruitName="Orange", Count=2300 }, - new Fruit { FruitName="Banana", Count=500 }, - new Fruit { FruitName="Grape", Count=4300 }, - new Fruit { FruitName="Papaya", Count=1200 }, - new Fruit { FruitName="Melon", Count=4500 } + new Fruit { FruitName = "Apple", Count = 5000 }, + new Fruit { FruitName = "Mango", Count = 3000 }, + new Fruit { FruitName = "Orange", Count = 2300 }, + new Fruit { FruitName = "Banana", Count = 500 }, + new Fruit { FruitName = "Grape", Count = 4300 }, + new Fruit { FruitName = "Papaya", Count = 1200 }, + new Fruit { FruitName = "Melon", Count = 4500 } }; } + ``` ![Blazor TreeMap with Color Mapping](images/Colormapping/blazor-treemap-color-mapping.png) ## Equal color mapping -Equal color mapping is used to fill colors to each item by specifying equal value present in the data source, that can be specified in the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property. +Equal color mapping fills items with colors by matching equal values from the data source, specified by the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -71,24 +75,26 @@ Equal color mapping is used to fill colors to each item by specifying equal valu public string Brand { get; set; } }; public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232 }, - new Car { Name="EcoSport", Brand="Ford", Count=121 }, - new Car { Name="Swift", Brand="Maruti", Count=143 }, - new Car { Name="Baleno", Brand="Maruti", Count=454 }, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 }, - new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 }, - new Car { Name="RS7 Sportback", Brand="Audi", Count=523 } + new Car { Name = "Mustang", Brand = "Ford", Count = 232 }, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121 }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143 }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454 }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 }, + new Car { Name = "A3 Cabriolet", Brand = "Audi",Count = 123 }, + new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 } }; } + ``` ![Blazor TreeMap with Equal Color Mapping](images/Colormapping/blazor-treemap-equal-color-mapping.png) ## Desaturation color mapping -Desaturation color mapping is used to apply colors to the items based on the [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and the [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). +Desaturation color mapping applies colors to items based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) settings in [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -99,17 +105,19 @@ Desaturation color mapping is used to apply colors to the items based on the [Mi + ``` -N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**. +N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values. ![Blazor TreeMap with Desaturation Color Mapping](images/Colormapping/blazor-treemap-desaturation-color-mapping.png) ## Desaturation with multiple colors -Multiple colors are used to provide gradient effect to the TreeMap items based on the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges and specify the **n** number of colors in the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property. +Multiple colors provide a gradient effect to TreeMap items based on [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges. Specify multiple colors in the [ColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -120,33 +128,38 @@ Multiple colors are used to provide gradient effect to the TreeMap items based o + ``` -N> Refer to the [code block](#range-color-mapping) to know about the property value of **Fruits**. +N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values. ![Multiple Color Mapping in Blazor TreeMap with Desaturation](images/Colormapping/blazor-treemap-desaturation-with-multiple-color.png) ## Palette color mapping +Palette color mapping assigns colors to items from a predefined set of colors specified using the [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Palette) property. ```cshtml + @using Syncfusion.Blazor.TreeMap + ``` -N> Refer to the [code block](#equal-color-mapping) to know about the property value of **Cars**. +N> See the [equal color mapping](#equal-color-mapping) section for the **Cars** data model and values. ![Blazor TreeMap with Palette Color Mapping](images/Colormapping/blazor-treemap-palette-color-mapping.png) ## Color for items excluded from color mapping -Get the excluded ranges from data source using the color mapping and apply the specific color to those items, without specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and the [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties. +Retrieve excluded ranges from the data source and apply a specific color to those items without specifying [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -158,9 +171,10 @@ Get the excluded ranges from data source using the color mapping and apply the s + ``` -N> Refer to the [code block](#range-color-mapping) to know about the property value of the **Fruits**. +N> See the [range color mapping](#range-color-mapping) section for the **Fruits** data model and values. ![Blazor TreeMap with Color Mapping for Excluded Items](images/Colormapping/blazor-treemap-color-for-exclude-item.png) @@ -168,6 +182,7 @@ N> Refer to the [code block](#range-color-mapping) to know about the property va ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -182,16 +197,18 @@ N> Refer to the [code block](#range-color-mapping) to know about the property va public double Count { get; set; } public string Color { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000, Color = "red" }, - new Fruit { Name="Mango", Count=3000, Color="blue" }, - new Fruit { Name="Orange", Count=2300, Color="green" }, - new Fruit { Name="Banana", Count=500 , Color="yellow"}, - new Fruit { Name="Grape", Count=4300 , Color="orange"}, - new Fruit { Name="Papaya",Count=1200 , Color="pink"}, - new Fruit { Name="Melon", Count=4500, Color="violet" } + new Fruit { Name = "Apple", Count = 5000, Color = "red" }, + new Fruit { Name = "Mango", Count = 3000, Color = "blue" }, + new Fruit { Name = "Orange", Count = 2300, Color = "green" }, + new Fruit { Name = "Banana", Count = 500 , Color = "yellow"}, + new Fruit { Name = "Grape", Count = 4300 , Color = "orange"}, + new Fruit { Name = "Papaya",Count = 1200 , Color = "pink"}, + new Fruit { Name = "Melon", Count = 4500, Color = "violet" } }; } + ``` ![Binding Colors in Blazor TreeMap](images/Colormapping/blazor-treemap-color-binding.png) diff --git a/blazor/treemap/data-binding.md b/blazor/treemap/data-binding.md index dd28d2f3d1..42fc748a45 100644 --- a/blazor/treemap/data-binding.md +++ b/blazor/treemap/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data Binding in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor TreeMap component and much more. +description: Check out and learn here all about Data Binding in Syncfusion Blazor TreeMap component and much more. platform: Blazor control: TreeMap documentation: ug @@ -11,13 +11,14 @@ documentation: ug ## Populate data -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property accepts a collection of values as input. For example, a list of objects can be provided as input. Data can be given as either flat or hierarchical collection to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property. +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property accepts a collection of values. A list of objects can be provided as input. Data can be supplied as either a flat or a hierarchical collection to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property. ### Flat data -The following code example shows, how to bind a flat collection as data source to the TreeMap component. +The following example shows how to bind a flat collection as the data source to the TreeMap component. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -33,28 +34,31 @@ The following code example shows, how to bind a flat collection as data source t public double Percentage { get; set; } public double Rank { get; set; } }; + public List GrowthReports = new List { - new GDPReport {Country = "United States", GDP=17946, Percentage=11.08, Rank=1}, - new GDPReport {Country="China", GDP=10866, Percentage= 28.42, Rank=2}, - new GDPReport {Country="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new GDPReport {Country="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new GDPReport {Country="United Kingdom", GDP=2848, Percentage=8.28, Rank=5}, - new GDPReport {Country="France", GDP=2421, Percentage=-9.69, Rank=6}, - new GDPReport {Country="India", GDP=2073, Percentage=13.65, Rank=7}, - new GDPReport {Country="Italy", GDP=1814, Percentage=-12.45, Rank=8}, - new GDPReport {Country="Brazil", GDP=1774, Percentage=-27.88, Rank=9}, - new GDPReport {Country="Canada", GDP=1550, Percentage=-15.02, Rank=10} + new GDPReport { Country = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new GDPReport { Country = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new GDPReport { Country = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new GDPReport { Country = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new GDPReport { Country = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new GDPReport { Country = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new GDPReport { Country = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new GDPReport { Country = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new GDPReport { Country = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new GDPReport { Country = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } + ``` ![Blazor TreeMap with Flat Data](images/Databinding/blazor-treemap-flat-data.png) ### Hierarchical data -The following code example shows, how to bind a hierarchical collection as data source to the TreeMap component. +The following example shows how to bind a hierarchical collection as the data source to the TreeMap component. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -71,7 +75,7 @@ The following code example shows, how to bind a hierarchical collection as data -@code{ +@code { public List PopulationReport { get; set; } = new List { new { @@ -178,6 +182,7 @@ The following code example shows, how to bind a hierarchical collection as data } }; } + ``` ![Blazor TreeMap with Hierarchical Data](images/Databinding/blazor-treemap-hierarchical-data.png) @@ -186,9 +191,10 @@ The following code example shows, how to bind a hierarchical collection as data ### Fetching data from the collection -The following code example shows, how to bind a `IEnumerable` object to the TreeMap component as a data source. +The following example shows how to bind an `IEnumerable` object to the TreeMap component as a data source. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -205,31 +211,35 @@ The following code example shows, how to bind a `IEnumerable` object to the Tree public double Percentage { get; set; } public int Rank { get; set; } }; + public string[] Palette = new string[] { "#87CEFA", "#87CEEB" }; + public List GrowthReports = new List { - new GDPReport {CountryName="United States", GDP=17946, Percentage=11.08, Rank=1}, - new GDPReport {CountryName="China", GDP=10866, Percentage= 28.42, Rank=2}, - new GDPReport {CountryName="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new GDPReport {CountryName="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new GDPReport {CountryName="United Kingdom", GDP=2848, Percentage=8.28, Rank=5}, - new GDPReport {CountryName="France", GDP=2421, Percentage=-9.69, Rank=6}, - new GDPReport {CountryName="India", GDP=2073, Percentage=13.65, Rank=7}, - new GDPReport {CountryName="Italy", GDP=1814, Percentage=-12.45, Rank=8}, - new GDPReport {CountryName="Brazil", GDP=1774, Percentage=-27.88, Rank=9}, - new GDPReport {CountryName="Canada", GDP=1550, Percentage=-15.02, Rank=10} + new GDPReport { CountryName = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new GDPReport { CountryName = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new GDPReport { CountryName = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new GDPReport { CountryName = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new GDPReport { CountryName = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new GDPReport { CountryName = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new GDPReport { CountryName = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new GDPReport { CountryName = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new GDPReport { CountryName = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new GDPReport { CountryName = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } + ``` ![Blazor TreeMap with Local Data](images/Databinding/blazor-treemap-local-data.png) ### Fetching data from the JSON file -Read the JSON file data and it can be converted to the C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property of the TreeMap component. +Read the JSON file, convert it to a C# object, and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property of the TreeMap component. -The `Http.GetJsonAsync` method is used in the `OnInitializedAsync` life cycle method to load the JSON file data. +The `Http.GetFromJsonAsync` method is used in the `OnInitializedAsync` lifecycle method to load the JSON file data. ```cshtml + @using Syncfusion.Blazor.TreeMap @inject NavigationManager Navigation @inject HttpClient Http; @@ -245,12 +255,8 @@ else } -@code{ - public List GrowthReports { get; set; } - protected async override Task OnInitializedAsync() - { - GrowthReports = await Http.GetFromJsonAsync>(Navigation.ToAbsoluteUri("sample-data/product-growth.json")); - } + +@code { public class GDPReport { public string Country { get; set; } @@ -258,24 +264,33 @@ else public double Percentage { get; set; } public int Rank { get; set; } }; + + public List GrowthReports { get; set; } + + protected async override Task OnInitializedAsync() + { + GrowthReports = await Http.GetFromJsonAsync>(Navigation.ToAbsoluteUri("sample-data/product-growth.json")); + } } + ``` ![Loading Blazor TreeMap Data from JSON File](images/Databinding/blazor-treemap-flat-data.png) -N> Refer the data values for [product_growth](https://www.syncfusion.com/downloads/support/directtrac/general/ze/product-growth-360857189) here. +N> See the data values for [product_growth](https://www.syncfusion.com/downloads/support/directtrac/general/ze/product-growth-360857189). ## Remote data -To interact with the remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/#odata-adaptor) for remote data-binding. +To interact with a remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/#odata-adaptor) for remote data binding. -N> If [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) is used for data binding then the **TValue** must be provided explicitly to the TreeMap component. +N> When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for data binding, the **TValue** must be provided explicitly to the TreeMap component. ### Binding with OData services -[OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is a standardized protocol for creating and consuming data. User can retrieve data from [OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +[OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) is a standardized protocol for creating and consuming data. Data can be retrieved from an OData service using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @using Syncfusion.Blazor.Data @@ -292,8 +307,9 @@ N> If [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Da -@code{ +@code { public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; + public class OrderDetails { public int OrderID { get; set; } @@ -303,17 +319,19 @@ N> If [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Da public double Freight { get; set; } } } + ``` ![Data Binding with OData Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odata.png) ### Binding with OData V4 services -The [OData V4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) is an improved version of [OData](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) protocols, and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) can be used to retrieve and consume [OData V4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) services. +The [OData V4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) protocol is an improved version of OData, and the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) can be used to retrieve and consume [OData V4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) services. -N> For more details on OData V4 services, refer to the [OData documentation](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) to bind [OData V4](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) service using the [OData V4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor). +N> For details on OData V4 services, refer to the [OData V4 adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) documentation. ```cshtml + @using Syncfusion.Blazor.TreeMap @using Syncfusion.Blazor.Data @@ -328,8 +346,9 @@ N> For more details on OData V4 services, refer to the [OData documentation](htt -@code{ +@code { public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; + public class OrderDetails { public int OrderID { get; set; } @@ -339,15 +358,17 @@ N> For more details on OData V4 services, refer to the [OData documentation](htt public double Freight { get; set; } } } + ``` ![Data Binding with OData V4 Service in Blazor TreeMap](images/Databinding/blazor-treemap-binding-with-odatav4.png) ### Web API -Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?no-cache=1#web-api-adaptor) to bind TreeMap with Web API, created using OData endpoint. +Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?no-cache=1#web-api-adaptor) to bind the TreeMap to an ASP.NET Web API endpoint. ```cshtml + @using Syncfusion.Blazor.TreeMap @using Syncfusion.Blazor.Data @@ -364,8 +385,9 @@ Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?n -@code{ +@code { public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; + public class OrderDetails { public int OrderID { get; set; } @@ -375,137 +397,146 @@ Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?n public double Freight { get; set; } } } + ``` ![Data binding with Web API Adaptor in Blazor TreeMap](images/Databinding/blazor-treemap-webapiadaptor.png) ## Entity Framework -Entity Framework acts as a modern object-database mapped for .NET. This section explains, how to consume data from the **Microsoft SQL Server** database and bind it to the TreeMap component. +Entity Framework is an object-relational mapper (ORM) for .NET. This section explains how to consume data from a **Microsoft SQL Server** database and bind it to the TreeMap component. ### Create DBContext class -The first step is to create a DBContext class called **OrderContext** for establishing connection to a Microsoft SQL Server database. +Create a DbContext class named **OrderContext** to establish a connection to a Microsoft SQL Server database. ```csharp - using Microsoft.EntityFrameworkCore; - using System; - using System.Collections.Generic; - using System.Linq; - using System.Threading.Tasks; - using EFTreeMap.Data; - - namespace EFTreeMap.Data + +using Microsoft.EntityFrameworkCore; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using EFTreeMap.Data; + +namespace EFTreeMap.Data +{ + public class OrderContext : DbContext { - public class OrderContext : DbContext - { - public virtual DbSet Orders { get; set; } + public virtual DbSet Orders { get; set; } - protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) + protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) + { + if (!optionsBuilder.IsConfigured) { - if (!optionsBuilder.IsConfigured) - { - // Configures the context to connect to a Microsoft SQL Serve database - optionsBuilder.UseSqlServer(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename='D:\blazor\EFTreeMap\App_Data\NORTHWND.MDF';Integrated Security=True;Connect Timeout=30"); - } + // Configures the context to connect to a Microsoft SQL Serve database + optionsBuilder.UseSqlServer(@"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename='D:\blazor\EFTreeMap\App_Data\NORTHWND.MDF';Integrated Security=True;Connect Timeout=30"); } } - public class Order - { - [Key] - public int? OrderID { get; set; } - [Required] - public string CustomerID { get; set; } - [Required] - public int EmployeeID { get; set; } - } } + public class Order + { + [Key] + public int? OrderID { get; set; } + [Required] + public string CustomerID { get; set; } + [Required] + public int EmployeeID { get; set; } + } +} + ``` ### Create data access layer to perform data operation -Now create a class called **OrderDataAccessLayer**, which acts as a data access layer to retrieve the records from the database table. +Create a class named **OrderDataAccessLayer** that acts as a data access layer to retrieve records from the database table. ```csharp - using Microsoft.EntityFrameworkCore; - using System; - using System.Collections.Generic; - using System.Linq; - using System.Threading.Tasks; - using EFTreeMap.Data; - - namespace EFTreeMap.Data + +using Microsoft.EntityFrameworkCore; +using System; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using EFTreeMap.Data; + +namespace EFTreeMap.Data +{ + public class OrderDataAccessLayer { - public class OrderDataAccessLayer + OrderContext db = new OrderContext(); + //To Get all Orders details + public DbSet GetAllOrders() { - OrderContext db = new OrderContext(); - //To Get all Orders details - public DbSet GetAllOrders() + try { - try - { - return db.Orders; - } - catch - { - throw; - } + return db.Orders; + } + catch + { + throw; } } } +} + ``` ### Creating Web API Controller -A Web API Controller must be created, which allows the TreeMap to directly consume data from the Entity Framework. +Create a Web API controller that allows the TreeMap to consume data directly from Entity Framework. ```csharp - using System; - using System.Collections; - using System.Collections.Generic; - using System.Linq; - using System.Threading.Tasks; - using Microsoft.AspNetCore.Http; - using Microsoft.AspNetCore.Mvc; - using Microsoft.Extensions.Primitives; - using EFTreeMap.Data; - - namespace EFTreeMap.Controller + +using System; +using System.Collections; +using System.Collections.Generic; +using System.Linq; +using System.Threading.Tasks; +using Microsoft.AspNetCore.Http; +using Microsoft.AspNetCore.Mvc; +using Microsoft.Extensions.Primitives; +using EFTreeMap.Data; + +namespace EFTreeMap.Controller +{ + [Route("api/[controller]")] + [ApiController] + public class DefaultController : ControllerBase { - [Route("api/[controller]")] - [ApiController] - public class DefaultController : ControllerBase + OrderDataAccessLayer db = new OrderDataAccessLayer(); + + [HttpGet] + public object Get() { - OrderDataAccessLayer db = new OrderDataAccessLayer(); - [HttpGet] - public object Get() + IQueryable data = db.GetAllOrders().AsQueryable(); + var count = data.Count(); + var queryString = Request.Query; + if (queryString.Keys.Contains("$inlinecount")) { - IQueryable data = db.GetAllOrders().AsQueryable(); - var count = data.Count(); - var queryString = Request.Query; - if (queryString.Keys.Contains("$inlinecount")) - { - StringValues Skip; - StringValues Take; - int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; - int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); - return new { Items = data.Skip(skip).Take(top), Count = count }; - } - else - { - return data; - } + StringValues Skip; + StringValues Take; + int skip = (queryString.TryGetValue("$skip", out Skip)) ? Convert.ToInt32(Skip[0]) : 0; + int top = (queryString.TryGetValue("$top", out Take)) ? Convert.ToInt32(Take[0]) : data.Count(); + return new { Items = data.Skip(skip).Take(top), Count = count }; + } + else + { + return data; } } } +} + ``` ### Add Web API Controller services in Startup.cs -Open the **Startup.cs** file, add services and endpoints required for the Web API Controller as follows. +Open the **Startup.cs** file and add the services and endpoints required for the Web API controller as follows. ```csharp + using Newtonsoft.Json.Serialization; namespace BlazorApplication @@ -540,37 +571,39 @@ namespace BlazorApplication } } } + ``` ### Configure treemap component -Configure the TreeMap to bind data using either [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +Configure the TreeMap to bind data by using either the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property or [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). -For instance, bind the data directly from the **OrderDataAccessLayer** class and assign to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property. +For instance, bind data directly from the **OrderDataAccessLayer** class and assign it to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property. ```csharp - @inject OrderDataAccessLayer OrderData +@inject OrderDataAccessLayer OrderData - @using EFTreeMap.Data - @using Syncfusion.Blazor.TreeMap +@using EFTreeMap.Data +@using Syncfusion.Blazor.TreeMap - - - - - - - - - + + + + + + + + + + +@code { + public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; +} - @code{ - public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; - } ``` -On the other hand, to configure the TreeMap using Web API, provide the appropriate endpoint URL in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Here, [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) is used to interact with the Web API to consume data from the Entity Framework appropriately. +On the other hand, to configure the TreeMap by using a Web API, provide the endpoint URL in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with an [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Here, [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) is used to interact with the Web API to consume data from Entity Framework. ```cshtml @using Syncfusion.Blazor.TreeMap @@ -588,7 +621,8 @@ On the other hand, to configure the TreeMap using Web API, provide the appropria -@code{ +@code { public string[] Palette = new string[] { "#C33764", "#AB3566", "#993367", "#853169", "#742F6A", "#632D6C", "#532C6D", "#412A6F", "#312870", "#1D2671" }; } + ``` \ No newline at end of file diff --git a/blazor/treemap/drill-down.md b/blazor/treemap/drill-down.md index 186c076c36..b7c219fbfa 100644 --- a/blazor/treemap/drill-down.md +++ b/blazor/treemap/drill-down.md @@ -1,7 +1,7 @@ --- layout: post title: Drill-down in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Drill-down in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn how to configue and make use of Drill-down in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Drill-down in Blazor TreeMap Component -The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component supports drill-down to expose the hierarchy, achieved by clicking a node. If an item is clicked in the TreeMap, it will be moved to the next level or sub level hierarchy and returned back to the previous level by clicking the node. +The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component supports drill-down to explore hierarchical data by selecting a node. Selecting an item navigates to its child level, and selecting again on the breadcrumb or node returns to the previous level. ## Perform drill-down -The TreeMap items can be drilled by setting the [EnableDrillDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableDrillDown) property to **true**. +TreeMap items can be drilled by setting the [EnableDrillDown](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableDrillDown) property to **true**. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -35,7 +36,7 @@ The TreeMap items can be drilled by setting the [EnableDrillDown](https://help.s -@code{ +@code { public class Employee { public string Country { get; set; } @@ -43,28 +44,31 @@ The TreeMap items can be drilled by setting the [EnableDrillDown](https://help.s public string JobGroup { get; set; } public int EmployeeCount { get; set; } }; + public List Employees = new List { - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Executive", EmployeeCount= 20 }, - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Analyst", EmployeeCount= 30 }, - new Employee { Country= "USA", JobDescription= "Marketing", EmployeeCount= 40 }, - new Employee { Country= "USA", JobDescription= "Management", EmployeeCount= 80 }, - new Employee { Country= "India", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 100 }, - new Employee { Country= "India", JobDescription= "HR Executives", EmployeeCount= 30 }, - new Employee { Country= "India", JobDescription= "Accounts", EmployeeCount= 40 }, - new Employee { Country= "UK", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 30 }, - new Employee { Country= "UK", JobDescription= "HR Executives", EmployeeCount= 50 }, - new Employee { Country= "UK", JobDescription= "Accounts", EmployeeCount= 60 } + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Executive", EmployeeCount = 20 }, + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Analyst", EmployeeCount = 30 }, + new Employee { Country = "USA", JobDescription = "Marketing", EmployeeCount = 40 }, + new Employee { Country = "USA", JobDescription = "Management", EmployeeCount = 80 }, + new Employee { Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 100 }, + new Employee { Country = "India", JobDescription = "HR Executives", EmployeeCount = 30 }, + new Employee { Country = "India", JobDescription = "Accounts", EmployeeCount = 40 }, + new Employee { Country = "UK", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 30 }, + new Employee { Country = "UK", JobDescription = "HR Executives", EmployeeCount = 50 }, + new Employee { Country = "UK", JobDescription = "Accounts", EmployeeCount = 60 } }; } + ``` ![Blazor TreeMap with Drill-down](images/drilldown/blazor-treemap-drill-down.png) ## On-demand data loading -All the child items are rendered during the normal drill-down process, and visible at the initial rendering of the TreeMap. But on-demand data loading, it will not render child items at initial rendering, and child nodes will be rendered during the drill-down process by setting the [DrillDownView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DrillDownView) property to **true**. +During standard drill-down, all child items are available at initial render. With on-demand data loading, child nodes are created only when drilling into a parent. Enable this behavior by setting the [DrillDownView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DrillDownView) property to **true**. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -83,17 +87,19 @@ All the child items are rendered during the normal drill-down process, and visib + ``` -N> Refer to the [code block](#perform-drill-down) to know about the property value of **Employees**. +N> Refer to the **Employees** data source defined in the [Perform drill-down](#perform-drill-down) section. ![Blazor TreeMap with On Demand Data Loading](images/drilldown/blazor-treemap-on-demand-data-loading.png) ## Breadcrumb support -TreeMap items are drilled, up to any level of parent using breadcrumb navigation and the level from root parent to current level is displayed at the top of item layout. It can be enabled by using the [EnableBreadcrumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableBreadcrumb) property to **true** and customize the breadcrumb connector using the [BreadcrumbConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_BreadcrumbConnector) property. By default, **-**(hyphen) is the connector. +Breadcrumb navigation indicates the path from the root to the current level and supports drilling back to any parent level. Enable it by setting [EnableBreadcrumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableBreadcrumb) to **true**. Customize the separator using [BreadcrumbConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_BreadcrumbConnector). The default connector is a hyphen (-). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -112,17 +118,19 @@ TreeMap items are drilled, up to any level of parent using breadcrumb navigation + ``` -N> Refer to the [code block](#perform-drill-down) to know about the property value of the **Employees**. +N> Refer to the **Employees** data source defined in the [Perform drill-down](#perform-drill-down) section. ![Blazor TreeMap with Breadcrumb](images/drilldown/blazor-treemap-breadcrumb.png) ## Initial drill-down -TreeMap items can be drilled on initial rendering and it can be enabled by specifying the item index in the [GroupIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupIndex) property and level order name in the [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupName) property of the [TreeMapInitialDrillSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html). +Initial drill-down navigates to a specified item and level during the first render. Configure the item index using [GroupIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupIndex) and the level name using [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupName) in [TreeMapInitialDrillSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -142,8 +150,9 @@ TreeMap items can be drilled on initial rendering and it can be enabled by speci + ``` -N> Refer to the [code block](#perform-drill-down) to know about the property value of **Employees**. +N> Refer to the **Employees** data source defined in the [Perform drill-down](#perform-drill-down) section. -![Blazor TreeMap with Initial Drill-down](images/drilldown/blazor-treemap-initial-drill-down.png) \ No newline at end of file +![Blazor TreeMap with Initial Drill-down](images/drilldown/blazor-treemap-initial-drill-down.png) diff --git a/blazor/treemap/events.md b/blazor/treemap/events.md index ad93d9c2b7..e16fd20717 100644 --- a/blazor/treemap/events.md +++ b/blazor/treemap/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn about all available events and event handling in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -11,117 +11,117 @@ documentation: ug ## ItemHighlighted -Triggers, after highlighting the TreeMap items. +Triggers after TreeMap items are highlighted. | Argument name | Description | -|----------------------| ----------------------------------------------| +|----------------------|-----------------------------------------------| | Cancel | Specifies the event cancel status. | ## ItemRendering -Triggers, before rendering the item of the TreeMap. +Triggers before rendering a TreeMap item. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | CurrentItem | Specifies the current rendering item. | | Text | Specifies the text of the current item. | | Cancel | Specifies the event cancel status. | ## ItemSelected -Triggers, after selecting the TreeMap item. +Triggers after a TreeMap item is selected. | Argument name | Description | -|----------------------| --------------------------------------| -| Text | Specifies the text of the selected item. | -| Cancel | Specifies the event cancel status. | +|----------------------|---------------------------------------| +| Text | Specifies the text of the selected item. | +| Cancel | Specifies the event cancel status. | ## LegendRendering -Triggers, before rendering the TreeMap legend. +Triggers before rendering the TreeMap legend. | Argument name | Description | -|----------------------| ----------------------------------------------| +|----------------------|-----------------------------------------------| | Cancel | Specifies the event cancel status. | ## LegendItemRendering -Triggers, before rendering each of the legend item. +Triggers before rendering each legend item. | Argument name | Description | -|----------------------| -----------------------------------------------------------------| -| Fill | Specifies the legend shape color. | -| ImageUrl | Specifies the image URL. | -| Shape | Specifies the legend shape. | -| ShapeBorder | Specifies the legend border color and width. | -| Cancel | Specifies the event cancel status . | +|----------------------|------------------------------------------------------------------| +| Fill | Specifies the legend shape color. | +| ImageUrl | Specifies the image URL. | +| Shape | Specifies the legend shape. | +| ShapeBorder | Specifies the legend border color and width. | +| Cancel | Specifies the event cancel status. | ## Loaded -Triggers, after the TreeMap component has been loaded. +Triggers after the TreeMap component has loaded. -| Argument name | Description | -|----------------------| -----------------------------------------------------------------| -| IsResized | Specifies whether the component is resized or not. | +| Argument name | Description | +|----------------------|------------------------------------------------| +| IsResized | Specifies whether the component is resized. | ## Load -Triggers, before rendering the TreeMap. TreeMap will trigger this event first. +Triggers before the TreeMap renders. This is the first event fired. ## OnPrint -Triggers, before the print operation gets started. +Triggers before a print operation starts. | Argument name | Description | -|----------------------| ----------------------------------------------| -| Cancel | Specifies the event cancel status. | +|----------------------|-----------------------------------------------| +| Cancel | Specifies the event cancel status. | ## OnClick -Triggers, when clicking on the treemap. +Triggers when the TreeMap is clicked. | Argument name | Description | -|----------------------| ----------------------------------------------| -| MouseEvent | Specifies the pointer mouse event. | -| TreeMap | Specifies the current treemap instances. | -| Name | Specifies the name of the event. | -| Cancel | Specifies the event cancel status. | +|----------------------|-----------------------------------------------| +| MouseEvent | Specifies the pointer event. | +| TreeMap | Specifies the current TreeMap instance. | +| Name | Specifies the event name. | +| Cancel | Specifies the event cancel status. | ## OnDoubleClick -Triggers, when double clicking on the treemap. +Triggers on double-click in the TreeMap. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | Cancel | Specifies the event cancel status. | ## DrillCompleted -Triggers, when drilling down functionality gets completed on the TreeMap item. +Triggers when drill-down on a TreeMap item is completed. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | Cancel | Specifies the event cancel status. | ## OnDrillStart -Triggers, when drilling down functionality gets started on the TreeMap item. +Triggers when drill-down starts on a TreeMap item. | Argument name | Description | -|----------------------| ----------------------------------------------------------| +|----------------------|-----------------------------------------------------------| | GroupIndex | Specifies the index of the TreeMap item. | | GroupName | Specifies the parent name of the TreeMap item. | | Item | Specifies the current drill item. | -| RightClick | Return the boolean value whether it is right or not. | +| RightClick | Indicates whether the action was initiated by a right-click. | | Cancel | Specifies the event cancel status. | ## OnItemClick -Triggers, when clicking on the TreeMap item. +Triggers when a TreeMap item is clicked. | Argument name | Description | -|----------------------| ----------------------------------------------| -| GroupIndex | Specifies the index of the TreeMap item | +|----------------------|-----------------------------------------------| +| GroupIndex | Specifies the index of the TreeMap item. | | GroupName | Specifies the parent name of the TreeMap item. | | Item | Specifies the current item on click. | | Text | Specifies the text of the current TreeMap item. | @@ -129,38 +129,38 @@ Triggers, when clicking on the TreeMap item. ## OnItemMove -Triggers, when mouse moves on the TreeMap item. +Triggers when the pointer moves over a TreeMap item. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | Cancel | Specifies the event cancel status. | ## OnRightClick -Triggers, when right-clicked on the TreeMap. +Triggers on right-click in the TreeMap. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | Cancel | Specifies the event cancel status. | ## Resizing -Triggers, when resizing the TreeMap component. +Triggers when resizing the TreeMap component. | Argument name | Description | -|----------------------| ---------------------------------------| +|----------------------|----------------------------------------| | CurrentSize | Specifies the size of the TreeMap. | | PreviousSize | Specifies the previous size of the TreeMap. | | Cancel | Specifies the event cancel status. | ## TooltipRendering -Triggers, before rendering the TreeMap tooltip. +Triggers before rendering the TreeMap tooltip. | Argument name | Description | -|----------------------| --------------------------------------| +|----------------------|---------------------------------------| | Location | Specifies the location of the tooltip. | | Text | Specifies the text of the tooltip. | | TextStyle | Specifies the text style of the tooltip. | -| Data | Specifies the TreeMap item data, where the tooltip is to be rendered. | +| Data | Specifies the TreeMap item data where the tooltip is rendered. | | Cancel | Specifies the event cancel status. | \ No newline at end of file diff --git a/blazor/treemap/how-to/place-treemap-inside-other-components.md b/blazor/treemap/how-to/place-treemap-inside-other-components.md index 39c95142ce..53b1b98f5d 100644 --- a/blazor/treemap/how-to/place-treemap-inside-other-components.md +++ b/blazor/treemap/how-to/place-treemap-inside-other-components.md @@ -1,7 +1,7 @@ --- layout: post title: How to place TreeMap component inside other components | Syncfusion -description: Learn here about how to place the TreeMap inside other components like Dashboard Layout, Tab, Dialog and Accordion. +description: Learn how to render the TreeMap inside other components like Dashboard Layout, Tab, Dialog, and Accordion. platform: Blazor control: TreeMap documentation: ug @@ -9,13 +9,13 @@ documentation: ug # Render TreeMap component inside other components -The TreeMap can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the TreeMap component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the TreeMap component. +TreeMap can be hosted inside components such as Dashboard Layout, Tab, Dialog, and Accordion. Because TreeMap often initializes before its host finishes measuring, control the start of TreeMap rendering with a boolean flag to defer initialization until the container is ready. ## TreeMap component inside Dashboard Layout -When the TreeMap component renders within a panel of the Dashboard Layout component, its rendering begins concurrently with the Dashboard Layout component's rendering. As a result, the size of the TreeMap component will not be proper. To properly render the TreeMap component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the TreeMap component's rendering. The boolean variable is set to **false** by default, so the TreeMap component will not be rendered initially. When the Dashboard Layout component is rendered, its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Created) event is fired. Within this event, the `Task.Yield()` method should be called, and the boolean variable (i.e. **IsInitialRender**) should be set to **true** to initiate the rendering of the TreeMap component. This ensures that the Dashboard Layout component is fully rendered before the TreeMap component begins rendering. +When TreeMap renders inside a Dashboard Layout panel, both components initialize concurrently, which can result in incorrect sizing. To ensure proper sizing, create a boolean flag (for example, **IsInitialRender**) and use it to conditionally render TreeMap. Initialize the flag to **false** so TreeMap does not render initially. After the Dashboard Layout raises its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Created) event, call `Task.Yield()` and set the flag to **true** to start TreeMap rendering only after the layout has completed. -When you drag and resize the Dashboard Layout panel or resize the window, the TreeMap component is not notified and thus may not render properly within the panel. To address this, call the TreeMap component's [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RefreshAsync) method within the Dashboard Layout's [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Resizing) and [OnWindowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_OnWindowResize) events. Additionally, apply a 500-millisecond delay using a timer to refresh the TreeMap components after resizing is complete. +When the Dashboard Layout panel is dragged or resized, or when the window is resized, TreeMap is not automatically notified and may not fit the panel. Call [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RefreshAsync) from the Dashboard Layout’s [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_Resizing) and [OnWindowResize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.DashboardLayoutEvents.html#Syncfusion_Blazor_Layouts_DashboardLayoutEvents_OnWindowResize) events. Use a 500 ms timer delay to refresh TreeMap after resizing completes. ```cshtml @@ -23,7 +23,6 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr @using Syncfusion.Blazor.Layouts @using Syncfusion.Blazor.Inputs - @@ -32,24 +31,24 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr @if (IsInitialRender) { - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + } @@ -59,20 +58,20 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr @if (IsInitialRender) { - - - - - - - - - - - - - - + + + + + + + + + + + + + + } @@ -81,22 +80,22 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr @if (IsInitialRender) { - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + } @@ -157,37 +156,38 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr public string Company { get; set; } public int Sales { get; set; } } + public List DataSource = new List { - new CarSalesDetails { Continent="China", Company="Volkswagen", Sales=3005994 }, - new CarSalesDetails { Continent="China", Company="General Motors", Sales=1230044 }, - new CarSalesDetails { Continent="China", Company="Honda", Sales=1197023 }, - new CarSalesDetails { Continent="United States", Company="General Motors", Sales=3042775 }, - new CarSalesDetails { Continent="United States", Company="Ford", Sales=2599193 }, - new CarSalesDetails { Continent="United States", Company="Toyota", Sales=2449587 }, - new CarSalesDetails { Continent="Japan",Company="Toyota", Sales=1527977 }, - new CarSalesDetails { Continent="Japan", Company="Honda", Sales=706982 }, - new CarSalesDetails { Continent="Japan", Company="Suzuki", Sales=623041 }, - new CarSalesDetails { Continent="Germany",Company="Volkswagen", Sales=655977 }, - new CarSalesDetails { Continent="Germany", Company="Mercedes", Sales=310845 }, - new CarSalesDetails { Continent="Germany", Company="BMW", Sales=261931 }, - new CarSalesDetails { Continent="United Kingdom", Company="Ford ", Sales=319442 }, - new CarSalesDetails { Continent="United Kingdom", Company="Vauxhall", Sales=251146 }, - new CarSalesDetails { Continent="United Kingdom", Company="Volkswagen", Sales=206994 }, - new CarSalesDetails { Continent="India", Company="Maruti Suzuki", Sales=1443654 }, - new CarSalesDetails { Continent="India", Company="Hyundai", Sales=476241 }, - new CarSalesDetails { Continent="India", Company="Mahindra", Sales=205041 }, - new CarSalesDetails { Continent="France", Company="Renault", Sales=408183 }, - new CarSalesDetails { Continent="France", Company="Peugeot", Sales=336242 }, - new CarSalesDetails { Continent="France", Company="Citroen", Sales=194986 }, - new CarSalesDetails { Continent="Brazil", Company="Flat Chrysler", Sales=368842 }, - new CarSalesDetails { Continent="Brazil", Company="General Motors", Sales=348351 }, - new CarSalesDetails { Continent="Brazil", Company="Volkswagen", Sales=245895 }, - new CarSalesDetails { Continent="Italy", Company="Flat Chrysler", Sales=386260 }, - new CarSalesDetails { Continent="Italy", Company="Volkswagen", Sales=138984 }, - new CarSalesDetails { Continent="Italy", Company="Ford", Sales=125144 }, - new CarSalesDetails { Continent="Canada", Company="Ford", Sales=305086}, - new CarSalesDetails { Continent="Canada", Company="FCA", Sales=278011 }, - new CarSalesDetails { Continent="Canada", Company="GM", Sales=266884 }, + new CarSalesDetails { Continent = "China", Company = "Volkswagen", Sales = 3005994 }, + new CarSalesDetails { Continent = "China", Company = "General Motors", Sales = 1230044 }, + new CarSalesDetails { Continent = "China", Company = "Honda", Sales = 1197023 }, + new CarSalesDetails { Continent = "United States", Company = "General Motors", Sales = 3042775 }, + new CarSalesDetails { Continent = "United States", Company = "Ford", Sales = 2599193 }, + new CarSalesDetails { Continent = "United States", Company = "Toyota", Sales = 2449587 }, + new CarSalesDetails { Continent = "Japan", Company = "Toyota", Sales = 1527977 }, + new CarSalesDetails { Continent = "Japan", Company = "Honda", Sales = 706982 }, + new CarSalesDetails { Continent = "Japan", Company = "Suzuki", Sales = 623041 }, + new CarSalesDetails { Continent = "Germany",Company = "Volkswagen", Sales = 655977 }, + new CarSalesDetails { Continent = "Germany", Company = "Mercedes", Sales = 310845 }, + new CarSalesDetails { Continent = "Germany", Company = "BMW", Sales = 261931 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Ford ", Sales = 319442 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Vauxhall", Sales = 251146 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Volkswagen", Sales = 206994 }, + new CarSalesDetails { Continent = "India", Company = "Maruti Suzuki", Sales = 1443654 }, + new CarSalesDetails { Continent = "India", Company = "Hyundai", Sales = 476241 }, + new CarSalesDetails { Continent = "India", Company = "Mahindra", Sales = 205041 }, + new CarSalesDetails { Continent = "France", Company = "Renault", Sales = 408183 }, + new CarSalesDetails { Continent = "France", Company = "Peugeot", Sales = 336242 }, + new CarSalesDetails { Continent = "France", Company = "Citroen", Sales = 194986 }, + new CarSalesDetails { Continent = "Brazil", Company = "Flat Chrysler", Sales = 368842 }, + new CarSalesDetails { Continent = "Brazil", Company = "General Motors", Sales = 348351 }, + new CarSalesDetails { Continent = "Brazil", Company = "Volkswagen", Sales = 245895 }, + new CarSalesDetails { Continent = "Italy", Company = "Flat Chrysler", Sales = 386260 }, + new CarSalesDetails { Continent = "Italy", Company = "Volkswagen", Sales = 138984 }, + new CarSalesDetails { Continent = "Italy", Company = "Ford", Sales = 125144 }, + new CarSalesDetails { Continent = "Canada", Company = "Ford", Sales = 305086}, + new CarSalesDetails { Continent = "Canada", Company = "FCA", Sales = 278011 }, + new CarSalesDetails { Continent = "Canada", Company = "GM", Sales = 266884 }, }; public class USAElectionResult @@ -199,58 +199,59 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr public string Winner { get; set; } public double Population { get; set; } } + public List DataSourceUSA = new List { - new USAElectionResult { State="Alabama", Trump=62.9, Clinton=34.6, WinPercentage= 62.9, Winner="Trump", Population=4780127 }, - new USAElectionResult { State="Alaska", Trump=52.9, Clinton=37.7, WinPercentage= 52.9, Winner="Trump", Population=710249}, - new USAElectionResult { State="Arkansas", Trump=60.6, Clinton=33.7, WinPercentage=60.6, Winner="Trump", Population=2915958 }, - new USAElectionResult { State="Arizona", Trump=49.5, Clinton=45.4, WinPercentage=49.5, Winner="Trump", Population=6392307 }, - new USAElectionResult { State="California", Trump=32.8, Clinton=61.6, WinPercentage= 61.6, Winner="Clinton", Population=37252895}, - new USAElectionResult { State="Colorado", Trump=47.3, Clinton=44.4, WinPercentage= 47.3, Winner="Trump", Population=5029324 }, - new USAElectionResult { State="Connecticut", Trump=41.2, Clinton=54.5, WinPercentage= 54.5, Winner="Clinton", Population=3574118}, - new USAElectionResult { State="Delaware", Trump=53.4, Clinton=41.9, WinPercentage= 53.4, Winner="Trump", Population=897936 }, - new USAElectionResult { State="District of Columbia", Trump=4.1, Clinton=92.8, WinPercentage= 92.8, Winner="Clinton", Population=693972 }, - new USAElectionResult { State="Florida", Trump=49.1, Clinton=47.8, WinPercentage= 49.1, Winner="Trump", Population=18804623}, - new USAElectionResult { State="Georgia", Trump=51.3, Clinton=45.6, WinPercentage=51.3, Winner="Trump", Population=9688681}, - new USAElectionResult { State="Hawaii", Trump=62.2, Clinton=30, WinPercentage=62.2, Winner="Trump", Population=1360301 }, - new USAElectionResult { State="Idaho", Trump=59.2, Clinton=27.6, WinPercentage= 59.2, Winner="Trump", Population=1567652 }, - new USAElectionResult { State="Illinois", Trump=55.4, Clinton=39.4, WinPercentage= 55.4, Winner="Trump", Population=12831549 }, - new USAElectionResult { State="Indiana", Trump=57.2, Clinton=37.9, WinPercentage=57.2, Winner="Trump", Population=6484229 }, - new USAElectionResult { State="Iowa", Trump=51.8, Clinton=42.2, WinPercentage=51.8, Winner="Trump", Population=3046869 }, - new USAElectionResult { State="Kansas", Trump=57.2, Clinton=36.2, WinPercentage=57.2, Winner="Trump", Population=2853132, }, - new USAElectionResult { State="Kentucky", Trump=62.5, Clinton=32.7, WinPercentage=62.5, Winner="Trump", Population=4339349 }, - new USAElectionResult { State="Louisiana", Trump=58.1, Clinton=38.4, WinPercentage=58.1, Winner="Trump", Population=4533479 }, - new USAElectionResult { State="Maine", Trump=45.2, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=1328361}, - new USAElectionResult { State="Maryland", Trump=35.3, Clinton=60.5, WinPercentage=60.5, Winner="Clinton", Population=5773785 }, - new USAElectionResult { State="Massachusetts", Trump=33.5, Clinton=60.8, WinPercentage=60.8, Winner="Clinton", Population=6547817 }, - new USAElectionResult { State="Michigan", Trump=47.6, Clinton=47.3, WinPercentage=47.6, Winner="Trump", Population=9884129 }, - new USAElectionResult { State="Minnesota", Trump=45.4, Clinton=46.9, WinPercentage=46.9, Winner="Trump", Population=5303925 }, - new USAElectionResult { State="Mississippi", Trump=58.3, Clinton=39.7, WinPercentage=58.3, Winner="Trump", Population=2968103 }, - new USAElectionResult { State="Missouri", Trump=57.1, Clinton=38.0, WinPercentage=57.1, Winner="Trump", Population=5988927 }, - new USAElectionResult { State="Montana", Trump=56.5, Clinton=36.0, WinPercentage= 56.5, Winner="Trump", Population=989417 }, - new USAElectionResult { State="Nebraska", Trump=60.3, Clinton=34.0, WinPercentage=60.3, Winner="Trump", Population=1826341 }, - new USAElectionResult { State="Nevada", Trump=45.5, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=2700691 }, - new USAElectionResult { State="New Hampshire", Trump=47.2, Clinton=47.6, WinPercentage= 47.6, Winner="Clinton", Population=1316466 }, - new USAElectionResult { State="New Jersey", Trump=41.8, Clinton=55.0, WinPercentage=55, Winner="Clinton", Population=8791936}, - new USAElectionResult { State="New Mexico", Trump=40.0, Clinton=48.3, WinPercentage=48.3, Winner="Clinton", Population=2059192 }, - new USAElectionResult { State="New York", Trump=37.5, Clinton=58.8, WinPercentage=58.8, Winner="Clinton", Population=19378087}, - new USAElectionResult { State="North Carolina", Trump=50.5, Clinton=46.7, WinPercentage=50.5, Winner="Trump", Population=9535692 }, - new USAElectionResult { State="North Dakota", Trump=64.1, Clinton=27.8, WinPercentage=64.1, Winner="Trump", Population=672591 }, - new USAElectionResult { State="Ohio", Trump=52.1, Clinton=43.5, WinPercentage=52.5, Winner="Trump", Population=11536725 }, - new USAElectionResult { State="Oklahoma", Trump=65.3, Clinton=28.9, WinPercentage= 65.3, Winner="Trump", Population=3751616 }, - new USAElectionResult { State="Oregon", Trump=41.1, Clinton=51.7, WinPercentage=51.7, Winner="Clinton", Population=3831073 }, - new USAElectionResult { State="Pennsylvania", Trump=48.8, Clinton=47.6, WinPercentage= 48.8, Winner="Trump", Population=12702887}, - new USAElectionResult { State="Rhode Island", Trump=39.8, Clinton=55.4, WinPercentage= 55.4, Winner="Clinton", Population=1052931 }, - new USAElectionResult { State="South Carolina", Trump=54.9, Clinton=40.8, WinPercentage=54.9, Winner="Trump", Population=4625401}, - new USAElectionResult { State="South Dakota", Trump=61.5, Clinton=31.7, WinPercentage= 61.5, Winner="Trump", Population=814191 }, - new USAElectionResult { State="Tennessee", Trump=61.1, Clinton=34.9, WinPercentage=61.1, Winner="Trump", Population=6346275}, - new USAElectionResult { State="Texas", Trump=52.6, Clinton=43.4, WinPercentage=52.6, Winner="Trump", Population=25146105 }, - new USAElectionResult { State="Utah", Trump=45.9, Clinton=27.8, WinPercentage=45.9, Winner="Trump", Population=2763888, }, - new USAElectionResult { State="Vermont", Trump=39.7, Clinton=61.1, WinPercentage=61.1, Winner="Clinton", Population=625745 }, - new USAElectionResult { State="Virginia", Trump=45.0, Clinton=49.9, WinPercentage=49.9, Winner="Clinton", Population=8001045}, - new USAElectionResult { State="Washington", Trump=4.1, Clinton=92.8, WinPercentage=92.8, Winner="Clinton", Population=6724543 }, - new USAElectionResult { State="Wisconsin", Trump=68.7, Clinton=26.5, WinPercentage=68.7, Winner="Trump", Population=5687289}, - new USAElectionResult { State="West Virginia", Trump=47.9, Clinton=46.9, WinPercentage=47.9, Winner="Clinton", Population=1853011 }, - new USAElectionResult { State="Wyoming", Trump=70.1, Clinton=22.5, WinPercentage=70.1, Winner="Trump", Population=583767 } + new USAElectionResult { State = "Alabama", Trump = 62.9, Clinton = 34.6, WinPercentage = 62.9, Winner = "Trump", Population = 4780127 }, + new USAElectionResult { State = "Alaska", Trump = 52.9, Clinton = 37.7, WinPercentage = 52.9, Winner = "Trump", Population = 710249 }, + new USAElectionResult { State = "Arkansas", Trump = 60.6, Clinton = 33.7, WinPercentage = 60.6, Winner = "Trump", Population = 2915958 }, + new USAElectionResult { State = "Arizona", Trump = 49.5, Clinton = 45.4, WinPercentage = 49.5, Winner = "Trump", Population = 6392307 }, + new USAElectionResult { State = "California", Trump = 32.8, Clinton = 61.6, WinPercentage = 61.6, Winner = "Clinton", Population = 37252895 }, + new USAElectionResult { State = "Colorado", Trump = 47.3, Clinton = 44.4, WinPercentage = 47.3, Winner = "Trump", Population = 5029324 }, + new USAElectionResult { State = "Connecticut", Trump = 41.2, Clinton = 54.5, WinPercentage = 54.5, Winner = "Clinton", Population = 3574118 }, + new USAElectionResult { State = "Delaware", Trump = 53.4, Clinton = 41.9, WinPercentage = 53.4, Winner = "Trump", Population = 897936 }, + new USAElectionResult { State = "District of Columbia", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 693972 }, + new USAElectionResult { State = "Florida", Trump = 49.1, Clinton = 47.8, WinPercentage = 49.1, Winner = "Trump", Population = 18804623 }, + new USAElectionResult { State = "Georgia", Trump = 51.3, Clinton = 45.6, WinPercentage = 51.3, Winner = "Trump", Population = 9688681 }, + new USAElectionResult { State = "Hawaii", Trump = 62.2, Clinton = 30, WinPercentage = 62.2, Winner = "Trump", Population = 1360301 }, + new USAElectionResult { State = "Idaho", Trump = 59.2, Clinton = 27.6, WinPercentage = 59.2, Winner = "Trump", Population = 1567652 }, + new USAElectionResult { State = "Illinois", Trump = 55.4, Clinton = 39.4, WinPercentage = 55.4, Winner = "Trump", Population = 12831549 }, + new USAElectionResult { State = "Indiana", Trump = 57.2, Clinton = 37.9, WinPercentage = 57.2, Winner = "Trump", Population = 6484229 }, + new USAElectionResult { State = "Iowa", Trump = 51.8, Clinton = 42.2, WinPercentage = 51.8, Winner = "Trump", Population = 3046869 }, + new USAElectionResult { State = "Kansas", Trump = 57.2, Clinton = 36.2, WinPercentage = 57.2, Winner = "Trump", Population = 2853132 }, + new USAElectionResult { State = "Kentucky", Trump = 62.5, Clinton = 32.7, WinPercentage = 62.5, Winner = "Trump", Population = 4339349 }, + new USAElectionResult { State = "Louisiana", Trump = 58.1, Clinton = 38.4, WinPercentage = 58.1, Winner = "Trump", Population = 4533479 }, + new USAElectionResult { State = "Maine", Trump = 45.2, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1328361 }, + new USAElectionResult { State = "Maryland", Trump = 35.3, Clinton = 60.5, WinPercentage = 60.5, Winner = "Clinton", Population = 5773785 }, + new USAElectionResult { State = "Massachusetts", Trump = 33.5, Clinton = 60.8, WinPercentage = 60.8, Winner = "Clinton", Population = 6547817 }, + new USAElectionResult { State = "Michigan", Trump = 47.6, Clinton = 47.3, WinPercentage = 47.6, Winner = "Trump", Population = 9884129 }, + new USAElectionResult { State = "Minnesota", Trump = 45.4, Clinton = 46.9, WinPercentage = 46.9, Winner = "Trump", Population = 5303925 }, + new USAElectionResult { State = "Mississippi", Trump = 58.3, Clinton = 39.7, WinPercentage = 58.3, Winner = "Trump", Population = 2968103 }, + new USAElectionResult { State = "Missouri", Trump = 57.1, Clinton = 38.0, WinPercentage = 57.1, Winner = "Trump", Population = 5988927 }, + new USAElectionResult { State = "Montana", Trump = 56.5, Clinton = 36.0, WinPercentage = 56.5, Winner = "Trump", Population = 989417 }, + new USAElectionResult { State = "Nebraska", Trump = 60.3, Clinton = 34.0, WinPercentage = 60.3, Winner = "Trump", Population = 1826341 }, + new USAElectionResult { State = "Nevada", Trump = 45.5, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 2700691 }, + new USAElectionResult { State = "New Hampshire", Trump = 47.2, Clinton = 47.6, WinPercentage = 47.6, Winner = "Clinton", Population = 1316466 }, + new USAElectionResult { State = "New Jersey", Trump = 41.8, Clinton = 55.0, WinPercentage = 55, Winner = "Clinton", Population = 8791936 }, + new USAElectionResult { State = "New Mexico", Trump = 40.0, Clinton = 48.3, WinPercentage = 48.3, Winner = "Clinton", Population = 2059192 }, + new USAElectionResult { State = "New York", Trump = 37.5, Clinton = 58.8, WinPercentage = 58.8, Winner = "Clinton", Population = 19378087 }, + new USAElectionResult { State = "North Carolina", Trump = 50.5, Clinton = 46.7, WinPercentage = 50.5, Winner = "Trump", Population = 9535692 }, + new USAElectionResult { State = "North Dakota", Trump = 64.1, Clinton = 27.8, WinPercentage = 64.1, Winner = "Trump", Population = 672591 }, + new USAElectionResult { State = "Ohio", Trump = 52.1, Clinton = 43.5, WinPercentage = 52.5, Winner = "Trump", Population = 11536725 }, + new USAElectionResult { State = "Oklahoma", Trump = 65.3, Clinton = 28.9, WinPercentage = 65.3, Winner = "Trump", Population = 3751616 }, + new USAElectionResult { State = "Oregon", Trump = 41.1, Clinton = 51.7, WinPercentage = 51.7, Winner = "Clinton", Population = 3831073 }, + new USAElectionResult { State = "Pennsylvania", Trump = 48.8, Clinton = 47.6, WinPercentage = 48.8, Winner = "Trump", Population = 12702887 }, + new USAElectionResult { State = "Rhode Island", Trump = 39.8, Clinton = 55.4, WinPercentage = 55.4, Winner = "Clinton", Population = 1052931 }, + new USAElectionResult { State = "South Carolina", Trump = 54.9, Clinton = 40.8, WinPercentage = 54.9, Winner = "Trump", Population = 4625401 }, + new USAElectionResult { State = "South Dakota", Trump = 61.5, Clinton = 31.7, WinPercentage = 61.5, Winner = "Trump", Population = 814191 }, + new USAElectionResult { State = "Tennessee", Trump = 61.1, Clinton = 34.9, WinPercentage = 61.1, Winner = "Trump", Population = 6346275 }, + new USAElectionResult { State = "Texas", Trump = 52.6, Clinton = 43.4, WinPercentage = 52.6, Winner = "Trump", Population = 25146105 }, + new USAElectionResult { State = "Utah", Trump = 45.9, Clinton = 27.8, WinPercentage = 45.9, Winner = "Trump", Population = 2763888 }, + new USAElectionResult { State = "Vermont", Trump = 39.7, Clinton = 61.1, WinPercentage = 61.1, Winner = "Clinton", Population = 625745 }, + new USAElectionResult { State = "Virginia", Trump = 45.0, Clinton = 49.9, WinPercentage = 49.9, Winner = "Clinton", Population = 8001045 }, + new USAElectionResult { State = "Washington", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 6724543 }, + new USAElectionResult { State = "Wisconsin", Trump = 68.7, Clinton = 26.5, WinPercentage = 68.7, Winner = "Trump", Population = 5687289 }, + new USAElectionResult { State = "West Virginia", Trump = 47.9, Clinton = 46.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1853011 }, + new USAElectionResult { State = "Wyoming", Trump = 70.1, Clinton = 22.5, WinPercentage = 70.1, Winner = "Trump", Population = 583767 } }; public class LeafData @@ -260,19 +261,19 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr public double Percentage { get; set; } public int Rank { get; set; } }; + public List Economics = new List { - new LeafData { State="United States", GDP=17946, Percentage=11.08, Rank=1}, - new LeafData { State="China", GDP=10866, Percentage=28.42, Rank=2 }, - new LeafData { State="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new LeafData { State="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new LeafData { State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5 }, - new LeafData { State="France", GDP=2421, Percentage=-9.69, Rank=6 }, - new LeafData { State="India", GDP=2073, Percentage=13.65, Rank=7 }, - new LeafData { State="Italy", GDP=1814, Percentage=-12.45, Rank=8 }, - new LeafData { State="Brazil", GDP=1774, Percentage=-27.88, Rank=9 }, - new LeafData { State="Canada", GDP=1550, Percentage=-15.02, Rank=10 } + new LeafData { State = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new LeafData { State = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new LeafData { State = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new LeafData { State = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new LeafData { State = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new LeafData { State = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new LeafData { State = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new LeafData { State = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new LeafData { State = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new LeafData { State = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; - } ``` @@ -280,7 +281,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr ## TreeMap component inside Tab -When the TreeMap component renders within the Tab component, its rendering begins concurrently with the Tab component's rendering. As a result, the size of the TreeMap component will not be proper. To properly render the TreeMap component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the TreeMap component's rendering. The boolean variable is set to **false** by default, so the TreeMap component will not be rendered initially. When the Tab component is rendered, its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabEvents.html#Syncfusion_Blazor_Navigations_TabEvents_Created) event is fired, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to **true** to initiate the render of the TreeMap component. +When TreeMap renders inside Tab, both components initialize at the same time, which can lead to incorrect sizing. Use a boolean flag (for example, **IsInitialRender**) to control TreeMap rendering. Set the flag to **false** initially, and then set it to **true** in the Tab’s [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TabEvents.html#Syncfusion_Blazor_Navigations_TabEvents_Created) event to begin rendering after Tab creation. ```cshtml @@ -288,92 +289,92 @@ When the TreeMap component renders within the Tab component, its rendering begin @using Syncfusion.Blazor.TreeMap @using Syncfusion.Blazor.Inputs - - - - - - - - - @if (IsInitialRender) - { + + + + + + + + + @if (IsInitialRender) + { - - - - - - - - - - - - - - - - - - } - - - - - - - - @if (IsInitialRender) - { - - - - - - - - - - - - - - - - } - - - - - - - - @if (IsInitialRender) - { - - - - - - - - - - - - - - - - - } - - - - - -@code{ + + + + + + + + + + + + + + + + + + } + + + + + + + + @if (IsInitialRender) + { + + + + + + + + + + + + + + + + } + + + + + + + + @if (IsInitialRender) + { + + + + + + + + + + + + + + + + + } + + + + + +@code { SfTreeMap TreeOne; SfTreeMap TreeTwo; SfTreeMap TreeThree; @@ -402,37 +403,38 @@ When the TreeMap component renders within the Tab component, its rendering begin public string Company { get; set; } public int Sales { get; set; } } + public List DataSource = new List { - new CarSalesDetails { Continent="China", Company="Volkswagen", Sales=3005994 }, - new CarSalesDetails { Continent="China", Company="General Motors", Sales=1230044 }, - new CarSalesDetails { Continent="China", Company="Honda", Sales=1197023 }, - new CarSalesDetails { Continent="United States", Company="General Motors", Sales=3042775 }, - new CarSalesDetails { Continent="United States", Company="Ford", Sales=2599193 }, - new CarSalesDetails { Continent="United States", Company="Toyota", Sales=2449587 }, - new CarSalesDetails { Continent="Japan",Company="Toyota", Sales=1527977 }, - new CarSalesDetails { Continent="Japan", Company="Honda", Sales=706982 }, - new CarSalesDetails { Continent="Japan", Company="Suzuki", Sales=623041 }, - new CarSalesDetails { Continent="Germany",Company="Volkswagen", Sales=655977 }, - new CarSalesDetails { Continent="Germany", Company="Mercedes", Sales=310845 }, - new CarSalesDetails { Continent="Germany", Company="BMW", Sales=261931 }, - new CarSalesDetails { Continent="United Kingdom", Company="Ford ", Sales=319442 }, - new CarSalesDetails { Continent="United Kingdom", Company="Vauxhall", Sales=251146 }, - new CarSalesDetails { Continent="United Kingdom", Company="Volkswagen", Sales=206994 }, - new CarSalesDetails { Continent="India", Company="Maruti Suzuki", Sales=1443654 }, - new CarSalesDetails { Continent="India", Company="Hyundai", Sales=476241 }, - new CarSalesDetails { Continent="India", Company="Mahindra", Sales=205041 }, - new CarSalesDetails { Continent="France", Company="Renault", Sales=408183 }, - new CarSalesDetails { Continent="France", Company="Peugeot", Sales=336242 }, - new CarSalesDetails { Continent="France", Company="Citroen", Sales=194986 }, - new CarSalesDetails { Continent="Brazil", Company="Flat Chrysler", Sales=368842 }, - new CarSalesDetails { Continent="Brazil", Company="General Motors", Sales=348351 }, - new CarSalesDetails { Continent="Brazil", Company="Volkswagen", Sales=245895 }, - new CarSalesDetails { Continent="Italy", Company="Flat Chrysler", Sales=386260 }, - new CarSalesDetails { Continent="Italy", Company="Volkswagen", Sales=138984 }, - new CarSalesDetails { Continent="Italy", Company="Ford", Sales=125144 }, - new CarSalesDetails { Continent="Canada", Company="Ford", Sales=305086}, - new CarSalesDetails { Continent="Canada", Company="FCA", Sales=278011 }, - new CarSalesDetails { Continent="Canada", Company="GM", Sales=266884 }, + new CarSalesDetails { Continent = "China", Company = "Volkswagen", Sales = 3005994 }, + new CarSalesDetails { Continent = "China", Company = "General Motors", Sales = 1230044 }, + new CarSalesDetails { Continent = "China", Company = "Honda", Sales = 1197023 }, + new CarSalesDetails { Continent = "United States", Company = "General Motors", Sales = 3042775 }, + new CarSalesDetails { Continent = "United States", Company = "Ford", Sales = 2599193 }, + new CarSalesDetails { Continent = "United States", Company = "Toyota", Sales = 2449587 }, + new CarSalesDetails { Continent = "Japan", Company = "Toyota", Sales = 1527977 }, + new CarSalesDetails { Continent = "Japan", Company = "Honda", Sales = 706982 }, + new CarSalesDetails { Continent = "Japan", Company = "Suzuki", Sales = 623041 }, + new CarSalesDetails { Continent = "Germany", Company = "Volkswagen", Sales = 655977 }, + new CarSalesDetails { Continent = "Germany", Company = "Mercedes", Sales = 310845 }, + new CarSalesDetails { Continent = "Germany", Company = "BMW", Sales = 261931 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Ford", Sales = 319442 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Vauxhall", Sales = 251146 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Volkswagen", Sales = 206994 }, + new CarSalesDetails { Continent = "India", Company = "Maruti Suzuki", Sales = 1443654 }, + new CarSalesDetails { Continent = "India", Company = "Hyundai", Sales = 476241 }, + new CarSalesDetails { Continent = "India", Company = "Mahindra", Sales = 205041 }, + new CarSalesDetails { Continent = "France", Company = "Renault", Sales = 408183 }, + new CarSalesDetails { Continent = "France", Company = "Peugeot", Sales = 336242 }, + new CarSalesDetails { Continent = "France", Company = "Citroen", Sales = 194986 }, + new CarSalesDetails { Continent = "Brazil", Company = "Flat Chrysler", Sales = 368842 }, + new CarSalesDetails { Continent = "Brazil", Company = "General Motors", Sales = 348351 }, + new CarSalesDetails { Continent = "Brazil", Company = "Volkswagen", Sales = 245895 }, + new CarSalesDetails { Continent = "Italy", Company = "Flat Chrysler", Sales = 386260 }, + new CarSalesDetails { Continent = "Italy", Company = "Volkswagen", Sales = 138984 }, + new CarSalesDetails { Continent = "Italy", Company = "Ford", Sales = 125144 }, + new CarSalesDetails { Continent = "Canada", Company = "Ford", Sales = 305086 }, + new CarSalesDetails { Continent = "Canada", Company = "FCA", Sales = 278011 }, + new CarSalesDetails { Continent = "Canada", Company = "GM", Sales = 266884 } }; public class USAElectionResult @@ -445,57 +447,57 @@ When the TreeMap component renders within the Tab component, its rendering begin public double Population { get; set; } } public List DataSourceUSA = new List { - new USAElectionResult { State="Alabama", Trump=62.9, Clinton=34.6, WinPercentage= 62.9, Winner="Trump", Population=4780127 }, - new USAElectionResult { State="Alaska", Trump=52.9, Clinton=37.7, WinPercentage= 52.9, Winner="Trump", Population=710249}, - new USAElectionResult { State="Arkansas", Trump=60.6, Clinton=33.7, WinPercentage=60.6, Winner="Trump", Population=2915958 }, - new USAElectionResult { State="Arizona", Trump=49.5, Clinton=45.4, WinPercentage=49.5, Winner="Trump", Population=6392307 }, - new USAElectionResult { State="California", Trump=32.8, Clinton=61.6, WinPercentage= 61.6, Winner="Clinton", Population=37252895}, - new USAElectionResult { State="Colorado", Trump=47.3, Clinton=44.4, WinPercentage= 47.3, Winner="Trump", Population=5029324 }, - new USAElectionResult { State="Connecticut", Trump=41.2, Clinton=54.5, WinPercentage= 54.5, Winner="Clinton", Population=3574118}, - new USAElectionResult { State="Delaware", Trump=53.4, Clinton=41.9, WinPercentage= 53.4, Winner="Trump", Population=897936 }, - new USAElectionResult { State="District of Columbia", Trump=4.1, Clinton=92.8, WinPercentage= 92.8, Winner="Clinton", Population=693972 }, - new USAElectionResult { State="Florida", Trump=49.1, Clinton=47.8, WinPercentage= 49.1, Winner="Trump", Population=18804623}, - new USAElectionResult { State="Georgia", Trump=51.3, Clinton=45.6, WinPercentage=51.3, Winner="Trump", Population=9688681}, - new USAElectionResult { State="Hawaii", Trump=62.2, Clinton=30, WinPercentage=62.2, Winner="Trump", Population=1360301 }, - new USAElectionResult { State="Idaho", Trump=59.2, Clinton=27.6, WinPercentage= 59.2, Winner="Trump", Population=1567652 }, - new USAElectionResult { State="Illinois", Trump=55.4, Clinton=39.4, WinPercentage= 55.4, Winner="Trump", Population=12831549 }, - new USAElectionResult { State="Indiana", Trump=57.2, Clinton=37.9, WinPercentage=57.2, Winner="Trump", Population=6484229 }, - new USAElectionResult { State="Iowa", Trump=51.8, Clinton=42.2, WinPercentage=51.8, Winner="Trump", Population=3046869 }, - new USAElectionResult { State="Kansas", Trump=57.2, Clinton=36.2, WinPercentage=57.2, Winner="Trump", Population=2853132, }, - new USAElectionResult { State="Kentucky", Trump=62.5, Clinton=32.7, WinPercentage=62.5, Winner="Trump", Population=4339349 }, - new USAElectionResult { State="Louisiana", Trump=58.1, Clinton=38.4, WinPercentage=58.1, Winner="Trump", Population=4533479 }, - new USAElectionResult { State="Maine", Trump=45.2, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=1328361}, - new USAElectionResult { State="Maryland", Trump=35.3, Clinton=60.5, WinPercentage=60.5, Winner="Clinton", Population=5773785 }, - new USAElectionResult { State="Massachusetts", Trump=33.5, Clinton=60.8, WinPercentage=60.8, Winner="Clinton", Population=6547817 }, - new USAElectionResult { State="Michigan", Trump=47.6, Clinton=47.3, WinPercentage=47.6, Winner="Trump", Population=9884129 }, - new USAElectionResult { State="Minnesota", Trump=45.4, Clinton=46.9, WinPercentage=46.9, Winner="Trump", Population=5303925 }, - new USAElectionResult { State="Mississippi", Trump=58.3, Clinton=39.7, WinPercentage=58.3, Winner="Trump", Population=2968103 }, - new USAElectionResult { State="Missouri", Trump=57.1, Clinton=38.0, WinPercentage=57.1, Winner="Trump", Population=5988927 }, - new USAElectionResult { State="Montana", Trump=56.5, Clinton=36.0, WinPercentage= 56.5, Winner="Trump", Population=989417 }, - new USAElectionResult { State="Nebraska", Trump=60.3, Clinton=34.0, WinPercentage=60.3, Winner="Trump", Population=1826341 }, - new USAElectionResult { State="Nevada", Trump=45.5, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=2700691 }, - new USAElectionResult { State="New Hampshire", Trump=47.2, Clinton=47.6, WinPercentage= 47.6, Winner="Clinton", Population=1316466 }, - new USAElectionResult { State="New Jersey", Trump=41.8, Clinton=55.0, WinPercentage=55, Winner="Clinton", Population=8791936}, - new USAElectionResult { State="New Mexico", Trump=40.0, Clinton=48.3, WinPercentage=48.3, Winner="Clinton", Population=2059192 }, - new USAElectionResult { State="New York", Trump=37.5, Clinton=58.8, WinPercentage=58.8, Winner="Clinton", Population=19378087}, - new USAElectionResult { State="North Carolina", Trump=50.5, Clinton=46.7, WinPercentage=50.5, Winner="Trump", Population=9535692 }, - new USAElectionResult { State="North Dakota", Trump=64.1, Clinton=27.8, WinPercentage=64.1, Winner="Trump", Population=672591 }, - new USAElectionResult { State="Ohio", Trump=52.1, Clinton=43.5, WinPercentage=52.5, Winner="Trump", Population=11536725 }, - new USAElectionResult { State="Oklahoma", Trump=65.3, Clinton=28.9, WinPercentage= 65.3, Winner="Trump", Population=3751616 }, - new USAElectionResult { State="Oregon", Trump=41.1, Clinton=51.7, WinPercentage=51.7, Winner="Clinton", Population=3831073 }, - new USAElectionResult { State="Pennsylvania", Trump=48.8, Clinton=47.6, WinPercentage= 48.8, Winner="Trump", Population=12702887}, - new USAElectionResult { State="Rhode Island", Trump=39.8, Clinton=55.4, WinPercentage= 55.4, Winner="Clinton", Population=1052931 }, - new USAElectionResult { State="South Carolina", Trump=54.9, Clinton=40.8, WinPercentage=54.9, Winner="Trump", Population=4625401}, - new USAElectionResult { State="South Dakota", Trump=61.5, Clinton=31.7, WinPercentage= 61.5, Winner="Trump", Population=814191 }, - new USAElectionResult { State="Tennessee", Trump=61.1, Clinton=34.9, WinPercentage=61.1, Winner="Trump", Population=6346275}, - new USAElectionResult { State="Texas", Trump=52.6, Clinton=43.4, WinPercentage=52.6, Winner="Trump", Population=25146105 }, - new USAElectionResult { State="Utah", Trump=45.9, Clinton=27.8, WinPercentage=45.9, Winner="Trump", Population=2763888, }, - new USAElectionResult { State="Vermont", Trump=39.7, Clinton=61.1, WinPercentage=61.1, Winner="Clinton", Population=625745 }, - new USAElectionResult { State="Virginia", Trump=45.0, Clinton=49.9, WinPercentage=49.9, Winner="Clinton", Population=8001045}, - new USAElectionResult { State="Washington", Trump=4.1, Clinton=92.8, WinPercentage=92.8, Winner="Clinton", Population=6724543 }, - new USAElectionResult { State="Wisconsin", Trump=68.7, Clinton=26.5, WinPercentage=68.7, Winner="Trump", Population=5687289}, - new USAElectionResult { State="West Virginia", Trump=47.9, Clinton=46.9, WinPercentage=47.9, Winner="Clinton", Population=1853011 }, - new USAElectionResult { State="Wyoming", Trump=70.1, Clinton=22.5, WinPercentage=70.1, Winner="Trump", Population=583767 } + new USAElectionResult { State = "Alabama", Trump = 62.9, Clinton = 34.6, WinPercentage = 62.9, Winner = "Trump", Population = 4780127 }, + new USAElectionResult { State = "Alaska", Trump = 52.9, Clinton = 37.7, WinPercentage = 52.9, Winner = "Trump", Population = 710249 }, + new USAElectionResult { State = "Arkansas", Trump = 60.6, Clinton = 33.7, WinPercentage = 60.6, Winner = "Trump", Population = 2915958 }, + new USAElectionResult { State = "Arizona", Trump = 49.5, Clinton = 45.4, WinPercentage = 49.5, Winner = "Trump", Population = 6392307 }, + new USAElectionResult { State = "California", Trump = 32.8, Clinton = 61.6, WinPercentage = 61.6, Winner = "Clinton", Population = 37252895 }, + new USAElectionResult { State = "Colorado", Trump = 47.3, Clinton = 44.4, WinPercentage = 47.3, Winner = "Trump", Population = 5029324 }, + new USAElectionResult { State = "Connecticut", Trump = 41.2, Clinton = 54.5, WinPercentage = 54.5, Winner = "Clinton", Population = 3574118 }, + new USAElectionResult { State = "Delaware", Trump = 53.4, Clinton = 41.9, WinPercentage = 53.4, Winner = "Trump", Population = 897936 }, + new USAElectionResult { State = "District of Columbia", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 693972 }, + new USAElectionResult { State = "Florida", Trump = 49.1, Clinton = 47.8, WinPercentage = 49.1, Winner = "Trump", Population = 18804623 }, + new USAElectionResult { State = "Georgia", Trump = 51.3, Clinton = 45.6, WinPercentage = 51.3, Winner = "Trump", Population = 9688681 }, + new USAElectionResult { State = "Hawaii", Trump = 62.2, Clinton = 30, WinPercentage = 62.2, Winner = "Trump", Population = 1360301 }, + new USAElectionResult { State = "Idaho", Trump = 59.2, Clinton = 27.6, WinPercentage = 59.2, Winner = "Trump", Population = 1567652 }, + new USAElectionResult { State = "Illinois", Trump = 55.4, Clinton = 39.4, WinPercentage = 55.4, Winner = "Trump", Population = 12831549 }, + new USAElectionResult { State = "Indiana", Trump = 57.2, Clinton = 37.9, WinPercentage = 57.2, Winner = "Trump", Population = 6484229 }, + new USAElectionResult { State = "Iowa", Trump = 51.8, Clinton = 42.2, WinPercentage = 51.8, Winner = "Trump", Population = 3046869 }, + new USAElectionResult { State = "Kansas", Trump = 57.2, Clinton = 36.2, WinPercentage = 57.2, Winner = "Trump", Population = 2853132 }, + new USAElectionResult { State = "Kentucky", Trump = 62.5, Clinton = 32.7, WinPercentage = 62.5, Winner = "Trump", Population = 4339349 }, + new USAElectionResult { State = "Louisiana", Trump = 58.1, Clinton = 38.4, WinPercentage = 58.1, Winner = "Trump", Population = 4533479 }, + new USAElectionResult { State = "Maine", Trump = 45.2, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1328361 }, + new USAElectionResult { State = "Maryland", Trump = 35.3, Clinton = 60.5, WinPercentage = 60.5, Winner = "Clinton", Population = 5773785 }, + new USAElectionResult { State = "Massachusetts", Trump = 33.5, Clinton = 60.8, WinPercentage = 60.8, Winner = "Clinton", Population = 6547817 }, + new USAElectionResult { State = "Michigan", Trump = 47.6, Clinton = 47.3, WinPercentage = 47.6, Winner = "Trump", Population = 9884129 }, + new USAElectionResult { State = "Minnesota", Trump = 45.4, Clinton = 46.9, WinPercentage = 46.9, Winner = "Trump", Population = 5303925 }, + new USAElectionResult { State = "Mississippi", Trump = 58.3, Clinton = 39.7, WinPercentage = 58.3, Winner = "Trump", Population = 2968103 }, + new USAElectionResult { State = "Missouri", Trump = 57.1, Clinton = 38.0, WinPercentage = 57.1, Winner = "Trump", Population = 5988927 }, + new USAElectionResult { State = "Montana", Trump = 56.5, Clinton = 36.0, WinPercentage = 56.5, Winner = "Trump", Population = 989417 }, + new USAElectionResult { State = "Nebraska", Trump = 60.3, Clinton = 34.0, WinPercentage = 60.3, Winner = "Trump", Population = 1826341 }, + new USAElectionResult { State = "Nevada", Trump = 45.5, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 2700691 }, + new USAElectionResult { State = "New Hampshire", Trump = 47.2, Clinton = 47.6, WinPercentage = 47.6, Winner = "Clinton", Population = 1316466 }, + new USAElectionResult { State = "New Jersey", Trump = 41.8, Clinton = 55.0, WinPercentage = 55, Winner = "Clinton", Population = 8791936 }, + new USAElectionResult { State = "New Mexico", Trump = 40.0, Clinton = 48.3, WinPercentage = 48.3, Winner = "Clinton", Population = 2059192 }, + new USAElectionResult { State = "New York", Trump = 37.5, Clinton = 58.8, WinPercentage = 58.8, Winner = "Clinton", Population = 19378087 }, + new USAElectionResult { State = "North Carolina", Trump = 50.5, Clinton = 46.7, WinPercentage = 50.5, Winner = "Trump", Population = 9535692 }, + new USAElectionResult { State = "North Dakota", Trump = 64.1, Clinton = 27.8, WinPercentage = 64.1, Winner = "Trump", Population = 672591 }, + new USAElectionResult { State = "Ohio", Trump = 52.1, Clinton = 43.5, WinPercentage = 52.5, Winner = "Trump", Population = 11536725 }, + new USAElectionResult { State = "Oklahoma", Trump = 65.3, Clinton = 28.9, WinPercentage = 65.3, Winner = "Trump", Population = 3751616 }, + new USAElectionResult { State = "Oregon", Trump = 41.1, Clinton = 51.7, WinPercentage = 51.7, Winner = "Clinton", Population = 3831073 }, + new USAElectionResult { State = "Pennsylvania", Trump = 48.8, Clinton = 47.6, WinPercentage = 48.8, Winner = "Trump", Population = 12702887 }, + new USAElectionResult { State = "Rhode Island", Trump = 39.8, Clinton = 55.4, WinPercentage = 55.4, Winner = "Clinton", Population = 1052931 }, + new USAElectionResult { State = "South Carolina", Trump = 54.9, Clinton = 40.8, WinPercentage = 54.9, Winner = "Trump", Population = 4625401 }, + new USAElectionResult { State = "South Dakota", Trump = 61.5, Clinton = 31.7, WinPercentage = 61.5, Winner = "Trump", Population = 814191 }, + new USAElectionResult { State = "Tennessee", Trump = 61.1, Clinton = 34.9, WinPercentage = 61.1, Winner = "Trump", Population = 6346275 }, + new USAElectionResult { State = "Texas", Trump = 52.6, Clinton = 43.4, WinPercentage = 52.6, Winner = "Trump", Population = 25146105 }, + new USAElectionResult { State = "Utah", Trump = 45.9, Clinton = 27.8, WinPercentage = 45.9, Winner = "Trump", Population = 2763888 }, + new USAElectionResult { State = "Vermont", Trump = 39.7, Clinton = 61.1, WinPercentage = 61.1, Winner = "Clinton", Population = 625745 }, + new USAElectionResult { State = "Virginia", Trump = 45.0, Clinton = 49.9, WinPercentage = 49.9, Winner = "Clinton", Population = 8001045 }, + new USAElectionResult { State = "Washington", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 6724543 }, + new USAElectionResult { State = "Wisconsin", Trump = 68.7, Clinton = 26.5, WinPercentage = 68.7, Winner = "Trump", Population = 5687289 }, + new USAElectionResult { State = "West Virginia", Trump = 47.9, Clinton = 46.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1853011 }, + new USAElectionResult { State = "Wyoming", Trump = 70.1, Clinton = 22.5, WinPercentage = 70.1, Winner = "Trump", Population = 583767 } }; public class LeafData @@ -505,17 +507,18 @@ When the TreeMap component renders within the Tab component, its rendering begin public double Percentage { get; set; } public int Rank { get; set; } }; + public List Economics = new List { - new LeafData { State="United States", GDP=17946, Percentage=11.08, Rank=1}, - new LeafData { State="China", GDP=10866, Percentage=28.42, Rank=2 }, - new LeafData { State="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new LeafData { State="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new LeafData { State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5 }, - new LeafData { State="France", GDP=2421, Percentage=-9.69, Rank=6 }, - new LeafData { State="India", GDP=2073, Percentage=13.65, Rank=7 }, - new LeafData { State="Italy", GDP=1814, Percentage=-12.45, Rank=8 }, - new LeafData { State="Brazil", GDP=1774, Percentage=-27.88, Rank=9 }, - new LeafData { State="Canada", GDP=1550, Percentage=-15.02, Rank=10 } + new LeafData { State = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new LeafData { State = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new LeafData { State = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new LeafData { State = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new LeafData { State = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new LeafData { State = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new LeafData { State = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new LeafData { State = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new LeafData { State = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new LeafData { State = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } @@ -525,9 +528,9 @@ When the TreeMap component renders within the Tab component, its rendering begin ## TreeMap component inside Dialog -When the TreeMap component renders within the Dialog component, its rendering begins concurrently with the Dialog component's rendering. As a result, the size of the TreeMap component will not be proper. To properly render the TreeMap component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the TreeMap component's rendering. The boolean variable is set to **false** by default, so the TreeMap component will not be rendered initially. When the Dialog component is being opened, its [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event is fired, and the boolean variable (i.e. **IsInitialRender**) must be set to **true** to initiate the render of the TreeMap component. When the Dialog component is closed, its [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Closed) event is triggered, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to false. +When TreeMap renders inside Dialog, both components initialize at the same time, which can cause incorrect sizing. Use a boolean flag (for example, **IsInitialRender**) to delay TreeMap rendering. Set the flag to **false** initially and set it to **true** in the Dialog’s [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Opened) event to start rendering. In the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Closed) event, set the flag back to **false**. -When you drag and resize the Dialog component, the TreeMap component is not notified, so the TreeMap are not properly rendered within the Dialog. To avoid this scenario, the TreeMap component's `RefreshAsync` method must be called in the Dialog's [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Resizing) and [OnResizeStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnResizeStop) events. Because the size of the Dialog is determined after a delay, a 500 millisecond delay must be provided before refreshing the TreeMap component. +During Dialog drag or resize, TreeMap is not automatically remeasured and may not fit. Call `RefreshAsync` in the Dialog’s [Resizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_Resizing) and [OnResizeStop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Popups.DialogEvents.html#Syncfusion_Blazor_Popups_DialogEvents_OnResizeStop) events. Because the Dialog size settles after a short delay, apply a 500 ms delay before refreshing. ```cshtml @@ -571,12 +574,14 @@ When you drag and resize the Dialog component, the TreeMap component is not noti + + @code { SfTreeMap TreeOne; public bool IsInitialRender { get; set; } @@ -591,38 +596,39 @@ When you drag and resize the Dialog component, the TreeMap component is not noti public string Company { get; set; } public int Sales { get; set; } } + public List DataSource = new List { - new CarSalesDetails { Continent="China", Company="Volkswagen", Sales=3005994 }, - new CarSalesDetails { Continent="China", Company="General Motors", Sales=1230044 }, - new CarSalesDetails { Continent="China", Company="Honda", Sales=1197023 }, - new CarSalesDetails { Continent="United States", Company="General Motors", Sales=3042775 }, - new CarSalesDetails { Continent="United States", Company="Ford", Sales=2599193 }, - new CarSalesDetails { Continent="United States", Company="Toyota", Sales=2449587 }, - new CarSalesDetails { Continent="Japan",Company="Toyota", Sales=1527977 }, - new CarSalesDetails { Continent="Japan", Company="Honda", Sales=706982 }, - new CarSalesDetails { Continent="Japan", Company="Suzuki", Sales=623041 }, - new CarSalesDetails { Continent="Germany",Company="Volkswagen", Sales=655977 }, - new CarSalesDetails { Continent="Germany", Company="Mercedes", Sales=310845 }, - new CarSalesDetails { Continent="Germany", Company="BMW", Sales=261931 }, - new CarSalesDetails { Continent="United Kingdom", Company="Ford ", Sales=319442 }, - new CarSalesDetails { Continent="United Kingdom", Company="Vauxhall", Sales=251146 }, - new CarSalesDetails { Continent="United Kingdom", Company="Volkswagen", Sales=206994 }, - new CarSalesDetails { Continent="India", Company="Maruti Suzuki", Sales=1443654 }, - new CarSalesDetails { Continent="India", Company="Hyundai", Sales=476241 }, - new CarSalesDetails { Continent="India", Company="Mahindra", Sales=205041 }, - new CarSalesDetails { Continent="France", Company="Renault", Sales=408183 }, - new CarSalesDetails { Continent="France", Company="Peugeot", Sales=336242 }, - new CarSalesDetails { Continent="France", Company="Citroen", Sales=194986 }, - new CarSalesDetails { Continent="Brazil", Company="Flat Chrysler", Sales=368842 }, - new CarSalesDetails { Continent="Brazil", Company="General Motors", Sales=348351 }, - new CarSalesDetails { Continent="Brazil", Company="Volkswagen", Sales=245895 }, - new CarSalesDetails { Continent="Italy", Company="Flat Chrysler", Sales=386260 }, - new CarSalesDetails { Continent="Italy", Company="Volkswagen", Sales=138984 }, - new CarSalesDetails { Continent="Italy", Company="Ford", Sales=125144 }, - new CarSalesDetails { Continent="Canada", Company="Ford", Sales=305086}, - new CarSalesDetails { Continent="Canada", Company="FCA", Sales=278011 }, - new CarSalesDetails { Continent="Canada", Company="GM", Sales=266884 }, - }; + new CarSalesDetails { Continent = "China", Company = "Volkswagen", Sales = 3005994 }, + new CarSalesDetails { Continent = "China", Company = "General Motors", Sales = 1230044 }, + new CarSalesDetails { Continent = "China", Company = "Honda", Sales = 1197023 }, + new CarSalesDetails { Continent = "United States", Company = "General Motors", Sales = 3042775 }, + new CarSalesDetails { Continent = "United States", Company = "Ford", Sales = 2599193 }, + new CarSalesDetails { Continent = "United States", Company = "Toyota", Sales = 2449587 }, + new CarSalesDetails { Continent = "Japan", Company = "Toyota", Sales = 1527977 }, + new CarSalesDetails { Continent = "Japan", Company = "Honda", Sales = 706982 }, + new CarSalesDetails { Continent = "Japan", Company = "Suzuki", Sales = 623041 }, + new CarSalesDetails { Continent = "Germany", Company = "Volkswagen", Sales = 655977 }, + new CarSalesDetails { Continent = "Germany", Company = "Mercedes", Sales = 310845 }, + new CarSalesDetails { Continent = "Germany", Company = "BMW", Sales = 261931 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Ford", Sales = 319442 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Vauxhall", Sales = 251146 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Volkswagen", Sales = 206994 }, + new CarSalesDetails { Continent = "India", Company = "Maruti Suzuki", Sales = 1443654 }, + new CarSalesDetails { Continent = "India", Company = "Hyundai", Sales = 476241 }, + new CarSalesDetails { Continent = "India", Company = "Mahindra", Sales = 205041 }, + new CarSalesDetails { Continent = "France", Company = "Renault", Sales = 408183 }, + new CarSalesDetails { Continent = "France", Company = "Peugeot", Sales = 336242 }, + new CarSalesDetails { Continent = "France", Company = "Citroen", Sales = 194986 }, + new CarSalesDetails { Continent = "Brazil", Company = "Flat Chrysler", Sales = 368842 }, + new CarSalesDetails { Continent = "Brazil", Company = "General Motors", Sales = 348351 }, + new CarSalesDetails { Continent = "Brazil", Company = "Volkswagen", Sales = 245895 }, + new CarSalesDetails { Continent = "Italy", Company = "Flat Chrysler", Sales = 386260 }, + new CarSalesDetails { Continent = "Italy", Company = "Volkswagen", Sales = 138984 }, + new CarSalesDetails { Continent = "Italy", Company = "Ford", Sales = 125144 }, + new CarSalesDetails { Continent = "Canada", Company = "Ford", Sales = 305086 }, + new CarSalesDetails { Continent = "Canada", Company = "FCA", Sales = 278011 }, + new CarSalesDetails { Continent = "Canada", Company = "GM", Sales = 266884 } + }; public async Task OnResizeStopHandler(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) { @@ -635,11 +641,13 @@ When you drag and resize the Dialog component, the TreeMap component is not noti this.ShowButton = false; IsInitialRender = true; } + private void DialogClose(Object args) { this.ShowButton = true; IsInitialRender = false; } + private void OnClicked() { this.Visibility = true; @@ -652,10 +660,9 @@ When you drag and resize the Dialog component, the TreeMap component is not noti ## TreeMap component inside Accordion -When the TreeMap component renders within the Accordion component, its rendering begins concurrently with the Accordion component's rendering. As a result, the size of the TreeMap component will not be proper. To properly render the TreeMap component, a boolean variable (i.e. **IsInitialRender**) must be created and it is used to determine the TreeMap component's rendering. The boolean variable is set to **false** by default, so the TreeMap component will not be rendered initially. When the Accordion component is rendered, its [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Created) event is fired, and the boolean variable (i.e. **IsInitialRender**) in this event must be changed to **true** to initiate the render of the TreeMap component. - -When you expand the Accordion component, the TreeMap component is not notified, so the TreeMap are not properly rendered within the Accordion. To avoid this scenario, the TreeMap component's `RefreshAsync` method must be called in the Accordion's [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanded) event. +When TreeMap renders inside Accordion, the components initialize concurrently, which can produce incorrect sizing. Use a boolean flag (for example, **IsInitialRender**) to control when TreeMap is created. Initialize the flag to **false**, and set it to **true** in the Accordion’s [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Created) event to start TreeMap rendering. +Expanding an Accordion item does not notify TreeMap automatically. Invoke `RefreshAsync` in the Accordion’s [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanded) event to render TreeMap correctly within the expanded content. ```cshtml @using Syncfusion.Blazor.Navigations @@ -671,24 +678,24 @@ When you expand the Accordion component, the TreeMap component is not notified, @if (IsInitialRender) { - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + } @@ -720,7 +727,7 @@ When you expand the Accordion component, the TreeMap component is not notified, @if (IsInitialRender) { - + @@ -735,13 +742,14 @@ When you expand the Accordion component, the TreeMap component is not notified, - + } + -@code{ + +@code { SfTreeMap TreeOne; SfTreeMap TreeTwo; SfTreeMap TreeThree; @@ -812,37 +821,38 @@ When you expand the Accordion component, the TreeMap component is not notified, public string Company { get; set; } public int Sales { get; set; } } + public List DataSource = new List { - new CarSalesDetails { Continent="China", Company="Volkswagen", Sales=3005994 }, - new CarSalesDetails { Continent="China", Company="General Motors", Sales=1230044 }, - new CarSalesDetails { Continent="China", Company="Honda", Sales=1197023 }, - new CarSalesDetails { Continent="United States", Company="General Motors", Sales=3042775 }, - new CarSalesDetails { Continent="United States", Company="Ford", Sales=2599193 }, - new CarSalesDetails { Continent="United States", Company="Toyota", Sales=2449587 }, - new CarSalesDetails { Continent="Japan",Company="Toyota", Sales=1527977 }, - new CarSalesDetails { Continent="Japan", Company="Honda", Sales=706982 }, - new CarSalesDetails { Continent="Japan", Company="Suzuki", Sales=623041 }, - new CarSalesDetails { Continent="Germany",Company="Volkswagen", Sales=655977 }, - new CarSalesDetails { Continent="Germany", Company="Mercedes", Sales=310845 }, - new CarSalesDetails { Continent="Germany", Company="BMW", Sales=261931 }, - new CarSalesDetails { Continent="United Kingdom", Company="Ford ", Sales=319442 }, - new CarSalesDetails { Continent="United Kingdom", Company="Vauxhall", Sales=251146 }, - new CarSalesDetails { Continent="United Kingdom", Company="Volkswagen", Sales=206994 }, - new CarSalesDetails { Continent="India", Company="Maruti Suzuki", Sales=1443654 }, - new CarSalesDetails { Continent="India", Company="Hyundai", Sales=476241 }, - new CarSalesDetails { Continent="India", Company="Mahindra", Sales=205041 }, - new CarSalesDetails { Continent="France", Company="Renault", Sales=408183 }, - new CarSalesDetails { Continent="France", Company="Peugeot", Sales=336242 }, - new CarSalesDetails { Continent="France", Company="Citroen", Sales=194986 }, - new CarSalesDetails { Continent="Brazil", Company="Flat Chrysler", Sales=368842 }, - new CarSalesDetails { Continent="Brazil", Company="General Motors", Sales=348351 }, - new CarSalesDetails { Continent="Brazil", Company="Volkswagen", Sales=245895 }, - new CarSalesDetails { Continent="Italy", Company="Flat Chrysler", Sales=386260 }, - new CarSalesDetails { Continent="Italy", Company="Volkswagen", Sales=138984 }, - new CarSalesDetails { Continent="Italy", Company="Ford", Sales=125144 }, - new CarSalesDetails { Continent="Canada", Company="Ford", Sales=305086}, - new CarSalesDetails { Continent="Canada", Company="FCA", Sales=278011 }, - new CarSalesDetails { Continent="Canada", Company="GM", Sales=266884 }, + new CarSalesDetails { Continent = "China", Company = "Volkswagen", Sales = 3005994 }, + new CarSalesDetails { Continent = "China", Company = "General Motors", Sales = 1230044 }, + new CarSalesDetails { Continent = "China", Company = "Honda", Sales = 1197023 }, + new CarSalesDetails { Continent = "United States", Company = "General Motors", Sales = 3042775 }, + new CarSalesDetails { Continent = "United States", Company = "Ford", Sales = 2599193 }, + new CarSalesDetails { Continent = "United States", Company = "Toyota", Sales = 2449587 }, + new CarSalesDetails { Continent = "Japan", Company = "Toyota", Sales = 1527977 }, + new CarSalesDetails { Continent = "Japan", Company = "Honda", Sales = 706982 }, + new CarSalesDetails { Continent = "Japan", Company = "Suzuki", Sales = 623041 }, + new CarSalesDetails { Continent = "Germany", Company = "Volkswagen", Sales = 655977 }, + new CarSalesDetails { Continent = "Germany", Company = "Mercedes", Sales = 310845 }, + new CarSalesDetails { Continent = "Germany", Company = "BMW", Sales = 261931 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Ford", Sales = 319442 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Vauxhall", Sales = 251146 }, + new CarSalesDetails { Continent = "United Kingdom", Company = "Volkswagen", Sales = 206994 }, + new CarSalesDetails { Continent = "India", Company = "Maruti Suzuki", Sales = 1443654 }, + new CarSalesDetails { Continent = "India", Company = "Hyundai", Sales = 476241 }, + new CarSalesDetails { Continent = "India", Company = "Mahindra", Sales = 205041 }, + new CarSalesDetails { Continent = "France", Company = "Renault", Sales = 408183 }, + new CarSalesDetails { Continent = "France", Company = "Peugeot", Sales = 336242 }, + new CarSalesDetails { Continent = "France", Company = "Citroen", Sales = 194986 }, + new CarSalesDetails { Continent = "Brazil", Company = "Flat Chrysler", Sales = 368842 }, + new CarSalesDetails { Continent = "Brazil", Company = "General Motors", Sales = 348351 }, + new CarSalesDetails { Continent = "Brazil", Company = "Volkswagen", Sales = 245895 }, + new CarSalesDetails { Continent = "Italy", Company = "Flat Chrysler", Sales = 386260 }, + new CarSalesDetails { Continent = "Italy", Company = "Volkswagen", Sales = 138984 }, + new CarSalesDetails { Continent = "Italy", Company = "Ford", Sales = 125144 }, + new CarSalesDetails { Continent = "Canada", Company = "Ford", Sales = 305086 }, + new CarSalesDetails { Continent = "Canada", Company = "FCA", Sales = 278011 }, + new CarSalesDetails { Continent = "Canada", Company = "GM", Sales = 266884 } }; public class USAElectionResult @@ -854,58 +864,59 @@ When you expand the Accordion component, the TreeMap component is not notified, public string Winner { get; set; } public double Population { get; set; } } + public List DataSourceUSA = new List { - new USAElectionResult { State="Alabama", Trump=62.9, Clinton=34.6, WinPercentage= 62.9, Winner="Trump", Population=4780127 }, - new USAElectionResult { State="Alaska", Trump=52.9, Clinton=37.7, WinPercentage= 52.9, Winner="Trump", Population=710249}, - new USAElectionResult { State="Arkansas", Trump=60.6, Clinton=33.7, WinPercentage=60.6, Winner="Trump", Population=2915958 }, - new USAElectionResult { State="Arizona", Trump=49.5, Clinton=45.4, WinPercentage=49.5, Winner="Trump", Population=6392307 }, - new USAElectionResult { State="California", Trump=32.8, Clinton=61.6, WinPercentage= 61.6, Winner="Clinton", Population=37252895}, - new USAElectionResult { State="Colorado", Trump=47.3, Clinton=44.4, WinPercentage= 47.3, Winner="Trump", Population=5029324 }, - new USAElectionResult { State="Connecticut", Trump=41.2, Clinton=54.5, WinPercentage= 54.5, Winner="Clinton", Population=3574118}, - new USAElectionResult { State="Delaware", Trump=53.4, Clinton=41.9, WinPercentage= 53.4, Winner="Trump", Population=897936 }, - new USAElectionResult { State="District of Columbia", Trump=4.1, Clinton=92.8, WinPercentage= 92.8, Winner="Clinton", Population=693972 }, - new USAElectionResult { State="Florida", Trump=49.1, Clinton=47.8, WinPercentage= 49.1, Winner="Trump", Population=18804623}, - new USAElectionResult { State="Georgia", Trump=51.3, Clinton=45.6, WinPercentage=51.3, Winner="Trump", Population=9688681}, - new USAElectionResult { State="Hawaii", Trump=62.2, Clinton=30, WinPercentage=62.2, Winner="Trump", Population=1360301 }, - new USAElectionResult { State="Idaho", Trump=59.2, Clinton=27.6, WinPercentage= 59.2, Winner="Trump", Population=1567652 }, - new USAElectionResult { State="Illinois", Trump=55.4, Clinton=39.4, WinPercentage= 55.4, Winner="Trump", Population=12831549 }, - new USAElectionResult { State="Indiana", Trump=57.2, Clinton=37.9, WinPercentage=57.2, Winner="Trump", Population=6484229 }, - new USAElectionResult { State="Iowa", Trump=51.8, Clinton=42.2, WinPercentage=51.8, Winner="Trump", Population=3046869 }, - new USAElectionResult { State="Kansas", Trump=57.2, Clinton=36.2, WinPercentage=57.2, Winner="Trump", Population=2853132, }, - new USAElectionResult { State="Kentucky", Trump=62.5, Clinton=32.7, WinPercentage=62.5, Winner="Trump", Population=4339349 }, - new USAElectionResult { State="Louisiana", Trump=58.1, Clinton=38.4, WinPercentage=58.1, Winner="Trump", Population=4533479 }, - new USAElectionResult { State="Maine", Trump=45.2, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=1328361}, - new USAElectionResult { State="Maryland", Trump=35.3, Clinton=60.5, WinPercentage=60.5, Winner="Clinton", Population=5773785 }, - new USAElectionResult { State="Massachusetts", Trump=33.5, Clinton=60.8, WinPercentage=60.8, Winner="Clinton", Population=6547817 }, - new USAElectionResult { State="Michigan", Trump=47.6, Clinton=47.3, WinPercentage=47.6, Winner="Trump", Population=9884129 }, - new USAElectionResult { State="Minnesota", Trump=45.4, Clinton=46.9, WinPercentage=46.9, Winner="Trump", Population=5303925 }, - new USAElectionResult { State="Mississippi", Trump=58.3, Clinton=39.7, WinPercentage=58.3, Winner="Trump", Population=2968103 }, - new USAElectionResult { State="Missouri", Trump=57.1, Clinton=38.0, WinPercentage=57.1, Winner="Trump", Population=5988927 }, - new USAElectionResult { State="Montana", Trump=56.5, Clinton=36.0, WinPercentage= 56.5, Winner="Trump", Population=989417 }, - new USAElectionResult { State="Nebraska", Trump=60.3, Clinton=34.0, WinPercentage=60.3, Winner="Trump", Population=1826341 }, - new USAElectionResult { State="Nevada", Trump=45.5, Clinton=47.9, WinPercentage=47.9, Winner="Clinton", Population=2700691 }, - new USAElectionResult { State="New Hampshire", Trump=47.2, Clinton=47.6, WinPercentage= 47.6, Winner="Clinton", Population=1316466 }, - new USAElectionResult { State="New Jersey", Trump=41.8, Clinton=55.0, WinPercentage=55, Winner="Clinton", Population=8791936}, - new USAElectionResult { State="New Mexico", Trump=40.0, Clinton=48.3, WinPercentage=48.3, Winner="Clinton", Population=2059192 }, - new USAElectionResult { State="New York", Trump=37.5, Clinton=58.8, WinPercentage=58.8, Winner="Clinton", Population=19378087}, - new USAElectionResult { State="North Carolina", Trump=50.5, Clinton=46.7, WinPercentage=50.5, Winner="Trump", Population=9535692 }, - new USAElectionResult { State="North Dakota", Trump=64.1, Clinton=27.8, WinPercentage=64.1, Winner="Trump", Population=672591 }, - new USAElectionResult { State="Ohio", Trump=52.1, Clinton=43.5, WinPercentage=52.5, Winner="Trump", Population=11536725 }, - new USAElectionResult { State="Oklahoma", Trump=65.3, Clinton=28.9, WinPercentage= 65.3, Winner="Trump", Population=3751616 }, - new USAElectionResult { State="Oregon", Trump=41.1, Clinton=51.7, WinPercentage=51.7, Winner="Clinton", Population=3831073 }, - new USAElectionResult { State="Pennsylvania", Trump=48.8, Clinton=47.6, WinPercentage= 48.8, Winner="Trump", Population=12702887}, - new USAElectionResult { State="Rhode Island", Trump=39.8, Clinton=55.4, WinPercentage= 55.4, Winner="Clinton", Population=1052931 }, - new USAElectionResult { State="South Carolina", Trump=54.9, Clinton=40.8, WinPercentage=54.9, Winner="Trump", Population=4625401}, - new USAElectionResult { State="South Dakota", Trump=61.5, Clinton=31.7, WinPercentage= 61.5, Winner="Trump", Population=814191 }, - new USAElectionResult { State="Tennessee", Trump=61.1, Clinton=34.9, WinPercentage=61.1, Winner="Trump", Population=6346275}, - new USAElectionResult { State="Texas", Trump=52.6, Clinton=43.4, WinPercentage=52.6, Winner="Trump", Population=25146105 }, - new USAElectionResult { State="Utah", Trump=45.9, Clinton=27.8, WinPercentage=45.9, Winner="Trump", Population=2763888, }, - new USAElectionResult { State="Vermont", Trump=39.7, Clinton=61.1, WinPercentage=61.1, Winner="Clinton", Population=625745 }, - new USAElectionResult { State="Virginia", Trump=45.0, Clinton=49.9, WinPercentage=49.9, Winner="Clinton", Population=8001045}, - new USAElectionResult { State="Washington", Trump=4.1, Clinton=92.8, WinPercentage=92.8, Winner="Clinton", Population=6724543 }, - new USAElectionResult { State="Wisconsin", Trump=68.7, Clinton=26.5, WinPercentage=68.7, Winner="Trump", Population=5687289}, - new USAElectionResult { State="West Virginia", Trump=47.9, Clinton=46.9, WinPercentage=47.9, Winner="Clinton", Population=1853011 }, - new USAElectionResult { State="Wyoming", Trump=70.1, Clinton=22.5, WinPercentage=70.1, Winner="Trump", Population=583767 } + new USAElectionResult { State = "Alabama", Trump = 62.9, Clinton = 34.6, WinPercentage = 62.9, Winner = "Trump", Population = 4780127 }, + new USAElectionResult { State = "Alaska", Trump = 52.9, Clinton = 37.7, WinPercentage = 52.9, Winner = "Trump", Population = 710249 }, + new USAElectionResult { State = "Arkansas", Trump = 60.6, Clinton = 33.7, WinPercentage = 60.6, Winner = "Trump", Population = 2915958 }, + new USAElectionResult { State = "Arizona", Trump = 49.5, Clinton = 45.4, WinPercentage = 49.5, Winner = "Trump", Population = 6392307 }, + new USAElectionResult { State = "California", Trump = 32.8, Clinton = 61.6, WinPercentage = 61.6, Winner = "Clinton", Population = 37252895 }, + new USAElectionResult { State = "Colorado", Trump = 47.3, Clinton = 44.4, WinPercentage = 47.3, Winner = "Trump", Population = 5029324 }, + new USAElectionResult { State = "Connecticut", Trump = 41.2, Clinton = 54.5, WinPercentage = 54.5, Winner = "Clinton", Population = 3574118 }, + new USAElectionResult { State = "Delaware", Trump = 53.4, Clinton = 41.9, WinPercentage = 53.4, Winner = "Trump", Population = 897936 }, + new USAElectionResult { State = "District of Columbia", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 693972 }, + new USAElectionResult { State = "Florida", Trump = 49.1, Clinton = 47.8, WinPercentage = 49.1, Winner = "Trump", Population = 18804623 }, + new USAElectionResult { State = "Georgia", Trump = 51.3, Clinton = 45.6, WinPercentage = 51.3, Winner = "Trump", Population = 9688681 }, + new USAElectionResult { State = "Hawaii", Trump = 62.2, Clinton = 30, WinPercentage = 62.2, Winner = "Trump", Population = 1360301 }, + new USAElectionResult { State = "Idaho", Trump = 59.2, Clinton = 27.6, WinPercentage = 59.2, Winner = "Trump", Population = 1567652 }, + new USAElectionResult { State = "Illinois", Trump = 55.4, Clinton = 39.4, WinPercentage = 55.4, Winner = "Trump", Population = 12831549 }, + new USAElectionResult { State = "Indiana", Trump = 57.2, Clinton = 37.9, WinPercentage = 57.2, Winner = "Trump", Population = 6484229 }, + new USAElectionResult { State = "Iowa", Trump = 51.8, Clinton = 42.2, WinPercentage = 51.8, Winner = "Trump", Population = 3046869 }, + new USAElectionResult { State = "Kansas", Trump = 57.2, Clinton = 36.2, WinPercentage = 57.2, Winner = "Trump", Population = 2853132 }, + new USAElectionResult { State = "Kentucky", Trump = 62.5, Clinton = 32.7, WinPercentage = 62.5, Winner = "Trump", Population = 4339349 }, + new USAElectionResult { State = "Louisiana", Trump = 58.1, Clinton = 38.4, WinPercentage = 58.1, Winner = "Trump", Population = 4533479 }, + new USAElectionResult { State = "Maine", Trump = 45.2, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1328361 }, + new USAElectionResult { State = "Maryland", Trump = 35.3, Clinton = 60.5, WinPercentage = 60.5, Winner = "Clinton", Population = 5773785 }, + new USAElectionResult { State = "Massachusetts", Trump = 33.5, Clinton = 60.8, WinPercentage = 60.8, Winner = "Clinton", Population = 6547817 }, + new USAElectionResult { State = "Michigan", Trump = 47.6, Clinton = 47.3, WinPercentage = 47.6, Winner = "Trump", Population = 9884129 }, + new USAElectionResult { State = "Minnesota", Trump = 45.4, Clinton = 46.9, WinPercentage = 46.9, Winner = "Trump", Population = 5303925 }, + new USAElectionResult { State = "Mississippi", Trump = 58.3, Clinton = 39.7, WinPercentage = 58.3, Winner = "Trump", Population = 2968103 }, + new USAElectionResult { State = "Missouri", Trump = 57.1, Clinton = 38.0, WinPercentage = 57.1, Winner = "Trump", Population = 5988927 }, + new USAElectionResult { State = "Montana", Trump = 56.5, Clinton = 36.0, WinPercentage = 56.5, Winner = "Trump", Population = 989417 }, + new USAElectionResult { State = "Nebraska", Trump = 60.3, Clinton = 34.0, WinPercentage = 60.3, Winner = "Trump", Population = 1826341 }, + new USAElectionResult { State = "Nevada", Trump = 45.5, Clinton = 47.9, WinPercentage = 47.9, Winner = "Clinton", Population = 2700691 }, + new USAElectionResult { State = "New Hampshire", Trump = 47.2, Clinton = 47.6, WinPercentage = 47.6, Winner = "Clinton", Population = 1316466 }, + new USAElectionResult { State = "New Jersey", Trump = 41.8, Clinton = 55.0, WinPercentage = 55, Winner = "Clinton", Population = 8791936 }, + new USAElectionResult { State = "New Mexico", Trump = 40.0, Clinton = 48.3, WinPercentage = 48.3, Winner = "Clinton", Population = 2059192 }, + new USAElectionResult { State = "New York", Trump = 37.5, Clinton = 58.8, WinPercentage = 58.8, Winner = "Clinton", Population = 19378087 }, + new USAElectionResult { State = "North Carolina", Trump = 50.5, Clinton = 46.7, WinPercentage = 50.5, Winner = "Trump", Population = 9535692 }, + new USAElectionResult { State = "North Dakota", Trump = 64.1, Clinton = 27.8, WinPercentage = 64.1, Winner = "Trump", Population = 672591 }, + new USAElectionResult { State = "Ohio", Trump = 52.1, Clinton = 43.5, WinPercentage = 52.5, Winner = "Trump", Population = 11536725 }, + new USAElectionResult { State = "Oklahoma", Trump = 65.3, Clinton = 28.9, WinPercentage = 65.3, Winner = "Trump", Population = 3751616 }, + new USAElectionResult { State = "Oregon", Trump = 41.1, Clinton = 51.7, WinPercentage = 51.7, Winner = "Clinton", Population = 3831073 }, + new USAElectionResult { State = "Pennsylvania", Trump = 48.8, Clinton = 47.6, WinPercentage = 48.8, Winner = "Trump", Population = 12702887 }, + new USAElectionResult { State = "Rhode Island", Trump = 39.8, Clinton = 55.4, WinPercentage = 55.4, Winner = "Clinton", Population = 1052931 }, + new USAElectionResult { State = "South Carolina", Trump = 54.9, Clinton = 40.8, WinPercentage = 54.9, Winner = "Trump", Population = 4625401 }, + new USAElectionResult { State = "South Dakota", Trump = 61.5, Clinton = 31.7, WinPercentage = 61.5, Winner = "Trump", Population = 814191 }, + new USAElectionResult { State = "Tennessee", Trump = 61.1, Clinton = 34.9, WinPercentage = 61.1, Winner = "Trump", Population = 6346275 }, + new USAElectionResult { State = "Texas", Trump = 52.6, Clinton = 43.4, WinPercentage = 52.6, Winner = "Trump", Population = 25146105 }, + new USAElectionResult { State = "Utah", Trump = 45.9, Clinton = 27.8, WinPercentage = 45.9, Winner = "Trump", Population = 2763888 }, + new USAElectionResult { State = "Vermont", Trump = 39.7, Clinton = 61.1, WinPercentage = 61.1, Winner = "Clinton", Population = 625745 }, + new USAElectionResult { State = "Virginia", Trump = 45.0, Clinton = 49.9, WinPercentage = 49.9, Winner = "Clinton", Population = 8001045 }, + new USAElectionResult { State = "Washington", Trump = 4.1, Clinton = 92.8, WinPercentage = 92.8, Winner = "Clinton", Population = 6724543 }, + new USAElectionResult { State = "Wisconsin", Trump = 68.7, Clinton = 26.5, WinPercentage = 68.7, Winner = "Trump", Population = 5687289 }, + new USAElectionResult { State = "West Virginia", Trump = 47.9, Clinton = 46.9, WinPercentage = 47.9, Winner = "Clinton", Population = 1853011 }, + new USAElectionResult { State = "Wyoming", Trump = 70.1, Clinton = 22.5, WinPercentage = 70.1, Winner = "Trump", Population = 583767 } }; public class LeafData @@ -915,20 +926,20 @@ When you expand the Accordion component, the TreeMap component is not notified, public double Percentage { get; set; } public int Rank { get; set; } }; + public List Economics = new List { - new LeafData { State="United States", GDP=17946, Percentage=11.08, Rank=1}, - new LeafData { State="China", GDP=10866, Percentage=28.42, Rank=2 }, - new LeafData { State="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new LeafData { State="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new LeafData { State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5 }, - new LeafData { State="France", GDP=2421, Percentage=-9.69, Rank=6 }, - new LeafData { State="India", GDP=2073, Percentage=13.65, Rank=7 }, - new LeafData { State="Italy", GDP=1814, Percentage=-12.45, Rank=8 }, - new LeafData { State="Brazil", GDP=1774, Percentage=-27.88, Rank=9 }, - new LeafData { State="Canada", GDP=1550, Percentage=-15.02, Rank=10 } + new LeafData { State = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new LeafData { State = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new LeafData { State = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new LeafData { State = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new LeafData { State = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new LeafData { State = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new LeafData { State = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new LeafData { State = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new LeafData { State = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new LeafData { State = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; - } ``` -![Blazor TreeMap inside Accordion component](../images/blazor-TreeMap-with-accordion.png) \ No newline at end of file +![Blazor TreeMap inside Accordion component](../images/blazor-TreeMap-with-accordion.png) diff --git a/blazor/treemap/internationalization.md b/blazor/treemap/internationalization.md index 220e4f8d11..18acf144ec 100644 --- a/blazor/treemap/internationalization.md +++ b/blazor/treemap/internationalization.md @@ -1,7 +1,7 @@ --- layout: post title: Globalization in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Globalization in Syncfusion Blazor TreeMap component and much more. +description: Check out and learn here all about Globalization in Syncfusion Blazor TreeMap component and much more. platform: Blazor control: TreeMap documentation: ug @@ -11,12 +11,12 @@ documentation: ug The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component supports globalization for the following elements: -* Data Label +* Data label * Tooltip -Globalization is the process of designing and developing a component that works in different cultures or locales. The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Format) property is used to globalize number, date, and time values in the TreeMap component. +Globalization enables a component to display numbers, dates, and times according to a specific culture or locale. The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Format) property globalizes number, date, and time values in the TreeMap component. -In the following code example, tooltip and Data Label is globalized to currency format in Deutsch culture. +In the following example, tooltips and data labels are formatted as currency based on the current application culture (for example, de-DE). ```cshtml @using Syncfusion.Blazor.TreeMap @@ -34,21 +34,23 @@ In the following code example, tooltip and Data Label is globalized to currency public double Percentage { get; set; } public int Rank { get; set; } }; + public List GrowthReports = new List { - new GDPReport {State="United States", GDP=17946, Percentage=11.08, Rank=1}, - new GDPReport {State="China", GDP=10866, Percentage= 28.42, Rank=2}, - new GDPReport {State="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new GDPReport {State="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new GDPReport {State="United Kingdom", GDP=2848, Percentage=8.28, Rank=5}, - new GDPReport {State="France", GDP=2421, Percentage=-9.69, Rank=6}, - new GDPReport {State="India", GDP=2073, Percentage=13.65, Rank=7}, - new GDPReport {State="Italy", GDP=1814, Percentage=-12.45, Rank=8}, - new GDPReport {State="Brazil", GDP=1774, Percentage=-27.88, Rank=9}, - new GDPReport {State="Canada", GDP=1550, Percentage=-15.02, Rank=10} + new GDPReport {State = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new GDPReport {State = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new GDPReport {State = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new GDPReport {State = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new GDPReport {State = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new GDPReport {State = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new GDPReport {State = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new GDPReport {State = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new GDPReport {State = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new GDPReport {State = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } + ``` -N> Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +N> Refer to the [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. -![Localization in Blazor TreeMap](images/Internationalization/blazor-treemap-localization.png) \ No newline at end of file +![Localization in Blazor TreeMap](images/Internationalization/blazor-treemap-localization.png) diff --git a/blazor/treemap/labels.md b/blazor/treemap/labels.md index f979282a6b..1ad4a8f08d 100644 --- a/blazor/treemap/labels.md +++ b/blazor/treemap/labels.md @@ -1,7 +1,7 @@ --- layout: post title: Labels in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Labels in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn here all about Labels in Syncfusion Blazor TreeMap component and much more details. platform: Blazor control: TreeMap documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Labels in Blazor TreeMap Component -Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPath) of the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). +Data labels identify item or group names in the TreeMap component. Labels are displayed by specifying a data source field in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPath) of the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). ## Formatting labels -Customize the labels for each item using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). +Customize item labels using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property in [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -29,23 +30,25 @@ Customize the labels for each item using the [LabelFormat](https://help.syncfusi public string Brand { get; set; } public int Count { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232 }, - new Car { Name="EcoSport", Brand="Ford", Count=121 }, - new Car { Name="Swift", Brand="Maruti", Count=143 }, - new Car { Name="Baleno", Brand="Maruti", Count=454 }, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 }, - new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 }, - new Car { Name="RS7 Sportback", Brand="Audi", Count=523 } + new Car { Name = "Mustang", Brand = "Ford", Count = 232 }, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121 }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143 }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454 }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 }, + new Car { Name = "A3 Cabriolet", Brand = "Audi",Count = 123 }, + new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 } }; } + ``` ![Blazor TreeMap with Data Label](images/datalabel/blazor-treemap-data-label.png) ## Label position -Customize the label position using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPosition) property by specifying any of the following locations. +Set the label position using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPosition) property to any of the following locations: * [BottomCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html#Syncfusion_Blazor_TreeMap_LabelPosition_BottomCenter) * [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html#Syncfusion_Blazor_TreeMap_LabelPosition_BottomLeft) @@ -58,22 +61,25 @@ Customize the label position using the [LabelPosition](https://help.syncfusion.c * [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html#Syncfusion_Blazor_TreeMap_LabelPosition_TopRight) ```cshtml + @using Syncfusion.Blazor.TreeMap + ``` -N> Refer to the [code block](#formatting-labels) to know about the property value of **Cars**. +N> See the [Formatting labels](#formatting-labels) section for the definition of the **Cars** data source. ![Blazor TreeMap Label in Custom Position](images/datalabel/blazor-treemap-label-in-custom-position.png) ## Intersect action -When the label size in each item exceeds the actual size, use the [InterSectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_InterSectAction) property in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) to customize the labels. +When a label's size exceeds the available space, control its behavior using the [InterSectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_InterSectAction) property in [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -81,24 +87,26 @@ When the label size in each item exceeds the actual size, use the [InterSectActi -@code{ +@code { public class Car { public string Name { get; set; } public string Brand { get;set; } public int Count { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford Motor Company", Count=232 }, - new Car { Name="Lincoln Continental Mark V", Brand="Ford Motor Company", Count=50}, - new Car { Name="EcoSport", Brand="Ford Motor Company", Count=121 }, - new Car { Name="Swift", Brand="Maruti", Count=143 }, - new Car { Name="Baleno", Brand="Maruti", Count=454 }, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 }, - new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 }, - new Car { Name="RS7 Sportback", Brand="Audi", Count=523 } + new Car { Name = "Mustang", Brand = "Ford Motor Company", Count = 232 }, + new Car { Name = "Lincoln Continental Mark V", Brand = "Ford Motor Company", Count = 50}, + new Car { Name = "EcoSport", Brand = "Ford Motor Company", Count = 121 }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143 }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454 }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 }, + new Car { Name = "A3 Cabriolet", Brand = "Audi",Count = 123 }, + new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 } }; } + ``` -![Blazor TreeMap Label with Intersect Options](images/datalabel/blazor-treemap-label-intersect-action.png) \ No newline at end of file +![Blazor TreeMap Label with Intersect Options](images/datalabel/blazor-treemap-label-intersect-action.png) diff --git a/blazor/treemap/layout.md b/blazor/treemap/layout.md index 8339759c8a..4cbaa65355 100644 --- a/blazor/treemap/layout.md +++ b/blazor/treemap/layout.md @@ -1,7 +1,7 @@ --- layout: post title: Layout in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Layout in Syncfusion Blazor TreeMap component and much more details. +description: Learn how to configure layout types and rendering directions in the Syncfusion Blazor TreeMap to control node arrangement and visual organization. platform: Blazor control: TreeMap documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Layout in Blazor TreeMap Component -Determine the visual representation of nodes belonging to all the TreeMap levels using the [LayoutType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_LayoutType) property. +Control how nodes at all TreeMap levels are arranged by using the [LayoutType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_LayoutType) property. ## Types of layout -The available layout types are, +The available layout types are: * [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_Squarified) * [SliceAndDiceVertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_SliceAndDiceVertical) @@ -22,9 +22,10 @@ The available layout types are, ### Squarified -The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_Squarified) layout displays the nested rectangles based on aspect ratio in the TreeMap. The rectangles will be split based on the height and width of the parent. The default rendering type of the layout is [Squarified](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html). +The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_Squarified) layout arranges nested rectangles to achieve balanced aspect ratios. Rectangles are split based on the parent’s width and height. The default layout is Squarified. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -38,82 +39,91 @@ The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap public double Percentage { get; set; } public int Rank { get; set; } }; + public List GrowthReports = new List { - new GDPReport {CountryName="United States", GDP=17946, Percentage=11.08, Rank=1}, - new GDPReport {CountryName="China", GDP=10866, Percentage= 28.42, Rank=2}, - new GDPReport {CountryName="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new GDPReport {CountryName="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new GDPReport {CountryName="United Kingdom", GDP=2848, Percentage=8.28, Rank=5}, - new GDPReport {CountryName="France", GDP=2421, Percentage=-9.69, Rank=6}, - new GDPReport {CountryName="India", GDP=2073, Percentage=13.65, Rank=7}, - new GDPReport {CountryName="Italy", GDP=1814, Percentage=-12.45, Rank=8}, - new GDPReport {CountryName="Brazil", GDP=1774, Percentage=-27.88, Rank=9}, - new GDPReport {CountryName="Canada", GDP=1550, Percentage=-15.02, Rank=10} + new GDPReport { CountryName = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new GDPReport { CountryName = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new GDPReport { CountryName = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new GDPReport { CountryName = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new GDPReport { CountryName = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new GDPReport { CountryName = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new GDPReport { CountryName = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new GDPReport { CountryName = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new GDPReport { CountryName = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new GDPReport { CountryName = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } + ``` ![Blazor TreeMap with Squarified Layout](images/Layout/blazor-treemap-squarified-layout.png) ### Slice and dice vertical -The [SliceAndDiceVertical](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a vertically sorted order. +The [SliceAndDiceVertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_SliceAndDiceVertical) layout creates rectangles with high aspect ratios and displays items in a vertically sorted order. ```cshtml + @using Syncfusion.Blazor.TreeMap; + ``` -N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**. +N> See the [Squarified](#squarified) section for the **GrowthReports** data model. ![Blazor TreeMap with Slice and DiceVertical Layout](images/Layout/blazor-treemap-slice-and-dicevertical-layout.png) ### Slice and dice horizontal -The [SliceAndDiceHorizontal](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a horizontally sorted order. +The [SliceAndDiceHorizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_SliceAndDiceHorizontal) layout creates rectangles with high aspect ratios and displays items in a horizontally sorted order. ```cshtml + @using Syncfusion.Blazor.TreeMap; + ``` -N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**. +N> See the [Squarified](#squarified) section for the **GrowthReports** data model. ![Blazor TreeMap with Slice and DiceHorizontal Layout](images/Layout/blazor-treemap-slice-and-dicehorizontal.png) ### Slice and dice auto -The [SliceAndDiceAuto](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items sorted both horizontally and vertically. +The [SliceAndDiceAuto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_SliceAndDiceAuto) layout creates rectangles with high aspect ratios and displays items sorted both horizontally and vertically. ```cshtml + @using Syncfusion.Blazor.TreeMap; + ``` -N> Refer to the [code block](#squarified) to know about the property value of the **GrowthReports**. +N> See the [Squarified](#squarified) section for the **GrowthReports** data model. ![Blazor TreeMap with Slice and DiceAuto Layout](images/Layout/blazor-treemap-slice-and-diceauto.png) ## Rendering direction -The direction of the TreeMap item is [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) by default and customize the rendering direction of the TreeMap item by setting the [RenderDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RenderDirection) property. +By default, items render from [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), and the rendering direction can be customized using the [RenderDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RenderDirection) property. The TreeMap can be rendered in the following directions: -* [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), -* [TopRightBottomLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), -* [BottomRightTopLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) -* [BottomLeftTopRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [TopRightBottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [BottomRightTopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [BottomLeftTopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) -The following example shows, how to render the TreeMap in the RTL direction with [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows how to render the TreeMap with [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```csharp + @using Syncfusion.Blazor.TreeMap; @@ -123,29 +133,32 @@ The following example shows, how to render the TreeMap in the RTL direction with -@code{ +@code { public class Fruit { public string Name { get; set; } public int Count { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000 }, - new Fruit { Name="Mango", Count=3000 }, - new Fruit { Name="Orange", Count=2300 }, - new Fruit { Name="Banana", Count=500 }, - new Fruit { Name="Grape", Count=4300 }, - new Fruit { Name="Papaya", Count=1200 }, - new Fruit { Name="Melon", Count=4500 } + new Fruit { Name = "Apple", Count = 5000 }, + new Fruit { Name = "Mango", Count = 3000 }, + new Fruit { Name = "Orange", Count = 2300 }, + new Fruit { Name = "Banana", Count = 500 }, + new Fruit { Name = "Grape", Count = 4300 }, + new Fruit { Name = "Papaya", Count = 1200 }, + new Fruit { Name = "Melon", Count = 4500 } }; } + ``` ![Blazor TreeMap in TopLeftBottomRight Direction](images/Internationalization/blazor-treemap-top-left-bottom-right-direction.png) -The following example shows, how to render the TreeMap in the RTL direction with [TopRightBottomLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows how to render the TreeMap with [TopRightBottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -154,15 +167,17 @@ The following example shows, how to render the TreeMap in the RTL direction with + ``` -N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**. +N> See [Rendering direction](#rendering-direction) for the **Fruits** data model. ![Blazor TreeMap in TopRightBottomLeft Direction](images/Internationalization/blazor-treemap-top-right-bottom-left-direction.png) -The following example shows, how to render the TreeMap in the RTL direction with [BottomRightTopLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows how to render the TreeMap with [BottomRightTopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -171,15 +186,17 @@ The following example shows, how to render the TreeMap in the RTL direction with + ``` -N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**. +N> See [Rendering direction](#rendering-direction) for the **Fruits** data model. ![Blazor TreeMap with BottomRightTopLeft Direction](images/Internationalization/blazor-treemap-bottom-right-top-left-direction.png) -The following example shows, how to render the TreeMap in the RTL direction with [BottomLeftTopRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows how to render the TreeMap with [BottomLeftTopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -188,8 +205,9 @@ The following example shows, how to render the TreeMap in the RTL direction with + ``` -N> Refer to the [code block](#rendering-direction) to know about the property value of **Fruits**. +N> See [Rendering direction](#rendering-direction) for the **Fruits** data model. -![Blazor TreeMap with BottomLeftTopRight Direction](images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png) \ No newline at end of file +![Blazor TreeMap with BottomLeftTopRight Direction](images/Internationalization/blazor-treemap-bottom-left-top-right-direction.png) diff --git a/blazor/treemap/leaf-item.md b/blazor/treemap/leaf-item.md index 05654b2b24..54e2e15d6a 100644 --- a/blazor/treemap/leaf-item.md +++ b/blazor/treemap/leaf-item.md @@ -1,7 +1,7 @@ --- layout: post title: Leaf Item in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Leaf Item in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn about configuring Leaf Items in the Syncfusion Blazor TreeMap component and much more details. platform: Blazor control: TreeMap documentation: ug @@ -9,23 +9,24 @@ documentation: ug # Leaf Item in Blazor TreeMap Component -A leaf item defines a visualized data element and does not contain child nodes but contains parent node if the levels are specified in the TreeMap. +A leaf item represents a visualized data element. It does not contain child nodes. When levels are defined in the TreeMap, a leaf item has a parent node. ## Customization -The following properties are available to customize the leaf item in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). -* [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Represents the item name, which is available in the data source. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the fill color for the leaf items. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the opacity of leaf item fill color. -* [ShowLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ShowLabels) - Specifies the visibility of the leaf item label. -* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the padding of leaf items -* [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelTemplate) - Specifies the template of leaf item label and the position of the template to be customized using the [TemplatePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_TemplatePosition) property. -* [TreeMapLeafLabelStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafLabelStyle.html) - To customize the label color, opacity, font size, font family, font weight and font style. -* [TreeMapLeafBorder](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafBorder.html) - Specifies leaf item border color and width. +The following properties are available to customize leaf items in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). +* [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Displays the item name from the data source. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Sets the fill color for leaf items. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Sets the opacity of the leaf item fill color. +* [ShowLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ShowLabels) - Controls the visibility of the leaf item label. +* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Sets the padding for leaf items. +* [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelTemplate) - Defines a template for the leaf item label. The [TemplatePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_TemplatePosition) property customizes the template position. +* [TreeMapLeafLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafLabelStyle.html) - Customizes label color, opacity, font size, font family, font weight, and font style. +* [TreeMapLeafBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafBorder.html) - Specifies the leaf item border color and width. -In the following example, the name of the property **CountryName** from data source is mapped to [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) property, so corresponding country name will be displayed in the label. +In the following example, the data source field **CountryName** is mapped to the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) property, so the corresponding country name is displayed in the label. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -35,7 +36,7 @@ In the following example, the name of the property **CountryName** from data sou -@code{ +@code { public class GDPReport { public string CountryName { get; set; } @@ -43,28 +44,31 @@ In the following example, the name of the property **CountryName** from data sou public double Percentage { get; set; } public int Rank { get; set; } }; + public List GrowthReports = new List { - new GDPReport {CountryName="United States", GDP=17946, Percentage=11.08, Rank=1}, - new GDPReport {CountryName="China", GDP=10866, Percentage= 28.42, Rank=2}, - new GDPReport {CountryName="Japan", GDP=4123, Percentage=-30.78, Rank=3}, - new GDPReport {CountryName="Germany", GDP=3355, Percentage=-5.19, Rank=4}, - new GDPReport {CountryName="United Kingdom", GDP=2848, Percentage=8.28, Rank=5}, - new GDPReport {CountryName="France", GDP=2421, Percentage=-9.69, Rank=6}, - new GDPReport {CountryName="India", GDP=2073, Percentage=13.65, Rank=7}, - new GDPReport {CountryName="Italy", GDP=1814, Percentage=-12.45, Rank=8}, - new GDPReport {CountryName="Brazil", GDP=1774, Percentage=-27.88, Rank=9}, - new GDPReport {CountryName="Canada", GDP=1550, Percentage=-15.02, Rank=10} + new GDPReport { CountryName = "United States", GDP = 17946, Percentage = 11.08, Rank = 1 }, + new GDPReport { CountryName = "China", GDP = 10866, Percentage = 28.42, Rank = 2 }, + new GDPReport { CountryName = "Japan", GDP = 4123, Percentage = -30.78, Rank = 3 }, + new GDPReport { CountryName = "Germany", GDP = 3355, Percentage = -5.19, Rank = 4 }, + new GDPReport { CountryName = "United Kingdom", GDP = 2848, Percentage = 8.28, Rank = 5 }, + new GDPReport { CountryName = "France", GDP = 2421, Percentage = -9.69, Rank = 6 }, + new GDPReport { CountryName = "India", GDP = 2073, Percentage = 13.65, Rank = 7 }, + new GDPReport { CountryName = "Italy", GDP = 1814, Percentage = -12.45, Rank = 8 }, + new GDPReport { CountryName = "Brazil", GDP = 1774, Percentage = -27.88, Rank = 9 }, + new GDPReport { CountryName = "Canada", GDP = 1550, Percentage = -15.02, Rank = 10 } }; } + ``` ![Blazor TreeMap with Leaf Item](images/LeafItem/blazor-treemap-leaf-item.png) ## Label position and format -Positioning the leaf item label using the [LabelPosition](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html) property and the text format can be customized by specifying data source properties name in the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property. +Use the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html) property to set the leaf item label position. Customize the text format by specifying data source field names in the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -73,25 +77,28 @@ Positioning the leaf item label using the [LabelPosition](https://help.syncfusio + ``` -N> Refer to the [code block](#customization) to know about the property value of the **GrowthReports**. +N> Refer to the [code block](#customization) for the **GrowthReports** property values. ![Changing Label Position and Format in Blazor TreeMap](images/LeafItem/blazor-treemap-change-label-position-format.png) ## Gap between the leaf items -The [Gap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_Gap) property is used to separate an item from another item. Each item rectangle is split into equal space with specified gap. +The [Gap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_Gap) property separates each item from adjacent items. Each item rectangle is divided with the specified gap. ```cshtml + @using Syncfusion.Blazor.TreeMap + ``` -N> Refer to the [code block](#customization) to know about the property value of the **GrowthReports**. +N> Refer to the [code block](#customization) for the **GrowthReports** property values. -![Gap in Blazor TreeMap Items](images/LeafItem/blazor-treemap-gap-between-item.png) \ No newline at end of file +![Gap in Blazor TreeMap Items](images/LeafItem/blazor-treemap-gap-between-item.png) diff --git a/blazor/treemap/legend.md b/blazor/treemap/legend.md index de374e171e..762b5c3a0f 100644 --- a/blazor/treemap/legend.md +++ b/blazor/treemap/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn how to configure and customize Legends in Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -9,25 +9,26 @@ documentation: ug # Legend in Blazor TreeMap Component -Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data. +A legend provides contextual information that helps interpret the values displayed in a TreeMap. Legends can use colors, shapes, or other identifiers based on the mapped data. -The below video demonstrates the customization of legend in Blazor TreeMap component. +The following video demonstrates legend customization in the Blazor TreeMap component. {% youtube "youtube:https://www.youtube.com/watch?v=2ilArsWz9u0"%} ## Types of legend -TreeMap component supports two different types of legend mode as following. +The TreeMap component supports two legend modes: * [Default](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendMode.html#Syncfusion_Blazor_TreeMap_LegendMode_Default) * [Interactive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendMode.html#Syncfusion_Blazor_TreeMap_LegendMode_Interactive) ### Default legend -In the default mode, the legends have symbols with legend labels that are used to identify the items in the TreeMap component. +In default mode, legends display symbols with labels that identify items in the TreeMap. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -49,24 +50,27 @@ In the default mode, the legends have symbols with legend labels that are used t public string Brand { get; set; } public int Count { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232}, - new Car { Name="EcoSport", Brand="Ford", Count=121}, - new Car { Name="Swift", Brand="Maruti", Count=143}, - new Car { Name="Baleno", Brand="Maruti", Count=454}, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545}, - new Car { Name="A3 Cabriolet", Brand="Audi", Count=123} + new Car { Name = "Mustang", Brand = "Ford", Count = 232 }, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121 }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143 }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454 }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 }, + new Car { Name = "A3 Cabriolet", Brand = "Audi", Count = 123 } }; } + ``` ![Blazor TreeMap with Legend](images/Legend/blazor-treemap-legend.png) ### Interactive legend -The legends can be made interactive with an arrow mark that indicates exact range color in the legend when the mouse hovers on the TreeMap item. Enable this option by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Mode) property in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html) to [Interactive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendMode.html#Syncfusion_Blazor_TreeMap_LegendMode_Interactive). +Interactive mode highlights the exact range color in the legend with an arrow indicator when hovering over a TreeMap item. Enable this by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Mode) property in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html) to [Interactive](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendMode.html#Syncfusion_Blazor_TreeMap_LegendMode_Interactive). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -80,17 +84,18 @@ The legends can be made interactive with an arrow mark that indicates exact rang + ``` -N> Refer to the [code block](#default-legend) to know about the property value of **Cars**. +N> Refer to the [code block](#default-legend) for the **Cars** data source. ![Blazor TreeMap with Interactive Legend](images/Legend/blazor-treemap-interactive-legend.png) ## Position and Alignment -The legend position is used to place the legend in various positions. Based on the legend position, the legend item will be aligned. For example, if the position is [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Top) or [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Bottom), the legend items are placed by rows. If the position is [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Left) or [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Right), the legend items are placed by columns. +Legend position determines where the legend is placed, and items are arranged accordingly. When positioned at [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Top) or [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Bottom), items are arranged in rows. When positioned at [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Left) or [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Right), items are arranged in columns. -The following options are available to customize the legend position: +The following options are available for legend position: * [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Top) * [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Bottom) @@ -100,6 +105,7 @@ The following options are available to customize the legend position: * [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Auto) ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -118,27 +124,30 @@ The following options are available to customize the legend position: public string FruitName { get; set; } public double Count { get; set; } }; + public List Fruits = new List { - new Fruit { FruitName="Apple", Count=5000 }, - new Fruit { FruitName="Mango", Count=3000 }, - new Fruit { FruitName="Orange", Count=2300 }, - new Fruit { FruitName="Banana", Count=500 }, - new Fruit { FruitName="Grape", Count=4300 }, - new Fruit { FruitName="Papaya", Count=1200 }, - new Fruit { FruitName="Melon", Count=4500 } + new Fruit { FruitName = "Apple", Count = 5000 }, + new Fruit { FruitName = "Mango", Count = 3000 }, + new Fruit { FruitName = "Orange", Count = 2300 }, + new Fruit { FruitName = "Banana", Count = 500 }, + new Fruit { FruitName = "Grape", Count = 4300 }, + new Fruit { FruitName = "Papaya", Count = 1200 }, + new Fruit { FruitName = "Melon", Count = 4500 } }; } + ``` ![Blazor TreeMap with Legend on Top](images/Legend/blazor-treemap-legend-position.png) -The legend alignment is used to align the legend items in a specific location. The following options are available to customize the legend alignment: +Legend alignment controls how items are aligned within the legend area. The available options are: * [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Near) * [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Center) * [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Far) ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -151,17 +160,19 @@ The legend alignment is used to align the legend items in a specific location. T + ``` -N> Refer to the [code block](#position-and-alignment) to know about the property value of **Fruits**. +N> Refer to the [code block](#position-and-alignment) for the **Fruits** data source. ![Changing Legend Alignment in Blazor TreeMap](images/Legend/blazor-treemap-legend-alignment.png) ## Legend size -Customize the legend size by modifying the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Height) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Width) properties in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). It accepts values in both percentage and pixel. +Customize the legend size by setting the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Width) properties in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). Values can be specified in pixels or percentages. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -183,25 +194,28 @@ Customize the legend size by modifying the [Height](https://help.syncfusion.com/ public string Brand { get; set; } public int Count { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232}, - new Car { Name="EcoSport", Brand="Ford", Count=121}, - new Car { Name="Swift", Brand="Maruti", Count=143}, - new Car { Name="Baleno", Brand="Maruti", Count=454}, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545}, - new Car { Name="A3 Cabriolet", Brand="Audi", Count=123}, - new Car { Name="RS7 Sportback", Brand="Audi", Count=523 } + new Car { Name = "Mustang", Brand = "Ford", Count = 232 }, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121 }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143 }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454 }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 }, + new Car { Name = "A3 Cabriolet", Brand = "Audi", Count = 123 }, + new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 } }; } + ``` ![Blazor TreeMap with Custom Legend Size](images/Legend/blazor-treemap-custom-legend-size.png) ### Legend with paging support -TreeMap supports legend paging, if the legend items cannot be placed within the provided [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Width) of the legend. +Legend paging is automatically enabled when legend items do not fit within the specified [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Width). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -224,25 +238,28 @@ TreeMap supports legend paging, if the legend items cannot be placed within the public string Brand { get; set; } public int Count { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232}, - new Car { Name="EcoSport", Brand="Ford", Count=121}, - new Car { Name="Swift", Brand="Maruti", Count=143}, - new Car { Name="Baleno", Brand="Maruti", Count=454}, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545}, - new Car { Name="A3 Cabriolet", Brand="Audi", Count=123}, - new Car { Name="RS7 Sportback", Brand="Audi", Count=523 } + new Car { Name = "Mustang", Brand = "Ford", Count = 232}, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121}, + new Car { Name = "Swift", Brand = "Maruti", Count = 143}, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454}, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545}, + new Car { Name = "A3 Cabriolet", Brand = "Audi", Count = 123}, + new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 } }; } + ``` ![Blazor TreeMap Legend with Paging](images/Legend/blazor-treemap-legend-paging.png) ## Excluded legend items from the color mapping -Based on the mapping ranges in the data source, get the excluded ranges from the color mapping, and show the legend with the excluded range values that are bound to the specific legend. +Based on the defined mapping ranges, excluded ranges are identified and shown in the legend as items representing values not covered by explicit ranges. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -263,23 +280,25 @@ Based on the mapping ranges in the data source, get the excluded ranges from the public string FruitName { get; set; } public double Count { get; set; } }; + public List Fruits = new List { - new Fruit { FruitName="Apple", Count=5000 }, - new Fruit { FruitName="Mango", Count=3000 }, - new Fruit { FruitName="Orange", Count=2300 }, - new Fruit { FruitName="Banana", Count=500 }, - new Fruit { FruitName="Grape", Count=4300 }, - new Fruit { FruitName="Papaya", Count=1200 }, - new Fruit { FruitName="Melon", Count=4500 } + new Fruit { FruitName = "Apple", Count = 5000 }, + new Fruit { FruitName = "Mango", Count = 3000 }, + new Fruit { FruitName = "Orange", Count = 2300 }, + new Fruit { FruitName = "Banana", Count = 500 }, + new Fruit { FruitName = "Grape", Count = 4300 }, + new Fruit { FruitName = "Papaya", Count = 1200 }, + new Fruit { FruitName = "Melon", Count = 4500 } }; } + ``` ![Blazor TreeMap Legend for Excluded Items](images/Legend/blazor-treemap-exclude-legend.png) ## Hide desired legend items -To enable or disable the desired legend item for each color mapping, set the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html) property to **true** in the [TreeMapLeafColorMappings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping). +Control legend visibility for individual color mappings by setting the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html#Syncfusion_Blazor_TreeMap_TreeMapLeafColorMapping_ShowLegend) property on each mapping in [TreeMapLeafColorMappings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping). ```cshtml @using Syncfusion.Blazor.TreeMap @@ -302,14 +321,15 @@ To enable or disable the desired legend item for each color mapping, set the [Sh public string FruitName { get; set; } public double Count { get; set; } }; + public List Fruits = new List { - new Fruit { FruitName="Apple", Count=5000 }, - new Fruit { FruitName="Mango", Count=3000 }, - new Fruit { FruitName="Orange", Count=2300 }, - new Fruit { FruitName="Banana", Count=500 }, - new Fruit { FruitName="Grape", Count=4300 }, - new Fruit { FruitName="Papaya", Count=1200 }, - new Fruit { FruitName="Melon", Count=4500 } + new Fruit { FruitName = "Apple", Count = 5000 }, + new Fruit { FruitName = "Mango", Count = 3000 }, + new Fruit { FruitName = "Orange", Count = 2300 }, + new Fruit { FruitName = "Banana", Count = 500 }, + new Fruit { FruitName = "Grape", Count = 4300 }, + new Fruit { FruitName = "Papaya", Count = 1200 }, + new Fruit { FruitName = "Melon", Count = 4500 } }; } ``` @@ -318,7 +338,7 @@ To enable or disable the desired legend item for each color mapping, set the [Sh ## Hide legend items based on the data source value -To enable or disable the legend visibility for each item through the data source, bind the appropriate data source property name to [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_ShowLegendPath) property in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). +Control legend visibility per item through the data source by binding the appropriate field to the [ShowLegendPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_ShowLegendPath) property in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). ```cshtml @using Syncfusion.Blazor.TreeMap @@ -330,7 +350,7 @@ To enable or disable the legend visibility for each item through the data source -@code{ +@code { public class Fruit { public string Name { get; set; } @@ -338,25 +358,28 @@ To enable or disable the legend visibility for each item through the data source public bool Visibility { get; set; } public string Color { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000, Visibility= true , Color="red" }, - new Fruit { Name="Mango", Count=3000, Visibility= false , Color="blue"}, - new Fruit { Name="Orange", Count=2300, Visibility= true , Color="green" }, - new Fruit { Name="Banana", Count=500, Visibility= false , Color = "yellow"}, - new Fruit { Name="Grape", Count=4300, Visibility= true , Color="pink"}, - new Fruit { Name="Papaya", Count=1200, Visibility= false, Color="orange" }, - new Fruit { Name="Melon", Count=4500, Visibility= true , Color="purple"} + new Fruit { Name = "Apple", Count = 5000, Visibility = true , Color = "red" }, + new Fruit { Name = "Mango", Count = 3000, Visibility = false , Color = "blue" }, + new Fruit { Name = "Orange", Count = 2300, Visibility = true , Color = "green" }, + new Fruit { Name = "Banana", Count = 500, Visibility = false , Color = "yellow" }, + new Fruit { Name = "Grape", Count = 4300, Visibility = true , Color = "pink" }, + new Fruit { Name = "Papaya", Count = 1200, Visibility = false, Color = "orange" }, + new Fruit { Name = "Melon", Count = 4500, Visibility = true , Color = "purple" } }; } + ``` ![Hiding Blazor TreeMap Legend Based on Datasource](images/Legend/blazor-treemap-hide-legend-item.png) ## Bind legend item text from the data source -To show the legend item text from the data source, bind the property name from the data source to the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_ValuePath) property in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). +Bind legend text from the data source by setting the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_ValuePath) property in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -366,32 +389,35 @@ To show the legend item text from the data source, bind the property name from t -@code{ +@code { public class Fruit { public string Name { get; set; } public int Count { get; set; } public string Color { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000, Color="red" }, - new Fruit { Name="Mango", Count=3000, Color="blue"}, - new Fruit { Name="Orange", Count=2300, Color="green" }, - new Fruit { Name="Banana", Count=500, Color = "yellow"}, - new Fruit { Name="Grape", Count=4300, Color="pink"}, - new Fruit { Name="Papaya", Count=1200, Color="orange" }, - new Fruit { Name="Melon", Count=4500, Color="purple"} + new Fruit { Name = "Apple", Count = 5000, Color = "red" }, + new Fruit { Name = "Mango", Count = 3000, Color = "blue" }, + new Fruit { Name = "Orange", Count = 2300, Color = "green" }, + new Fruit { Name = "Banana", Count = 500, Color = "yellow" }, + new Fruit { Name = "Grape", Count = 4300, Color = "pink" }, + new Fruit { Name = "Papaya", Count = 1200, Color = "orange" }, + new Fruit { Name = "Melon", Count = 4500, Color = "purple" } }; } + ``` ![Blazor TreeMap Legend Text with Data Binding](images/Legend/blazor-treemap-legend-text-with-binding.png) ## Hide duplicate legend items -To enable or disable the duplicate legend items, set the [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_RemoveDuplicateLegend) property to **true** in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). +Remove duplicate legend items by setting the [RemoveDuplicateLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_RemoveDuplicateLegend) property to true in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -401,33 +427,36 @@ To enable or disable the duplicate legend items, set the [RemoveDuplicateLegend] -@code{ +@code { public class Fruit { public string Name { get; set; } public int Count { get; set; } public string Color { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000, Color="red" }, - new Fruit { Name="Apple", Count=2300, Color="yellow" }, - new Fruit { Name="Mango", Count=3000, Color="blue"}, - new Fruit { Name="Orange", Count=2300, Color="green" }, - new Fruit { Name="Banana", Count=500, Color = "yellow"}, - new Fruit { Name="Grape", Count=4300, Color="pink"}, - new Fruit { Name="Papaya", Count=1200, Color="orange" }, - new Fruit { Name="Melon", Count=4500, Color="purple"} + new Fruit { Name = "Apple", Count = 5000, Color = "red" }, + new Fruit { Name = "Apple", Count = 2300, Color = "yellow" }, + new Fruit { Name = "Mango", Count = 3000, Color = "blue" }, + new Fruit { Name = "Orange", Count = 2300, Color = "green" }, + new Fruit { Name = "Banana", Count = 500, Color = "yellow" }, + new Fruit { Name = "Grape", Count = 4300, Color = "pink" }, + new Fruit { Name = "Papaya", Count = 1200, Color = "orange" }, + new Fruit { Name = "Melon", Count = 4500, Color = "purple"} }; } + ``` ![Hiding Duplicate Legend Item in Blazor TreeMap](images/Legend/blazor-treemap-hide-duplicate-legend.png) ## Positioning based on size -Use a responsive legend that switches positions between the right and the bottom based on the available height and width. To enable the responsive legend, set the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html) property to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Auto) in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html) and the legend position is changed based on the available height and width. +Use a responsive legend that switches between the right and bottom positions based on available height and width. To enable this behavior, set [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html) to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Auto) in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). The position adjusts automatically based on the available space. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -437,31 +466,34 @@ Use a responsive legend that switches positions between the right and the bottom -@code{ +@code { public class Fruit { public string Name { get; set; } public int Count { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000 }, - new Fruit { Name="Mango", Count=3000 }, - new Fruit { Name="Orange", Count=2300 }, - new Fruit { Name="Banana", Count=500 }, - new Fruit { Name="Grape", Count=4300 }, - new Fruit { Name="Papaya", Count=1200 }, - new Fruit { Name="Melon", Count=4500 } + new Fruit { Name = "Apple", Count = 5000 }, + new Fruit { Name = "Mango", Count = 3000 }, + new Fruit { Name = "Orange", Count = 2300 }, + new Fruit { Name = "Banana", Count = 500 }, + new Fruit { Name = "Grape", Count = 4300 }, + new Fruit { Name = "Papaya", Count = 1200 }, + new Fruit { Name = "Melon", Count = 4500 } }; } + ``` ![Displaying Blazor TreeMap Legend Position based on Size](images/Legend/blazor-treemap-legend-position-based-on-size.png) ## Legend with RTL support -Set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableRtl) property to **true**, the legend icon will be rendered on the right and the legend text will be rendered on the left of the legend icon. +Set [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableRtl) to **true** to render the legend icon on the right and the legend text on the left. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -479,15 +511,17 @@ Set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Tree public int Count { get; set; } public string Color { get; set; } }; + public List Cars = new List { - new Car { Name="Mustang", Brand="Ford", Count=232, Color= "#71B081" }, - new Car { Name="EcoSport", Brand="Ford", Count=121, Color= "#5A9A77" }, - new Car { Name="Swift", Brand="Maruti", Count=143, Color= "#498770" }, - new Car { Name="Baleno", Brand="Maruti", Count=454, Color= "#39776C" }, - new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 , Color= "#266665" }, - new Car { Name="A3 Cabriolet", Brand="Audi",Count=123, Color= "#124F5E" } + new Car { Name = "Mustang", Brand = "Ford", Count = 232, Color = "#71B081" }, + new Car { Name = "EcoSport", Brand = "Ford", Count = 121, Color = "#5A9A77" }, + new Car { Name = "Swift", Brand = "Maruti", Count = 143, Color = "#498770" }, + new Car { Name = "Baleno", Brand = "Maruti", Count = 454, Color = "#39776C" }, + new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 , Color = "#266665" }, + new Car { Name = "A3 Cabriolet", Brand = "Audi", Count = 123, Color = "#124F5E" } }; } + ``` ![Right to Left in Blazor TreeMap Legend](images/Internationalization/blazor-treemap-legend-right-to-left.png) diff --git a/blazor/treemap/levels.md b/blazor/treemap/levels.md index 3ff1d0819a..9eca513819 100644 --- a/blazor/treemap/levels.md +++ b/blazor/treemap/levels.md @@ -1,7 +1,7 @@ --- layout: post title: Levels in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Levels in Syncfusion Blazor TreeMap component and much more details. +description: Checkout and learn about configuring Levels in the Syncfusion Blazor TreeMap component and much more details. platform: Blazor control: TreeMap documentation: ug @@ -9,15 +9,16 @@ documentation: ug # Levels in Blazor TreeMap Component -TreeMap supports **n** number of levels and each level is separated by using the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property. +TreeMap supports multiple hierarchical levels. Each level is defined using the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property. ## Group path -The [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property is used to separate each level of the TreeMap by specifying the property from the data source. +Use the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property to define each TreeMap level by specifying a field from the data source. -In the following example, three levels are added and each level is configured using the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property. +In the following example, three levels are configured using the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -37,7 +38,7 @@ In the following example, three levels are added and each level is configured us -@code{ +@code { public class Employee { public string Country { get; set; } @@ -45,28 +46,31 @@ In the following example, three levels are added and each level is configured us public string JobGroup { get; set; } public int EmployeeCount { get; set; } }; + public List Employees = new List { - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Executive", EmployeeCount= 20 }, - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Analyst", EmployeeCount= 30 }, - new Employee { Country= "USA", JobDescription= "Marketing", EmployeeCount= 40 }, - new Employee { Country= "USA", JobDescription= "Management", EmployeeCount= 80 }, - new Employee { Country= "India", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 100 }, - new Employee { Country= "India", JobDescription= "HR Executives", EmployeeCount= 30 }, - new Employee { Country= "India", JobDescription= "Accounts", EmployeeCount= 40 }, - new Employee { Country= "UK", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 30 }, - new Employee { Country= "UK", JobDescription= "HR Executives", EmployeeCount= 50 }, - new Employee { Country= "UK", JobDescription= "Accounts", EmployeeCount= 60 } + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Executive", EmployeeCount = 20 }, + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Analyst", EmployeeCount = 30 }, + new Employee { Country = "USA", JobDescription = "Marketing", EmployeeCount = 40 }, + new Employee { Country = "USA", JobDescription = "Management", EmployeeCount = 80 }, + new Employee { Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 100 }, + new Employee { Country = "India", JobDescription = "HR Executives", EmployeeCount = 30 }, + new Employee { Country = "India", JobDescription = "Accounts", EmployeeCount = 40 }, + new Employee { Country = "UK", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 30 }, + new Employee { Country = "UK", JobDescription = "HR Executives", EmployeeCount = 50 }, + new Employee { Country = "UK", JobDescription = "Accounts", EmployeeCount = 60 } }; } + ``` ![Multiple Blazor TreeMap Levels with Group](images/Levels/blazor-treemap-levels-with-group-path.png) ## Gap between groups -The [GroupGap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupGap) property is used to separate an item from each group or another item to differentiate the levels mentioned in the TreeMap. +The [GroupGap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupGap) property adds spacing between groups or items to visually distinguish TreeMap levels. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -85,17 +89,19 @@ The [GroupGap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.T + ``` -N> Refer to the [code block](#group-path) to know about the property value of the **Employees**. +N> For the **Employees** data model and sample values, see the [code block](#group-path) in the Group path section. ![Blazor TreeMap Levels with Group Gap](images/Levels/blazor-treemap-levels-with-group-gap.png) ## Header height and style -Customize the font color, family, weight, opacity and size using the [TreeMapHeaderStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHeaderStyle.html). Based on the font settings, the header height is given using the [HeaderHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderHeight) property in the [TreeMapLevel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html). +Customize header font color, family, weight, opacity, and size using [TreeMapHeaderStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHeaderStyle.html). Adjust header height using the [HeaderHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderHeight) property in [TreeMapLevel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -117,23 +123,25 @@ Customize the font color, family, weight, opacity and size using the [TreeMapHea + ``` -N> Refer to the [code block](#group-path) to know about the property value of **Employees**. +N> For the **Employees** data model and sample values, see the [code block](#group-path) in the Group path section. ![Blazor TreeMap with Custom Header Height and Style](images/Levels/blazor-treemap-custom-header-height.png) ## Customization -The following properties are available to customize the header content in the [TreeMapLevel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html). +The following properties are available to customize header content in [TreeMapLevel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html). -* [HeaderFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderFormat) - Represents the header name, which is available in the data source. -* [ShowHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_ShowHeader) - Specifies to visibility of the header. -* [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderTemplate) - Specifies the template of the header and the position of the template to be customized using the [TemplatePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_TemplatePosition) property. -* [TreeMapLevelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevelBorder.html) - Specifies TreeMap level border color and width. -* [HeaderAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderAlignment) - Align the header to [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Near), [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Center) and [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Far). +* [HeaderFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderFormat) - Represents the header text using values from the data source. +* [ShowHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_ShowHeader) - Specifies the visibility of the header. +* [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderTemplate) - Defines the header template; the template position is customized using [TemplatePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_TemplatePosition). +* [TreeMapLevelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevelBorder.html) - Configures the TreeMap level border color and width. +* [HeaderAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_HeaderAlignment) - Aligns the header to [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Near), [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Center), or [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.Alignment.html#Syncfusion_Blazor_TreeMap_Alignment_Far). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -152,8 +160,9 @@ The following properties are available to customize the header content in the [T + ``` -N> Refer to the [code block](#group-path) to know about the property value of `Employees`. +N> For the **Employees** data model and sample values, see the [code block](#group-path) in the Group path section. -![Customizing Header Alignment in Blazor TreeMap](images/Levels/blazor-treemap-header-alignment.png) \ No newline at end of file +![Customizing Header Alignment in Blazor TreeMap](images/Levels/blazor-treemap-header-alignment.png) diff --git a/blazor/treemap/methods.md b/blazor/treemap/methods.md index 98ffc609b6..461ae83743 100644 --- a/blazor/treemap/methods.md +++ b/blazor/treemap/methods.md @@ -1,7 +1,7 @@ --- layout: post title: Methods in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Methods in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn how to make use of the available methods in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Methods in Blazor TreeMap Component -Create an object for the TreeMap component using `@ref` property and call the desired TreeMap method. +Create a component reference with the `@ref` attribute and invoke TreeMap methods as needed. ## Print -To print the rendered TreeMap component by setting the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPrint) property to **true** and using the `PrintAsync` method. +Print the rendered TreeMap by enabling the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPrint) property and calling the `PrintAsync` method. ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -26,39 +27,44 @@ To print the rendered TreeMap component by setting the [AllowPrint](https://help @code { public SfTreeMap Treemap { get; set; } + public async Task PrintMap() { await Treemap.PrintAsync(); } + public class Country { public string Name { get; set; } public double GDP { get; set; } } + public List growthReport = new List { - new Country {Name="United States", GDP=17946 }, - new Country {Name="China", GDP=10866 }, - new Country {Name="Japan", GDP=4123 }, + new Country {Name = "United States", GDP = 17946 }, + new Country {Name = "China", GDP = 10866 }, + new Country {Name = "Japan", GDP = 4123 } }; } + ``` ## Export -Using `ExportAsync` method the current TreeMap component will be exported to different file formats such as [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PNG), [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF), [JPEG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_JPEG) and [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_SVG). +Use the `ExportAsync` method to export the current TreeMap to [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PNG), [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF), [JPEG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_JPEG), or [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_SVG). -The [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) and [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) property represents to allow the file to be downloaded in an image and pdf type export. +The [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) and [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) properties enable image and PDF export. -| Arguments | Description | -|----------------------| ----------------------------------------------------| -| type | Defines the export type such as **PNG**, **PDF**, **JPEG** and **SVG**. | -| fileName | Defines the file name. | -| orientation | Defines the orientation such as **horizontal** and **vertical**. | -| allowDownload | Defines the export file to be downloaded or not. | +| Arguments | Description | +|-------------|-----------------------------------------------------------------------------| +| type | Defines the export type such as **PNG**, **PDF**, **JPEG**, and **SVG**. | +| fileName | Defines the file name. | +| orientation | Defines the page orientation such as **Portrait** and **Landscape**. | +| allowDownload | Defines whether the exported file is downloaded. | -N> Export method returns the **Base64** string, if **allowDownload** argument is set to **false**. To download the file, paste the returned **Base64** string in the browser URL bar and press the enter button. +N> The export method returns a **Base64** string when **allowDownload** is set to **false**. To download the file, paste the returned **Base64** string into the browser address bar and press Enter. ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -69,26 +75,30 @@ N> Export method returns the **Base64** string, if **allowDownload** argument is @code { public SfTreeMap Treemap { get; set; } + public async Task ExportMap() { await Treemap.ExportAsync(ExportType.SVG, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait, true); } + public class Country { public string Name { get; set; } public double GDP { get; set; } } + private List growthReport = new List { - new Country {Name="United States", GDP=17946 }, - new Country {Name="China", GDP=10866 }, - new Country {Name="Japan", GDP=4123 }, + new Country {Name = "United States", GDP = 17946 }, + new Country {Name = "China", GDP = 10866 }, + new Country {Name = "Japan", GDP = 4123 } }; } + ``` ## Refresh -The `RefreshAsync` method helps to refresh the TreeMap component. +The `RefreshAsync` method refreshes the TreeMap component. ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -99,33 +109,38 @@ The `RefreshAsync` method helps to refresh the TreeMap component. @code { public SfTreeMap Treemap { get; set; } + public async Task RefreshCall() { await Treemap.RefreshAsync(); } + public class Country { public string Name { get; set; } public double GDP { get; set; } } + private List growthReport = new List { - new Country {Name="United States", GDP=17946 }, - new Country {Name="China", GDP=10866 }, - new Country {Name="Japan", GDP=4123 }, + new Country {Name = "United States", GDP = 17946 }, + new Country {Name = "China", GDP = 10866 }, + new Country {Name = "Japan", GDP = 4123 } }; } + ``` ## SelectItem -The `SelectItemAsync` method can be used to select or unselect the TreeMap item programmatically. +The `SelectItemAsync` method selects or clears a TreeMap item programmatically. -| Arguments | Description | -|----------------------| ----------------------------------------------------| -| levelOrder | Defines the level order name for the treemap item. | -| isSelected | Defines whether it has to select or unselect. | +| Arguments | Description | +|------------|-----------------------------------------------------------| +| levelOrder | Defines the level order name for the TreeMap item. | +| isSelected | Specifies whether to select or clear the item. | ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -138,19 +153,23 @@ The `SelectItemAsync` method can be used to select or unselect the TreeMap item @code { public SfTreeMap Treemap { get; set; } + public async Task SelectCall() { await Treemap.SelectItemAsync(new string[] { "United States" }, true); } + public class Country { public string Name { get; set; } public double GDP { get; set; } } + private List growthReport = new List { - new Country {Name="United States", GDP=17946 }, - new Country {Name="China", GDP=10866 }, - new Country {Name="Japan", GDP=4123 }, + new Country {Name = "United States", GDP = 17946 }, + new Country {Name = "China", GDP = 10866 }, + new Country {Name = "Japan", GDP = 4123 } }; } + ``` \ No newline at end of file diff --git a/blazor/treemap/print-and-export.md b/blazor/treemap/print-and-export.md index 1d6c9f2072..c3fd9b39a7 100644 --- a/blazor/treemap/print-and-export.md +++ b/blazor/treemap/print-and-export.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Print and Export in Syncfusion Blazor TreeMap component and much more. +description: Check out and learn how to configure and utilize Print and Export feature in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -11,9 +11,10 @@ documentation: ug ## Print -The `PrintAsync` method can be used to print a rendered TreeMap directly from the browser and it can be enabled by setting the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPrint) property to **true**. +Use the `PrintAsync` method to print a rendered TreeMap directly from the browser. Enable printing by setting the [AllowPrint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPrint) property to **true**. ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -24,21 +25,25 @@ The `PrintAsync` method can be used to print a rendered TreeMap directly from th @code { public SfTreeMap Treemap { get; set; } + public async Task PrintMap() { await Treemap.PrintAsync(); } + public class Country { public string Name { get; set; } public double GDP { get; set; } } + public List GrowthReport = new List { new Country {Name="United States", GDP=17946 }, new Country {Name="China", GDP=10866 }, new Country {Name="Japan", GDP=4123 }, }; } + ``` ![Printing in Blazor TreeMap](./images/Print/blazor-treemap-printing.png) @@ -47,7 +52,7 @@ The `PrintAsync` method can be used to print a rendered TreeMap directly from th ### Image Export -Export functionality can be enabled by setting the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) property to **true**. The rendered TreeMap can be exported as an image with help of `ExportAsync` method and the method requires two parameters: image type and file name. The orientation setting is optional. +Enable image export by setting the [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) property to **true**. Export the rendered TreeMap using the `ExportAsync` method. The method requires the image type and file name; the orientation setting is optional. The TreeMap can be exported as an image in the following formats. @@ -58,6 +63,7 @@ The TreeMap can be exported as an image in the following formats. The following code example shows how to export the TreeMap in [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PNG) format. ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -68,20 +74,23 @@ The following code example shows how to export the TreeMap in [PNG](https://help @code { public SfTreeMap Treemap { get; set; } + public async Task ExportMap() { await Treemap.ExportAsync(ExportType.PNG, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait, true); } } + ``` -N> Refer to the [code block](#print) to know about the property value of the **GrowthReport**. +N> See the [Print](#print) section for the **GrowthReport** sample data. ### PDF Export -[PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF) export functionality can be enabled by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) property to **true**. The rendered TreeMap can be exported as [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF) with the help of `ExportAsync` method and the export method requires two parameters: file type and file name. The orientation setting is optional. +Enable PDF export by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) property to **true**. Export the rendered TreeMap as a [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF) using the `ExportAsync` method. The method requires the file type and file name; the orientation setting is optional. ```cshtml + @using Syncfusion.Blazor.TreeMap; @@ -92,11 +101,13 @@ N> Refer to the [code block](#print) to know about the property value of the **G @code { public SfTreeMap Treemap { get; set; } + public async Task ExportMap() { await Treemap.ExportAsync(ExportType.PDF, "Export", Syncfusion.PdfExport.PdfPageOrientation.Portrait); } } + ``` -N> Refer to the [code block](#print) to know about the property value of the **GrowthReport**. \ No newline at end of file +N> See the [Print](#print) section for the **GrowthReport** sample data. diff --git a/blazor/treemap/selection-and-highlight.md b/blazor/treemap/selection-and-highlight.md index 9d3fc4122b..f1fa5825f7 100644 --- a/blazor/treemap/selection-and-highlight.md +++ b/blazor/treemap/selection-and-highlight.md @@ -1,7 +1,7 @@ --- layout: post title: Selection and Highlight in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Selection and Highlight in Syncfusion Blazor TreeMap component and more. +description: Check out and learn how to configure and utilize Selection and Highlight feature in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -11,11 +11,12 @@ documentation: ug ## Selection -Selection is used to select a particular group or item to differentiate from other items. Each item or each group can be selected and deselected while interacting with the items. The corresponding Treemap items are also selected while tapping a specific legend item, and vice versa. +Selection highlights a specific item or group to distinguish it from other items. Items and groups can be selected or deselected during interaction. Selecting a legend item also selects the corresponding TreeMap items, and the reverse applies. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property is used to change the selected item color. The [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and the [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) properties are used to customize the selected item border, and the selection is enabled by using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) property to **true** in the [TreeMapSelectionSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property sets the color of selected items. The border [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) can be customized, and selection is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) to **true** in [TreeMapSelectionSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -34,7 +35,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM -@code{ +@code { public class Employee { public string Country { get; set; } @@ -42,30 +43,33 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM public string JobGroup { get; set; } public int EmployeeCount { get; set; } }; + public List Employees = new List { - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Executive", EmployeeCount= 20 }, - new Employee { Country= "USA", JobDescription= "Sales", JobGroup= "Analyst", EmployeeCount= 30 }, - new Employee { Country= "USA", JobDescription= "Marketing", EmployeeCount= 40 }, - new Employee { Country= "USA", JobDescription= "Management", EmployeeCount= 80 }, - new Employee { Country= "India", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 100 }, - new Employee { Country= "India", JobDescription= "HR Executives", EmployeeCount= 30 }, - new Employee { Country= "India", JobDescription= "Accounts", EmployeeCount= 40 }, - new Employee { Country= "UK", JobDescription= "Technical", JobGroup= "Testers", EmployeeCount= 30 }, - new Employee { Country= "UK", JobDescription= "HR Executives", EmployeeCount= 50 }, - new Employee { Country= "UK", JobDescription= "Accounts", EmployeeCount= 60 } + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Executive", EmployeeCount = 20 }, + new Employee { Country = "USA", JobDescription = "Sales", JobGroup = "Analyst", EmployeeCount = 30 }, + new Employee { Country = "USA", JobDescription = "Marketing", EmployeeCount = 40 }, + new Employee { Country = "USA", JobDescription = "Management", EmployeeCount = 80 }, + new Employee { Country = "India", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 100 }, + new Employee { Country = "India", JobDescription = "HR Executives", EmployeeCount = 30 }, + new Employee { Country = "India", JobDescription = "Accounts", EmployeeCount = 40 }, + new Employee { Country = "UK", JobDescription = "Technical", JobGroup = "Testers", EmployeeCount = 30 }, + new Employee { Country = "UK", JobDescription = "HR Executives", EmployeeCount = 50 }, + new Employee { Country = "UK", JobDescription = "Accounts", EmployeeCount = 60 } }; } + ``` ![Blazor TreeMap Item with Selection](images/HighlightandSelection/blazor-treemap-selection.png) ## Highlight -Highlight is used to highlight an item or group from other items or groups. Each item or each group can be highlighted by hovering the mouse over the items. The corresponding Treemap items are also highlighted while hovering over a specific legend item, and vice versa. +Highlight emphasizes an item or group to distinguish it from the rest. Items and groups can be highlighted by hovering over them. Hovering over a legend item also highlights the corresponding TreeMap items, and the reverse applies. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property is used to change the highlighted item color. The [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) properties are used to customize the highlighted item border, and the highlight is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) property to **true** in the [TreeMapHighlightSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property sets the color of highlighted items. The border [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) can be customized, and highlighting is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) to **true** in [TreeMapHighlightSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -84,8 +88,9 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM + ``` -N> Refer to the [code block](#selection) to know about the property value of **Employees**. +N> Refer to the code block in the [Selection](#selection) section for the **Employees** data. ![Highlighting Blazor TreeMap Item](images/HighlightandSelection/blazor-treemap-highlight-item.png) diff --git a/blazor/treemap/tooltip.md b/blazor/treemap/tooltip.md index 59548dc061..9ce9a153bd 100644 --- a/blazor/treemap/tooltip.md +++ b/blazor/treemap/tooltip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor TreeMap component and much more details. +description: Check out and learn how to configure and customize Tooltip in the Syncfusion Blazor TreeMap component. platform: Blazor control: TreeMap documentation: ug @@ -9,13 +9,14 @@ documentation: ug # Tooltip in Blazor TreeMap Component -Tooltip is used to display details about the items in the TreeMap. When space constraints prevents from displaying the information using Data Labels, the tooltip comes in handy. +Tooltip displays item details in the TreeMap. When data labels cannot show all information due to space constraints, the tooltip provides the required context. ## Default tooltip -The tooltip is not visible by default, to make it visible, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) to **true**. +The tooltip is hidden by default. To display it, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -29,16 +30,18 @@ The tooltip is not visible by default, to make it visible, set the [Visible](htt public string Name { get; set; } public int Count { get; set; } }; + public List Fruits = new List { - new Fruit { Name="Apple", Count=5000 }, - new Fruit { Name="Mango", Count=3000 }, - new Fruit { Name="Orange", Count=2300 }, - new Fruit { Name="Banana", Count=500 }, - new Fruit { Name="Grape", Count=4300 }, - new Fruit { Name="Papaya", Count=1200 }, - new Fruit { Name="Melon", Count=4500 } + new Fruit { Name = "Apple", Count = 5000 }, + new Fruit { Name = "Mango", Count = 3000 }, + new Fruit { Name = "Orange", Count = 2300 }, + new Fruit { Name = "Banana", Count = 500 }, + new Fruit { Name = "Grape", Count = 4300 }, + new Fruit { Name = "Papaya", Count = 1200 }, + new Fruit { Name = "Melon", Count = 4500 } }; } + ``` ![Blazor TreeMap with Tooltip](images/Tooltip/blazor-treemap-tooltip.png) @@ -47,12 +50,13 @@ The tooltip is not visible by default, to make it visible, set the [Visible](htt Customize the TreeMap tooltip using the following properties. -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Fill) - Specifies the color of the tooltip. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Opacity) - Specifies the opacity of the tooltip. -* [TreeMapTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipBorder.html) - Specifies the tooltip border color and width. -* [TreeMapTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipTextStyle.html) - Specifies the tooltip font family, style, weight, color and size. +- [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Fill) – Specifies the tooltip background color. +- [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Opacity) – Specifies the tooltip opacity. +- [TreeMapTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipBorder.html) – Specifies the tooltip border color and width. +- [TreeMapTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipTextStyle.html) – Specifies the tooltip font family, style, weight, color, and size. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -62,34 +66,38 @@ Customize the TreeMap tooltip using the following properties. + ``` -N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**. +N> See the [Default tooltip](#default-tooltip) sample for the **Fruits** data model. ![Blazor TreeMap with Custom Tooltip](images/Tooltip/blazor-treemap-custom-tooltip.png) ## Formatting tooltip content -The tooltip content is displayed by default based on the [WeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_WeightValuePath). In addition, to show more information in the tooltip, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Format) property and define properties from the data source as following. +By default, the tooltip displays content based on the [WeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_WeightValuePath). To include additional information, use the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Format) property and reference fields from the data source as shown below. ```cshtml + @using Syncfusion.Blazor.TreeMap + ``` -N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**. +N> See the [Default tooltip](#default-tooltip) sample for the **Fruits** data model. ![Changing Tooltip Format in Blazor TreeMap](images/Tooltip/blazor-treemap-tooltip-format.png) ## Tooltip template -Tooltip can be rendered as a custom component using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_TooltipTemplate) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. +Render the tooltip using a custom template with the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_TooltipTemplate) property in [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html). This property accepts UI elements that render as the tooltip content. ```cshtml + @using Syncfusion.Blazor.TreeMap @@ -108,8 +116,9 @@ Tooltip can be rendered as a custom component using the [TooltipTemplate](https: + ``` -N> Refer to the [code block](#default-tooltip) to know about the property value of **Fruits**. +N> See the [Default tooltip](#default-tooltip) sample for the **Fruits** data model. -![Blazor TreeMap with Tooltip Template](images/Tooltip/blazor-treemap-tooltip-template.png) \ No newline at end of file +![Blazor TreeMap with Tooltip Template](images/Tooltip/blazor-treemap-tooltip-template.png) From 750f3e610c4ce56febdfb2e3bcc2a54f0a262cea Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 13 Oct 2025 11:01:51 +0530 Subject: [PATCH 2/3] 985588: Resolved the font matter error in the PR. --- blazor/treemap/data-binding.md | 2 +- blazor/treemap/internationalization.md | 4 ++-- blazor/treemap/legend.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/treemap/data-binding.md b/blazor/treemap/data-binding.md index 42fc748a45..7d7db59e49 100644 --- a/blazor/treemap/data-binding.md +++ b/blazor/treemap/data-binding.md @@ -281,7 +281,7 @@ N> See the data values for [product_growth](https://www.syncfusion.com/downloads ## Remote data -To interact with a remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/#odata-adaptor) for remote data binding. +To interact with a remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) for remote data binding. N> When using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) for data binding, the **TValue** must be provided explicitly to the TreeMap component. diff --git a/blazor/treemap/internationalization.md b/blazor/treemap/internationalization.md index 18acf144ec..b410700c22 100644 --- a/blazor/treemap/internationalization.md +++ b/blazor/treemap/internationalization.md @@ -14,9 +14,9 @@ The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap * Data label * Tooltip -Globalization enables a component to display numbers, dates, and times according to a specific culture or locale. The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Format) property globalizes number, date, and time values in the TreeMap component. +Globalization enables a component to display numbers, dates, and times according to a specific culture or locale. The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Format) property globalize number, date, and time values in the TreeMap component. -In the following example, tooltips and data labels are formatted as currency based on the current application culture (for example, de-DE). +In the following example, tooltips and data labels are formatted as currency based on the current application culture (for example, German). ```cshtml @using Syncfusion.Blazor.TreeMap diff --git a/blazor/treemap/legend.md b/blazor/treemap/legend.md index 762b5c3a0f..b9e8a082c6 100644 --- a/blazor/treemap/legend.md +++ b/blazor/treemap/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor TreeMap Component | Syncfusion -description: Check out and learn how to configure and customize Legends in Syncfusion Blazor TreeMap component. +description: Check out and learn how to configure and customize Legends in the Syncfusion Blazor TreeMap component for effective data visualization. platform: Blazor control: TreeMap documentation: ug From 25399910871bd6c4965496c4ee05ff40736c4e9d Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Mon, 13 Oct 2025 12:46:46 +0530 Subject: [PATCH 3/3] 985588: Updated content correction mentioned in the PR. --- blazor/treemap/color-mapping.md | 5 ++--- blazor/treemap/data-binding.md | 3 ++- blazor/treemap/drill-down.md | 4 ++-- blazor/treemap/events.md | 2 +- blazor/treemap/internationalization.md | 1 + blazor/treemap/legend.md | 4 ++-- blazor/treemap/methods.md | 2 +- blazor/treemap/print-and-export.md | 2 +- blazor/treemap/selection-and-highlight.md | 4 ++-- 9 files changed, 14 insertions(+), 13 deletions(-) diff --git a/blazor/treemap/color-mapping.md b/blazor/treemap/color-mapping.md index 0292488e7d..eed7fd770a 100644 --- a/blazor/treemap/color-mapping.md +++ b/blazor/treemap/color-mapping.md @@ -91,7 +91,7 @@ Equal color mapping fills items with colors by matching equal values from the da ## Desaturation color mapping -Desaturation color mapping applies colors to items based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) settings in [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). +Desaturation color mapping applies colors to items based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). ```cshtml @@ -156,7 +156,7 @@ N> See the [equal color mapping](#equal-color-mapping) section for the **Cars** ## Color for items excluded from color mapping -Retrieve excluded ranges from the data source and apply a specific color to those items without specifying [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange). +Retrieve excluded ranges from the data source and apply a specific color to those items without specifying [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties. ```cshtml @@ -180,7 +180,6 @@ N> See the [range color mapping](#range-color-mapping) section for the **Fruits* ## Bind the colors to items from the data source - ```cshtml @using Syncfusion.Blazor.TreeMap diff --git a/blazor/treemap/data-binding.md b/blazor/treemap/data-binding.md index 7d7db59e49..20205c9d23 100644 --- a/blazor/treemap/data-binding.md +++ b/blazor/treemap/data-binding.md @@ -203,7 +203,7 @@ The following example shows how to bind an `IEnumerable` object to the TreeMap c -@code{ +@code { public class GDPReport { public string CountryName { get; set; } @@ -606,6 +606,7 @@ For instance, bind data directly from the **OrderDataAccessLayer** class and ass On the other hand, to configure the TreeMap by using a Web API, provide the endpoint URL in the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) along with an [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). Here, [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors?no-cache=1#web-api-adaptor) is used to interact with the Web API to consume data from Entity Framework. ```cshtml + @using Syncfusion.Blazor.TreeMap @using Syncfusion.Blazor.Data diff --git a/blazor/treemap/drill-down.md b/blazor/treemap/drill-down.md index b7c219fbfa..61b63c6553 100644 --- a/blazor/treemap/drill-down.md +++ b/blazor/treemap/drill-down.md @@ -96,7 +96,7 @@ N> Refer to the **Employees** data source defined in the [Perform drill-down](#p ## Breadcrumb support -Breadcrumb navigation indicates the path from the root to the current level and supports drilling back to any parent level. Enable it by setting [EnableBreadcrumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableBreadcrumb) to **true**. Customize the separator using [BreadcrumbConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_BreadcrumbConnector). The default connector is a hyphen (-). +Breadcrumb navigation indicates the path from the root to the current level and supports drilling back to any parent level. Enable it by setting [EnableBreadcrumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableBreadcrumb) property to **true**. Customize the separator using [BreadcrumbConnector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_BreadcrumbConnector) property. The default connector is a hyphen (-). ```cshtml @@ -127,7 +127,7 @@ N> Refer to the **Employees** data source defined in the [Perform drill-down](#p ## Initial drill-down -Initial drill-down navigates to a specified item and level during the first render. Configure the item index using [GroupIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupIndex) and the level name using [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupName) in [TreeMapInitialDrillSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html). +Initial drill-down navigates to a specified item and level during the first render. Configure the item index using [GroupIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupIndex) property and the level name using [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html#Syncfusion_Blazor_TreeMap_TreeMapInitialDrillSettings_GroupName) property in [TreeMapInitialDrillSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapInitialDrillSettings.html). ```cshtml diff --git a/blazor/treemap/events.md b/blazor/treemap/events.md index e16fd20717..a097891e09 100644 --- a/blazor/treemap/events.md +++ b/blazor/treemap/events.md @@ -163,4 +163,4 @@ Triggers before rendering the TreeMap tooltip. | Text | Specifies the text of the tooltip. | | TextStyle | Specifies the text style of the tooltip. | | Data | Specifies the TreeMap item data where the tooltip is rendered. | -| Cancel | Specifies the event cancel status. | \ No newline at end of file +| Cancel | Specifies the event cancel status. | diff --git a/blazor/treemap/internationalization.md b/blazor/treemap/internationalization.md index b410700c22..f815391adf 100644 --- a/blazor/treemap/internationalization.md +++ b/blazor/treemap/internationalization.md @@ -19,6 +19,7 @@ Globalization enables a component to display numbers, dates, and times according In the following example, tooltips and data labels are formatted as currency based on the current application culture (for example, German). ```cshtml + @using Syncfusion.Blazor.TreeMap diff --git a/blazor/treemap/legend.md b/blazor/treemap/legend.md index b9e8a082c6..1c2402f960 100644 --- a/blazor/treemap/legend.md +++ b/blazor/treemap/legend.md @@ -453,7 +453,7 @@ Remove duplicate legend items by setting the [RemoveDuplicateLegend](https://hel ## Positioning based on size -Use a responsive legend that switches between the right and bottom positions based on available height and width. To enable this behavior, set [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html) to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Auto) in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). The position adjusts automatically based on the available space. +Use a responsive legend that switches between the right and bottom positions based on available height and width. To enable this behavior, set [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html) property to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LegendPosition.html#Syncfusion_Blazor_TreeMap_LegendPosition_Auto) in [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). The position adjusts automatically based on the available space. ```cshtml @@ -490,7 +490,7 @@ Use a responsive legend that switches between the right and bottom positions bas ## Legend with RTL support -Set [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableRtl) to **true** to render the legend icon on the right and the legend text on the left. +Set [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EnableRtl) property to **true** to render the legend icon on the right and the legend text on the left. ```cshtml diff --git a/blazor/treemap/methods.md b/blazor/treemap/methods.md index 461ae83743..67037f42af 100644 --- a/blazor/treemap/methods.md +++ b/blazor/treemap/methods.md @@ -52,7 +52,7 @@ Print the rendered TreeMap by enabling the [AllowPrint](https://help.syncfusion. Use the `ExportAsync` method to export the current TreeMap to [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PNG), [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF), [JPEG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_JPEG), or [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_SVG). -The [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) and [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) properties enable image and PDF export. +The [AllowImageExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowImageExport) and [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) properties enable image and PDF export respectively. | Arguments | Description | |-------------|-----------------------------------------------------------------------------| diff --git a/blazor/treemap/print-and-export.md b/blazor/treemap/print-and-export.md index c3fd9b39a7..a8b8ad5e40 100644 --- a/blazor/treemap/print-and-export.md +++ b/blazor/treemap/print-and-export.md @@ -87,7 +87,7 @@ N> See the [Print](#print) section for the **GrowthReport** sample data. ### PDF Export -Enable PDF export by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) property to **true**. Export the rendered TreeMap as a [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF) using the `ExportAsync` method. The method requires the file type and file name; the orientation setting is optional. +Enable PDF export by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_AllowPdfExport) property to **true**. Export the rendered TreeMap as a [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ExportType.html#Syncfusion_Blazor_TreeMap_ExportType_PDF) using the `ExportAsync` method. The export method requires two parameters: file **type** and file **name**. The orientation setting is **optional**. ```cshtml diff --git a/blazor/treemap/selection-and-highlight.md b/blazor/treemap/selection-and-highlight.md index f1fa5825f7..b0ee3c6236 100644 --- a/blazor/treemap/selection-and-highlight.md +++ b/blazor/treemap/selection-and-highlight.md @@ -13,7 +13,7 @@ documentation: ug Selection highlights a specific item or group to distinguish it from other items. Items and groups can be selected or deselected during interaction. Selecting a legend item also selects the corresponding TreeMap items, and the reverse applies. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property sets the color of selected items. The border [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) can be customized, and selection is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) to **true** in [TreeMapSelectionSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property sets the color of selected items. Use [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) properties to customize the selected item border. Selection is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) property to **true** in [TreeMapSelectionSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). ```cshtml @@ -66,7 +66,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM Highlight emphasizes an item or group to distinguish it from the rest. Items and groups can be highlighted by hovering over them. Hovering over a legend item also highlights the corresponding TreeMap items, and the reverse applies. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property sets the color of highlighted items. The border [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) can be customized, and highlighting is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) to **true** in [TreeMapHighlightSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property sets the color of highlighted items. Use [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) properties to customize the selected item border. Highlight is enabled by setting [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) property to **true** in [TreeMapHighlightSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). ```cshtml