Merge branch 'development' into BLAZ-998096-Docs

Author: Deepak-Ramakrisnan

blazor-toc.html

@@ -765,6 +765,9 @@
 			<li>
 				<a href="/blazor/accumulation-chart/title-and-sub-title">Title and Subtitle</a>
 			</li>
+			<li>
+				<a href="/blazor/accumulation-chart/gradient">Gradient</a>
+			</li>
 			<li>
 				<a href="/blazor/accumulation-chart/chart-print">Print and Export</a>
 			</li>
@@ -983,10 +986,10 @@
 			<li><a href="/blazor/blockeditor/keyboard-shortcuts">Keyboard Shortcuts</a></li>
 			<li><a href="/blazor/blockeditor/appearance">Appearance</a></li>
 			<li><a href="/blazor/blockeditor/events">Events</a></li>
-			<li>Validation and Security
+			<li>Editor Security
 				<ul>
-					<li><a href="/blazor/blockeditor/validation-security/cross-site-script">Cross-Site Scripting</a></li>
-					<li><a href="/blazor/blockeditor/validation-security/read-only-mode">Controlling Editor Access</a></li>
+					<li><a href="/blazor/blockeditor/editor-security/cross-site-script">Cross-Site Scripting</a></li>
+					<li><a href="/blazor/blockeditor/editor-security/read-only-mode">Controlling Editor Access</a></li>
 				</ul>
 			</li>
 		</ul>
@@ -1498,6 +1501,9 @@
 			<li>
 				<a href="/blazor/chart/trend-lines">Trendlines</a>
 			</li>
+			<li>
+				<a href="/blazor/chart/gradient">Gradient</a>
+			</li>
 			<li>
 				<a href="/blazor/chart/internationalization">Internationalization</a>
 			</li>
@@ -4585,6 +4591,7 @@
 			<li> <a href="/blazor/stock-chart/panning">Panning</a></li>
 			<li> <a href="/blazor/stock-chart/range-selector">Range Selector</a></li>
 			<li> <a href="/blazor/stock-chart/appearance">Appearance</a></li>
+			<li> <a href="/blazor/stock-chart/gradient">Gradient</a></li>
 			<li> <a href="/blazor/stock-chart/export-print">Print and Export</a></li>
 			<li> <a href="/blazor/stock-chart/accessibility">Accessibility</a></li>
 			<li> <a href="/blazor/stock-chart/events">Events</a></li>
@@ -4870,6 +4877,7 @@
 					<li><a href="/blazor/treegrid/columns/column-template">Column Template</a></li>
 					<li><a href="/blazor/treegrid/columns/column-reorder">Column Reorder</a></li>
 					<li><a href="/blazor/treegrid/columns/column-menu">Column Menu</a></li>
+					<li><a href="/blazor/treegrid/columns/column-spanning">Column Menu</a></li>
 				</ul>
 			</li>
 			<li>
@@ -4879,6 +4887,7 @@
 					<li><a href="/blazor/treegrid/rows/row-template">Row Template</a></li>
 					<li><a href="/blazor/treegrid/rows/detail-template">Detail Template</a></li>
 					<li><a href="/blazor/treegrid/rows/row-drag-and-drop">Row Drag and Drop</a></li>
+					<li><a href="/blazor/treegrid/rows/row-spanning">Row Drag and Drop</a></li>
 				</ul>
 			</li>
 			<li> <a href="/blazor/treegrid/templates">Templates</a></li>

blazor/accumulation-chart/gradient.md

@@ -389,6 +389,70 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.png)" %}
 
