Merge branch 'development' into EJ2-882857-Validation

Author: IndrajithSrinivasan

blazor-toc.html

@@ -56,6 +56,7 @@ The default color of series or points can be customized by providing a custom co
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)
 
@@ -99,6 +100,7 @@ The color for the points can be bound from the `DataSource` for the series by ut
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} 
 
 ![Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png)
 
@@ -162,6 +164,7 @@ The data label and fill color of each data point can be customized using the `Po
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png)
 
@@ -209,6 +212,7 @@ The background color and border of the 3D chart can be customized using the `Bac
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)
 
@@ -253,6 +257,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)
 
@@ -298,6 +303,7 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrpjRsrAmhveiAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Chart rotation
 
@@ -339,6 +345,7 @@ The 3D chart can be rotated by using the `EnableRotation` property.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVzNHWLKwqqyvoo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Title
 
@@ -380,6 +387,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png)
 
@@ -423,6 +431,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png)
 
@@ -464,6 +473,7 @@ The custom option is used to position the title anywhere in the 3D chart using `
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png)
 
@@ -476,7 +486,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DTitleStyle TextAlignment="Alignment.Far"></Chart3DTitleStyle>
+    <Chart3DTitleStyle TextAlignment="Syncfusion.Blazor.Chart3D.Alignment.Far"></Chart3DTitleStyle>
     <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
     </Chart3DPrimaryXAxis>
 
@@ -507,6 +517,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png)
 
@@ -519,7 +530,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DTitleStyle FontSize="18px" Color="red" TextOverflow="@TextOverflow.Wrap"></Chart3DTitleStyle>
+    <Chart3DTitleStyle FontSize="18px" Color="red" TextOverflow="Syncfusion.Blazor.Chart3D.TextOverflow.Wrap"></Chart3DTitleStyle>
 
     <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
     </Chart3DPrimaryXAxis>
@@ -551,6 +562,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png)
 

blazor/3D-chart/appearance.md

@@ -50,6 +50,7 @@ The title for the axis can be added by using the `Title` property. It helps to p
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)
 
@@ -93,6 +94,7 @@ The title can be rotated from 0 to 360 degree by using the `TitleRotationAngle`
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png)
 
@@ -135,6 +137,7 @@ The width, color, and height of the minor and major tick lines can be custo
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)
 
@@ -177,6 +180,7 @@ The width and color of the minor and major grid lines can be customized by usin
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)
 
@@ -222,6 +226,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)
 
@@ -264,6 +269,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)
 
@@ -305,6 +311,7 @@ To place an axis opposite from its original position, set the `OpposedPosition`
 } 
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)
 

blazor/3D-chart/axis-customization.md

@@ -22,7 +22,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Hide" />
+    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="Syncfusion.Blazor.Chart3D.LabelIntersectAction.Hide" />
 
     <Chart3DSeriesCollection>
         <Chart3DSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="Chart3DSeriesType.Column" />
@@ -55,6 +55,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)
 
@@ -65,7 +66,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Rotate45" />
+    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="Syncfusion.Blazor.Chart3D.LabelIntersectAction.Rotate45" />
 
     <Chart3DSeriesCollection>
         <Chart3DSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="Chart3DSeriesType.Column" />
@@ -97,6 +98,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)
 
@@ -107,7 +109,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="LabelIntersectAction.Rotate90" />
+    <Chart3DPrimaryXAxis ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category" LabelIntersectAction="Syncfusion.Blazor.Chart3D.LabelIntersectAction.Rotate90" />
 
     <Chart3DSeriesCollection>
         <Chart3DSeries DataSource="@MedalDetails" XName="X" YName="Y" Type="Chart3DSeriesType.Column" />
@@ -139,6 +141,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)
 
@@ -152,7 +155,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t
 @using Syncfusion.Blazor.Chart3D
 
 <SfChart3D Title="Olympic Medals" WallColor="transparent" EnableRotation="true" RotationAngle="7" TiltAngle="10" Depth="100">
-    <Chart3DPrimaryXAxis EdgeLabelPlacement="EdgeLabelPlacement.Shift" ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
+    <Chart3DPrimaryXAxis EdgeLabelPlacement="Syncfusion.Blazor.Chart3D.EdgeLabelPlacement.Shift" ValueType="Syncfusion.Blazor.Chart3D.ValueType.Category">
     </Chart3DPrimaryXAxis>
 
     <Chart3DSeriesCollection>
@@ -182,6 +185,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)
 
@@ -244,3 +248,4 @@ The labels will be rendered based on the count in the `MaximumLabels` property p
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBJNxCrTWKrGBCU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

blazor/3D-chart/axis-labels.md

@@ -46,6 +46,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)
 
@@ -88,6 +89,7 @@ By default, category axis labels are placed between ticks in an axis. It can als
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)
 
@@ -130,6 +132,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)
 
@@ -179,5 +182,6 @@ The category axis can also be rendered based on the index values of the data sou
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)

blazor/3D-chart/category-axis.md

@@ -49,6 +49,7 @@ The 3D chart can be rendered to its container size and it can be set via inline
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)
 
@@ -94,6 +95,7 @@ The size of the 3D chart can be set in pixel as demonstrated below.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)
 
@@ -135,5 +137,6 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)

blazor/3D-chart/chart-dimensions.md

@@ -48,6 +48,7 @@ To render a bar series, set series `Type` as `Bar`.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.png)
 
@@ -91,6 +92,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.png)
 
@@ -133,6 +135,7 @@ The data points can be grouped in the bar type charts by using the `GroupName` p
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.png)
 
@@ -173,6 +176,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.png)
 
@@ -218,5 +222,6 @@ The following properties can be used to customize the `Bar` series.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.png)

blazor/3D-chart/chart-types/bar.md

@@ -49,6 +49,7 @@ To render a `Column Chart`, use series `Type` as `Column`.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.png)
 
@@ -92,6 +93,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.png)
 
@@ -134,6 +136,7 @@ The data points can be grouped in the column type charts by using the `GroupName
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.png)
 
@@ -173,6 +176,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.png)
 
@@ -218,5 +222,6 @@ The following properties can be used to customize the `Column` series.
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.png)

blazor/3D-chart/chart-types/column.md

@@ -50,6 +50,7 @@ To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar10
 }
 
 ``` 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)
 
@@ -94,6 +95,7 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet`  property
 }
 
 ```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png)
 
@@ -141,5 +143,6 @@ The following properties can be used to customize the `100% Stacked Bar` series.
 }
 
 ``` 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png)