+## Legend Template
+
+Legend templates allow you to replace default legend icons and text with custom HTML or Blazor markup for each series. This enables branded styles, richer content (icons, multi-line text, badges), improved readability, and localization.
+
+To use, add a `LegendItemTemplate` inside any [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html) you want to customize. The rendered content becomes the legend item and can be styled with CSS. Legend interactions (click to toggle series) remain unless [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ToggleVisibility) is set to false. Templates work with all legend positions, alignments, and paging.
+
+**Text** : Gets or sets the text to render for the current legend item in the template. Defaults to the value from the field mapped by AccumulationChartSeries.XName.
+
+**Data** : Gets the data item from AccumulationChartSeries.DataSource bound to the current legend item. Use this to access additional fields (for example, images, badges, or localized text) inside the template.
+
+```
+@using Syncfusion.Blazor.Charts
+
+@* Initialize the accumulation chart component and configure its essential features *@
+<SfAccumulationChart Title="Mobile Browser Statistics">
+
+    @* Display the legend and allow toggling visibility on interaction *@
+    <AccumulationChartLegendSettings Visible="true" >
+    </AccumulationChartLegendSettings>
+
+    <AccumulationChartSeriesCollection>
+        @* Define a pie series with X and Y mappings and color mapping *@
+        <AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users" Name="Browser" PointColorMapping="Color">
+            @* Render a custom legend item using the template context *@
+            <LegendItemTemplate>
+                @{
+                    var info = context as AccumulationChartLegendInfo;
+                    var browser = info?.Data?["Browser"]?.ToString() ?? "";
+                    var users = info?.Data?["Users"] is null ? 0 : Convert.ToDouble(info.Data["Users"]);
+                }
+                <div style="display:flex; align-items:center; gap:8px; padding:4px 0;">
+                    <div style="display:flex; flex-direction:column; line-height:1.1;">
+                        <span style="font-weight:800; font-size:14px; color: @info.Data["Color"]">@browser</span>
+                        <span style="font-size:12px; opacity:0.8;"><b>@users million</b> people use @browser</span>
+                    </div>
+                </div>
+            </LegendItemTemplate>
+        </AccumulationChartSeries>
+    </AccumulationChartSeriesCollection>
+
+</SfAccumulationChart>
+
+@code {
+    public class Statistics
+    {
+        public string Browser { get; set; }
+        public double Users { get; set; }
+        public string Color { get; set; }
+    }
+
+    public List<Statistics> StatisticsDetails = new()
+    {
+    new Statistics { Browser = "Chrome", Users = 37, Color = "#a16ee5" },
+    new Statistics { Browser = "UC Browser", Users = 17, Color = "#f7ce69" },
+    new Statistics { Browser = "iPhone", Users = 19, Color = "#55a5c2" },
+    new Statistics { Browser = "Others", Users = 4,  Color = "#7ddf1e" },
+    new Statistics { Browser = "Opera", Users = 11, Color = "#ff6ea6" },
+    new Statistics { Browser = "Android", Users = 12, Color = "#7953ac" },
+    };
+
+}
+```
+![Legend Template in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-template.png)
+
 N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data.
 
 * [Grouping](./grouping)

blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-points.png

@@ -50,7 +50,7 @@ You can use the `CssClass` property to customize the appearance of the Block Edi
 
 ```
 
-The following example demonstrates the usage of `Readonly` and `CssClass` properties of the Block Editor.
+The following example demonstrates the usage of `ReadOnly` and `CssClass` properties of the Block Editor.
 
 ```cshtml
 

blazor/accumulation-chart/images/gradient/blazor-accumulation-chart-linear-gradient-series.png

@@ -45,7 +45,7 @@ By default, the `Indent` property is set to `0`.
 
 @using Syncfusion.Blazor.BlockEditor
 
-<div class="wrapper">
+<div id="container">
     <SfBlockEditor Blocks="BlockData"></SfBlockEditor>
 </div>
 @code {
@@ -92,7 +92,7 @@ Custom CSS classes allow you to define specialized styling for specific blocks i
 
 @using Syncfusion.Blazor.BlockEditor
 
-<div class="wrapper">
+<div id="container">
     <SfBlockEditor Blocks="BlockData"></SfBlockEditor>
 </div>