diff --git a/blazor/3D-chart/appearance.md b/blazor/3D-chart/appearance.md
index 7144e8c186..c72a9dfb8e 100644
--- a/blazor/3D-chart/appearance.md
+++ b/blazor/3D-chart/appearance.md
@@ -56,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)" %}
@@ -100,9 +98,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png)" %}
## Point level customization
@@ -164,9 +160,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png)" %}
## Chart area customization
@@ -212,9 +206,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)" %}
**Chart margin**
@@ -257,9 +249,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)" %}
## Animation
@@ -387,9 +377,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png)" %}
### Title position
@@ -431,9 +419,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png)" %}
The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates.
@@ -473,9 +459,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png)" %}
## Title alignment
@@ -517,9 +501,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png)" %}
### Title customization
@@ -562,9 +544,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png)" %}
N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the `Chart3DAxisLabelStyle`, `Chart3DDataLabelFont`, `BackGround`, `Palettes`, `Chart3DLegendTextStyle`, and `Chart3DTooltipTextStyle`, respectively.
diff --git a/blazor/3D-chart/axis-customization.md b/blazor/3D-chart/axis-customization.md
index d9a00a3934..6f413fbfbb 100644
--- a/blazor/3D-chart/axis-customization.md
+++ b/blazor/3D-chart/axis-customization.md
@@ -50,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %}
## Title rotation
@@ -94,9 +92,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png)" %}
## Tick lines customization
@@ -137,9 +133,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %}
## Grid lines customization
@@ -180,9 +174,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %}
## Multiple Axis
@@ -226,9 +218,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %}
## Inversed Axis
@@ -269,9 +259,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %}
## Opposed position
@@ -311,7 +299,5 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %}
diff --git a/blazor/3D-chart/axis-labels.md b/blazor/3D-chart/axis-labels.md
index 85cac9693d..6a6995722c 100644
--- a/blazor/3D-chart/axis-labels.md
+++ b/blazor/3D-chart/axis-labels.md
@@ -55,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %}
**Case 2:** When setting `LabelIntersectAction` as **Rotate45**.
@@ -98,9 +96,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %}
**Case 3:** When setting `LabelIntersectAction` as **Rotate90**.
@@ -141,9 +137,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %}
## Edge label placement
@@ -185,9 +179,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %}
## Maximum labels
diff --git a/blazor/3D-chart/category-axis.md b/blazor/3D-chart/category-axis.md
index e34c386516..9bc25be6e5 100644
--- a/blazor/3D-chart/category-axis.md
+++ b/blazor/3D-chart/category-axis.md
@@ -46,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %}
## Labels placement
@@ -89,9 +87,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)" %}
## Range
@@ -132,9 +128,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %}
## Indexed category axis
@@ -182,6 +176,4 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %}
diff --git a/blazor/3D-chart/chart-dimensions.md b/blazor/3D-chart/chart-dimensions.md
index ca89172535..185383d064 100644
--- a/blazor/3D-chart/chart-dimensions.md
+++ b/blazor/3D-chart/chart-dimensions.md
@@ -49,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %}
## Size for chart
@@ -95,9 +93,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %}
### In Percentage
@@ -137,6 +133,4 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %}
diff --git a/blazor/3D-chart/chart-types/bar.md b/blazor/3D-chart/chart-types/bar.md
index 7ead2f4e6a..3f0b599997 100644
--- a/blazor/3D-chart/chart-types/bar.md
+++ b/blazor/3D-chart/chart-types/bar.md
@@ -48,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.png)" %}
## Bar space and width
@@ -92,9 +90,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.png)" %}
## Grouped bar
@@ -135,9 +131,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.png)" %}
## Cylindrical column chart
@@ -176,9 +170,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.png)" %}
## Series customization
@@ -222,6 +214,4 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.png)" %}
diff --git a/blazor/3D-chart/chart-types/column.md b/blazor/3D-chart/chart-types/column.md
index 7655c3ff93..8af2227daf 100644
--- a/blazor/3D-chart/chart-types/column.md
+++ b/blazor/3D-chart/chart-types/column.md
@@ -49,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.png)" %}
## Column space and width
@@ -93,9 +91,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.png) %}
## Grouped column
@@ -136,9 +132,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.png)" %}
## Cylindrical column chart
@@ -176,9 +170,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.png)" %}
## Series customization
@@ -222,6 +214,4 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.png) %}
diff --git a/blazor/3D-chart/chart-types/stack-bar.md b/blazor/3D-chart/chart-types/stack-bar.md
index dfea264acd..a75838e6ea 100644
--- a/blazor/3D-chart/chart-types/stack-bar.md
+++ b/blazor/3D-chart/chart-types/stack-bar.md
@@ -50,9 +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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %}
## 100% Cylindrical Stacked Bar chart
@@ -95,9 +93,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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png)" %}
## Series customization
@@ -143,6 +139,4 @@ 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" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png)" %}
diff --git a/blazor/3D-chart/chart-types/stack-column.md b/blazor/3D-chart/chart-types/stack-column.md
index 0f2d546f8d..997e6e7ebf 100644
--- a/blazor/3D-chart/chart-types/stack-column.md
+++ b/blazor/3D-chart/chart-types/stack-column.md
@@ -48,9 +48,7 @@ To render a `100% Stacked Column Chart` series, use series `Type` as `StackingCo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %}
## 100% Cylindrical stacked column chart
@@ -93,9 +91,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png)" %}
## Series customization
@@ -141,6 +137,4 @@ The following properties can be used to customize the `100% Stacked Column` seri
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png)" %}
diff --git a/blazor/3D-chart/chart-types/stacked-bar.md b/blazor/3D-chart/chart-types/stacked-bar.md
index e9743dc5f4..46e01c6a0a 100644
--- a/blazor/3D-chart/chart-types/stacked-bar.md
+++ b/blazor/3D-chart/chart-types/stacked-bar.md
@@ -50,9 +50,7 @@ To render a stacked bar series, use series `Type` as `StackingBar`.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.png)" %}
## Stacking group
@@ -95,9 +93,7 @@ To group the stacked bar, the `StackingGroup` property can be used. The columns
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png)" %}
## Cylindrical column chart
@@ -140,9 +136,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png)" %}
## Series customization
@@ -188,6 +182,4 @@ The following properties can be used to customize the `Stacked Bar` series.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.png)" %}
diff --git a/blazor/3D-chart/chart-types/stacked-column.md b/blazor/3D-chart/chart-types/stacked-column.md
index 8fe5f49bf2..13f2d85a29 100644
--- a/blazor/3D-chart/chart-types/stacked-column.md
+++ b/blazor/3D-chart/chart-types/stacked-column.md
@@ -50,9 +50,7 @@ To render a stacked column series, use series `Type` as `StackingColumn`.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %}
## Stacking group
@@ -95,9 +93,7 @@ To group the stacked column, the `StackingGroup` property can be used. The colum
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png)" %}
## Cylindrical stacked column chart
@@ -140,9 +136,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png)" %}
## Series customization
@@ -188,6 +182,4 @@ The following properties can be used to customize the `Stacked Column` series.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.png)" %}
diff --git a/blazor/3D-chart/data-labels.md b/blazor/3D-chart/data-labels.md
index 92ef207ab4..29289890c6 100644
--- a/blazor/3D-chart/data-labels.md
+++ b/blazor/3D-chart/data-labels.md
@@ -48,9 +48,7 @@ Data labels are fields that includes information about the sample point connecte
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.png)" %}
## Position
@@ -93,9 +91,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.png)" %}
## Template
@@ -145,9 +141,7 @@ Label content can be formatted by using the template option. Inside the template
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.png)" %}
## Text mapping
@@ -185,9 +179,7 @@ Text from the data source can be mapped using the `NameField` property.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.png)" %}
## Format
@@ -225,9 +217,7 @@ Data label for the chart can be formatted using the `Format` property. The globa
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.png)" %}
The table below shows the results of applying various commonly used label formats to numeric data.
@@ -329,9 +319,7 @@ The `Margin` option can be applied to the data label to create space around the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.png)" %}
## Customization
@@ -371,9 +359,7 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.png)" %}
## Customizing specific label
@@ -430,6 +416,4 @@ A specific label can be customized by using the `TextRender` event. The `TextR
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.png)" %}
diff --git a/blazor/3D-chart/date-time-axis.md b/blazor/3D-chart/date-time-axis.md
index 8ae96241ab..b26e030dea 100644
--- a/blazor/3D-chart/date-time-axis.md
+++ b/blazor/3D-chart/date-time-axis.md
@@ -48,9 +48,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.png)" %}
## DateTime category axis
@@ -87,9 +85,7 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.png)" %}
### Range
@@ -129,9 +125,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.png)" %}
### Interval customization
@@ -177,9 +171,7 @@ Date time intervals can be customized by using the `Interval` and `IntervalType`
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.png)" %}
**Applying padding to the Range**
@@ -226,9 +218,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of the a
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.png)" %}
**DateTime - Round**
@@ -268,9 +258,7 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.png)" %}
**DateTime - Additional**
@@ -309,9 +297,7 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.png)" %}
## Label format
@@ -354,9 +340,7 @@ The date can be formatted and parsed to all globalize format using the `LabelFo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.png)" %}
The table below shows the results of applying various popular date and time formats to the `LabelFormat` property.
diff --git a/blazor/3D-chart/legend.md b/blazor/3D-chart/legend.md
index 0e53d90809..291dee7736 100644
--- a/blazor/3D-chart/legend.md
+++ b/blazor/3D-chart/legend.md
@@ -56,9 +56,7 @@ By using the `Position` property, the legend can be positioned at left, right,
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.png)" %}
The custom position helps you to position the legend anywhere in the 3D chart using x and y coordinates.
@@ -105,9 +103,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.png)" %}
@@ -156,9 +152,7 @@ The order of the legend items can be reversed by using the `Reverse` property. B
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.png)" %}
**Legend alignment**
@@ -208,9 +202,7 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.png)" %}
## Legend customization
@@ -257,9 +249,7 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.png)" %}
### Legend size
@@ -308,9 +298,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.png)" %}
### Legend item Size
@@ -358,9 +346,7 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.png)" %}
### Paging for legend
@@ -408,9 +394,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.png)" %}
### Legend text wrap
@@ -458,9 +442,7 @@ When the legend text exceeds the container, the text can be wrapped by using the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.png)" %}
## Series selection through legend
@@ -508,9 +490,7 @@ By default, you can collapse the series visibility by clicking the legend. On th
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.png)" %}
## Collapsing legend item
@@ -557,9 +537,7 @@ By default, series `Name` will be displayed as legend. To skip the legend for a
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.png)" %}
## Legend title
@@ -606,9 +584,7 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.png)" %}
## Arrow page navigation
@@ -656,9 +632,7 @@ The page number will always be visible while using legend paging. It is now poss
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.png)" %}
### Legend Item Padding
@@ -706,6 +680,4 @@ The `ItemPadding` property can be used to adjust the space between the legend it
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.png)" %}
diff --git a/blazor/3D-chart/logarithmic-axis.md b/blazor/3D-chart/logarithmic-axis.md
index 1972506d37..ef19be2411 100644
--- a/blazor/3D-chart/logarithmic-axis.md
+++ b/blazor/3D-chart/logarithmic-axis.md
@@ -51,9 +51,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %}
## Range
@@ -97,9 +95,7 @@ The range of an axis will be calculated automatically based on the provided data
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png)" %}
## Logarithmic base
@@ -143,9 +139,7 @@ Logarithmic base can be customized by using the `LogBase` property of the axis
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png)" %}
## Logarithmic interval
@@ -189,6 +183,4 @@ The interval of the logarithmic axis can be customized by using the `Interval` p
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png)" %}
diff --git a/blazor/3D-chart/multiple-panes.md b/blazor/3D-chart/multiple-panes.md
index 7b6723575a..1f78f617da 100644
--- a/blazor/3D-chart/multiple-panes.md
+++ b/blazor/3D-chart/multiple-panes.md
@@ -64,9 +64,7 @@ To split the chart area vertically into number of rows, use `Rows` property of t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %}
For spanning the vertical axis along multiple rows, use `Span` property of an axis.
@@ -116,9 +114,7 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %}
## Columns
@@ -173,9 +169,7 @@ To split the chart area horizontally into number of columns, use `Columns` prope
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %}
The `Span` property of the axis can be used to span the horizontal axis across multiple column.
@@ -225,6 +219,4 @@ The `Span` property of the axis can be used to span the horizontal axis across m
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %}
diff --git a/blazor/3D-chart/numeric-axis.md b/blazor/3D-chart/numeric-axis.md
index d69c81b9dc..6adac00cd7 100644
--- a/blazor/3D-chart/numeric-axis.md
+++ b/blazor/3D-chart/numeric-axis.md
@@ -44,9 +44,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.png)" %}
## Range
@@ -84,9 +82,7 @@ The range of an axis will be calculated automatically based on the provided data
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.png)" %}
## Range padding
@@ -135,9 +131,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.png)" %}
**Numeric - Round**
@@ -175,9 +169,7 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.png)" %}
**Numeric - Additional**
@@ -215,9 +207,7 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.png)" %}
**Numeric - Normal**
@@ -255,9 +245,7 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.png)" %}
**Numeric - Auto**
@@ -296,9 +284,7 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.png)" %}
## Label format
@@ -343,9 +329,7 @@ Numeric labels can be formatted by using the `LabelFormat` property. Also, it s
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.png)" %}
The table below shows the results of applying various commonly used label formats to numeric data.
@@ -446,9 +430,7 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.png)" %}
## Custom label format
@@ -490,6 +472,4 @@ Axis also supports custom label format using placeholders such as {value}K, wher
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.png)" %}
diff --git a/blazor/3D-chart/selection.md b/blazor/3D-chart/selection.md
index 5305e5109a..2c84c094cd 100644
--- a/blazor/3D-chart/selection.md
+++ b/blazor/3D-chart/selection.md
@@ -67,9 +67,7 @@ To select a point, set the `SelectionMode` property to **Point**.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.png)" %}
## Series
@@ -116,9 +114,7 @@ To select a series, set the `SelectionMode` property to **Series**.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.png)" %}
## Cluster
@@ -165,9 +161,7 @@ To select the points that corresponds to the same index in all the series, set t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.png)" %}
## Selection type
@@ -214,9 +208,7 @@ To select multiple points or series, enable the `AllowMultiSelection` property.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.png)" %}
## Selection during initial loading
@@ -265,9 +257,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.png)" %}
## Selection through legend
@@ -312,6 +302,4 @@ To select a point or series through legend use the `ToggleVisibility` property.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.png)" %}
diff --git a/blazor/3D-chart/tool-tip.md b/blazor/3D-chart/tool-tip.md
index 2b64b945cb..9598c3fa0b 100644
--- a/blazor/3D-chart/tool-tip.md
+++ b/blazor/3D-chart/tool-tip.md
@@ -54,9 +54,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.png)" %}
## Fixed tooltip
@@ -101,9 +99,7 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.png)" %}
## Format the tooltip
@@ -149,9 +145,7 @@ By default, tooltip shows information of x and y value in points. In addition to
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.png)" %}
@@ -208,9 +202,7 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.png)" %}
## Customize the appearance of tooltip
@@ -255,6 +247,4 @@ The `Fill` and `Border` properties are used to customize the background color an
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.png)" %}
diff --git a/blazor/3D-chart/working-with-data.md b/blazor/3D-chart/working-with-data.md
index 5f805222bb..6af7e4c7a6 100644
--- a/blazor/3D-chart/working-with-data.md
+++ b/blazor/3D-chart/working-with-data.md
@@ -54,9 +54,7 @@ An IEnumerable object can be assigned to the `DataSource` property. The list dat
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %}
N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
@@ -177,9 +175,7 @@ The remote data can be bound to the 3D chart using the [SfDataManager](https://h
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.png)" %}
### Binding with OData services
@@ -231,9 +227,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.png)" %}
### Sending additional parameters to the server
@@ -311,9 +305,7 @@ The data points that uses the `null` or `undefined` as value are considered as e
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %}
**Customizing empty point**
@@ -360,6 +352,4 @@ The specific color for empty point can be set by the `Fill` property in `Chart3D
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.png)" %}
\ No newline at end of file
diff --git a/blazor/Release-Notes/31.2.10.md b/blazor/Release-Notes/31.2.10.md
new file mode 100644
index 0000000000..b660fb57ea
--- /dev/null
+++ b/blazor/Release-Notes/31.2.10.md
@@ -0,0 +1,94 @@
+---
+title: Essential Studio for Blazor Release Notes - v31.2.10
+description: Learn here about the controls in the Essential Studio for Blazor Weekly Release - Release Notes - v31.2.10
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v31.2.10 Release Notes
+
+{% include release-info.html date="November 12, 2025" version="v31.2.10" passed="74461" failed="0" %}
+
+{% directory path: _includes/release-notes/v31.2.10 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3DChart | 198 | 198 | 0 | All Passed |
+| Accordion | 232 | 232 | 0 | All Passed |
+| AiAssistView | 297 | 297 | 0 | All Passed |
+| Appbar | 102 | 102 | 0 | All Passed |
+| Autocomplete | 444 | 444 | 0 | All Passed |
+| BarcodeGenerator | 440 | 440 | 0 | All Passed |
+| Breadcrumb | 137 | 137 | 0 | All Passed |
+| Bulletchart | 237 | 237 | 0 | All Passed |
+| Button | 255 | 255 | 0 | All Passed |
+| Calendar | 146 | 146 | 0 | All Passed |
+| Carousel | 174 | 174 | 0 | All Passed |
+| Charts | 4172 | 4172 | 0 | All Passed |
+| ChatUI | 102 | 102 | 0 | All Passed |
+| Chips | 196 | 196 | 0 | All Passed |
+| CircularGauge | 928 | 928 | 0 | All Passed |
+| ColorPicker | 113 | 113 | 0 | All Passed |
+| ComboBox | 248 | 248 | 0 | All Passed |
+| DashboardLayout | 253 | 253 | 0 | All Passed |
+| DataForm | 547 | 547 | 0 | All Passed |
+| DataGrid | 5936 | 5936 | 0 | All Passed |
+| DatePicker | 576 | 576 | 0 | All Passed |
+| DateRangePicker | 366 | 366 | 0 | All Passed |
+| DateTimePicker | 474 | 474 | 0 | All Passed |
+| Diagram | 15310 | 15310 | 0 | All Passed |
+| Dialog | 481 | 481 | 0 | All Passed |
+| DropdownList | 584 | 584 | 0 | All Passed |
+| Dropdowntree | 164 | 164 | 0 | All Passed |
+| FileManager | 3108 | 3108 | 0 | All Passed |
+| FileUpload | 330 | 330 | 0 | All Passed |
+| FloatingActionButton | 128 | 128 | 0 | All Passed |
+| Gantt | 4800 | 4800 | 0 | All Passed |
+| HeatMap | 339 | 339 | 0 | All Passed |
+| ImageEditor | 3561 | 3561 | 0 | All Passed |
+| InPlaceEditor | 764 | 764 | 0 | All Passed |
+| InputMask | 168 | 168 | 0 | All Passed |
+| Kanban | 380 | 380 | 0 | All Passed |
+| LinearGauge | 799 | 799 | 0 | All Passed |
+| ListBox | 138 | 138 | 0 | All Passed |
+| ListView | 441 | 441 | 0 | All Passed |
+| Maps | 1570 | 1570 | 0 | All Passed |
+| Mention | 152 | 152 | 0 | All Passed |
+| Menu | 398 | 398 | 0 | All Passed |
+| Message | 211 | 211 | 0 | All Passed |
+| MultiselectDropdown | 386 | 386 | 0 | All Passed |
+| NumericTextbox | 442 | 442 | 0 | All Passed |
+| OtpInput | 123 | 123 | 0 | All Passed |
+| PivotTable | 1378 | 1378 | 0 | All Passed |
+| ProgressBar | 199 | 199 | 0 | All Passed |
+| progressbutton | 101 | 101 | 0 | All Passed |
+| QueryBuilder | 584 | 584 | 0 | All Passed |
+| RangeNavigator | 196 | 196 | 0 | All Passed |
+| Rating | 106 | 106 | 0 | All Passed |
+| Ribbon | 451 | 451 | 0 | All Passed |
+| RichTextEditor | 2768 | 2768 | 0 | All Passed |
+| Scheduler | 5623 | 5623 | 0 | All Passed |
+| Sidebar | 144 | 144 | 0 | All Passed |
+| Slider | 271 | 271 | 0 | All Passed |
+| SmithChart | 259 | 259 | 0 | All Passed |
+| SparklineChart | 150 | 150 | 0 | All Passed |
+| SpeedDial | 353 | 353 | 0 | All Passed |
+| Splitter | 190 | 190 | 0 | All Passed |
+| Stepper | 218 | 218 | 0 | All Passed |
+| StockChart | 335 | 335 | 0 | All Passed |
+| Tabs | 936 | 936 | 0 | All Passed |
+| TextArea | 126 | 126 | 0 | All Passed |
+| Textbox | 653 | 653 | 0 | All Passed |
+| Timeline | 182 | 182 | 0 | All Passed |
+| TimePicker | 419 | 419 | 0 | All Passed |
+| Toast | 233 | 233 | 0 | All Passed |
+| Toolbar | 230 | 230 | 0 | All Passed |
+| TreeGrid | 4941 | 4941 | 0 | All Passed |
+| TreeMap | 704 | 704 | 0 | All Passed |
+| TreeView | 1361 | 1361 | 0 | All Passed |
\ No newline at end of file
diff --git a/blazor/Release-Notes/31.2.9.md b/blazor/Release-Notes/31.2.9.md
new file mode 100644
index 0000000000..dd89f63f11
--- /dev/null
+++ b/blazor/Release-Notes/31.2.9.md
@@ -0,0 +1,16 @@
+---
+title: Essential Studio for Blazor Release Notes
+description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 3 SP2 Release - Release Notes
+platform: blazor
+documentation: ug
+---
+
+# Essential Studio for Blazor - v31.2.9 Release Notes
+
+{% include release-info.html date="November 12, 2025" version="v31.2.9" %}
+
+{% directory path: _includes/release-notes/v31.2.9 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
\ No newline at end of file
diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md
index 2da03ec21e..4ece2a4f96 100644
--- a/blazor/accordion/animations.md
+++ b/blazor/accordion/animations.md
@@ -91,7 +91,4 @@ The following example demonstrates various animation types that can be applied t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.gif)" %}
diff --git a/blazor/accordion/data-binding.md b/blazor/accordion/data-binding.md
index 81a802fab9..dafed21659 100644
--- a/blazor/accordion/data-binding.md
+++ b/blazor/accordion/data-binding.md
@@ -74,6 +74,4 @@ The following example demonstrates how to initialize accordion items using `temp
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.png)" %}
\ No newline at end of file
diff --git a/blazor/accordion/expand-mode.md b/blazor/accordion/expand-mode.md
index ee29e9eb78..a59bb95059 100644
--- a/blazor/accordion/expand-mode.md
+++ b/blazor/accordion/expand-mode.md
@@ -31,10 +31,7 @@ The property enables to expand only one Accordion item at a time. If you expand
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.png)" %}
## Multiple
@@ -57,10 +54,7 @@ The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.png)" %}
## Expanding the items
@@ -127,7 +121,4 @@ By default, accordion items were in collapsed state on initial load. To expand a
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.png)" %}
\ No newline at end of file
diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md
index 16d059e703..55a2b35437 100644
--- a/blazor/accordion/getting-started-with-web-app.md
+++ b/blazor/accordion/getting-started-with-web-app.md
@@ -243,7 +243,7 @@ The following code explains how to initialize Blazor Accordion using header and
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVoisjQKaKacVAK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
## See also
diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md
index b06c35cd89..a8d65b9f06 100644
--- a/blazor/accordion/getting-started.md
+++ b/blazor/accordion/getting-started.md
@@ -172,7 +172,7 @@ The following code explains how to initialize Blazor Accordion using header and
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVoisjQKaKacVAK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %}
## See also
diff --git a/blazor/accordion/how-to/add-icon-to-accordion-header.md b/blazor/accordion/how-to/add-icon-to-accordion-header.md
index 50cd3dade6..ebe41f66f9 100644
--- a/blazor/accordion/how-to/add-icon-to-accordion-header.md
+++ b/blazor/accordion/how-to/add-icon-to-accordion-header.md
@@ -195,6 +195,4 @@ You can add custom icons to the Accordion header by using the [IconCss](https://
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.png)" %}
diff --git a/blazor/accordion/how-to/add-nested-accordion.md b/blazor/accordion/how-to/add-nested-accordion.md
index 1175b6da9b..3e3af3697b 100644
--- a/blazor/accordion/how-to/add-nested-accordion.md
+++ b/blazor/accordion/how-to/add-nested-accordion.md
@@ -60,6 +60,4 @@ The Accordion component supports to render the nested level of Accordion by usin
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.png)" %}
diff --git a/blazor/accordion/how-to/add-remove-accordion-items.md b/blazor/accordion/how-to/add-remove-accordion-items.md
index 58eb8329cf..8c07e7f0f7 100644
--- a/blazor/accordion/how-to/add-remove-accordion-items.md
+++ b/blazor/accordion/how-to/add-remove-accordion-items.md
@@ -85,7 +85,4 @@ In the following example, the Accordion initially contains three accordion items
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.gif)" %}
diff --git a/blazor/accordion/how-to/enable-disable-accordion-item.md b/blazor/accordion/how-to/enable-disable-accordion-item.md
index a218fd1ec7..ddc5cb4498 100644
--- a/blazor/accordion/how-to/enable-disable-accordion-item.md
+++ b/blazor/accordion/how-to/enable-disable-accordion-item.md
@@ -37,6 +37,4 @@ In the following example, the first accordion item is enabled or disabled dynami
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.gif)" %}
diff --git a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
index 66e390fd7b..26dc117b64 100644
--- a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
+++ b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md
@@ -181,6 +181,4 @@ The following example shows how to render a TreeView within the Accordion.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.png)" %}
diff --git a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
index 93d511e7aa..58cfd01755 100644
--- a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
+++ b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md
@@ -117,6 +117,4 @@ The following code example demonstrates how to prevent expand and collapse actio
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.gif)" %}
diff --git a/blazor/accordion/how-to/show-hide-accordion-item.md b/blazor/accordion/how-to/show-hide-accordion-item.md
index 871ce641ea..8f41419f60 100644
--- a/blazor/accordion/how-to/show-hide-accordion-item.md
+++ b/blazor/accordion/how-to/show-hide-accordion-item.md
@@ -138,6 +138,4 @@ In the following example, the specified accordion item will toggle between showi
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.gif)" %}
diff --git a/blazor/accordion/style.md b/blazor/accordion/style.md
index ba51a02a7b..934759f0ea 100644
--- a/blazor/accordion/style.md
+++ b/blazor/accordion/style.md
@@ -144,7 +144,4 @@ You can customize each accordion item header by setting [AccordionItem.CssClass]
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.png)" %}
diff --git a/blazor/accumulation-chart/annotation.md b/blazor/accumulation-chart/annotation.md
index 3d5e8fab7f..037d6725b1 100644
--- a/blazor/accumulation-chart/annotation.md
+++ b/blazor/accumulation-chart/annotation.md
@@ -51,8 +51,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.png)" %}
## Region
@@ -98,8 +97,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.png)" %}
## Co-ordinate units
@@ -145,8 +143,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.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.
diff --git a/blazor/accumulation-chart/center-label.md b/blazor/accumulation-chart/center-label.md
index 4fd6f7ff7c..eb407fb9b5 100644
--- a/blazor/accumulation-chart/center-label.md
+++ b/blazor/accumulation-chart/center-label.md
@@ -44,8 +44,7 @@ You can configure the text that appears in the center using the [Text](https://h
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png)" %}
## Hover Text
@@ -84,8 +83,7 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif)" %}
## Customization
@@ -125,8 +123,7 @@ The position of the center label can be adjusted using the [XOffset](https://hel
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.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.
diff --git a/blazor/accumulation-chart/chart-types/funnel.md b/blazor/accumulation-chart/chart-types/funnel.md
index cdb5b2934b..3cc5cfe26e 100644
--- a/blazor/accumulation-chart/chart-types/funnel.md
+++ b/blazor/accumulation-chart/chart-types/funnel.md
@@ -45,8 +45,7 @@ documentation: ug
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.png)" %}
## Funnel Size
@@ -86,8 +85,7 @@ The size of the funnel chart can be customized by using the [Width](https://help
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.png)" %}
N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel) example can be explored to learn to render and configure the funnel chart.
@@ -129,8 +127,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.png)" %}
## Gap between funnel segments
@@ -170,8 +167,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.png)" %}
## Funnel explode
@@ -211,8 +207,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.png)" %}
## Smart Data Label
@@ -264,8 +259,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png)" %}
## Border radius
@@ -305,8 +299,7 @@ The corners of the first data point and last data point in the funnel chart seri
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.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/funnel?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
diff --git a/blazor/accumulation-chart/chart-types/pie-doughnut.md b/blazor/accumulation-chart/chart-types/pie-doughnut.md
index 403b034c9c..941336c5dd 100644
--- a/blazor/accumulation-chart/chart-types/pie-doughnut.md
+++ b/blazor/accumulation-chart/chart-types/pie-doughnut.md
@@ -47,9 +47,7 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.png)" %}
## Radius customization
@@ -89,9 +87,7 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.png)" %}
## Pie center
@@ -132,8 +128,7 @@ The center x and center y can be used to change the pie's center position. The p
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.png)" %}
## Various Radius Pie Chart
@@ -175,8 +170,7 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.png)" %}
## Doughnut chart
@@ -216,8 +210,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.png)" %}
## Start and end angles
@@ -258,8 +251,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png)" %}
## Color and text mapping
@@ -301,8 +293,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png)" %}
## Border radius
@@ -336,8 +327,7 @@ The corners of all the slices in the pie/donut chart series can be rounded using
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png)" %}
## Hide pie or doughnut border
@@ -376,8 +366,7 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.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 various features of accumulation charts and how it is used to represent numeric proportional data.
diff --git a/blazor/accumulation-chart/chart-types/pyramid.md b/blazor/accumulation-chart/chart-types/pyramid.md
index 57f85bdded..08a3a90568 100644
--- a/blazor/accumulation-chart/chart-types/pyramid.md
+++ b/blazor/accumulation-chart/chart-types/pyramid.md
@@ -46,8 +46,7 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.png)" %}
## Pyramid mode
@@ -87,8 +86,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.png)" %}
## Pyramid size
@@ -128,8 +126,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.png)" %}
## Gap between pyramid segments
@@ -169,8 +166,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.png)" %}
## Pyramid explode
@@ -210,8 +206,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png)" %}
## Border radius
@@ -249,8 +244,7 @@ The corners of the first data point and last data point in the pyramid chart ser
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data.
diff --git a/blazor/accumulation-chart/data-label.md b/blazor/accumulation-chart/data-label.md
index fc56b79464..81b95be65c 100644
--- a/blazor/accumulation-chart/data-label.md
+++ b/blazor/accumulation-chart/data-label.md
@@ -46,8 +46,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.png)" %}
## Text Wrap
@@ -83,8 +82,7 @@ When the data label text exceeds the container, the text can be wrapped by using
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png)" %}
## Position
@@ -125,8 +123,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.png)" %}
## Smart Labels
@@ -178,8 +175,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.png)" %}
## Connector line
@@ -222,8 +218,7 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.png)" %}
## Text mapping
@@ -264,8 +259,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.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 various features of accumulation charts and how it is used to represent numeric proportional data.
@@ -308,8 +302,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.png)" %}
## Template
@@ -375,8 +368,7 @@ Data labels can be customized using the template element for the accumulation ch
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.png)" %}
## See also
diff --git a/blazor/accumulation-chart/empty-points.md b/blazor/accumulation-chart/empty-points.md
index ccf0d76392..d70b0fcece 100644
--- a/blazor/accumulation-chart/empty-points.md
+++ b/blazor/accumulation-chart/empty-points.md
@@ -47,8 +47,7 @@ Data points that contain **NaN** or **null** value are considered as empty point
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.png)" %}
## Customization
@@ -93,8 +92,7 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.png)" %}
## Handling No Data
@@ -147,8 +145,7 @@ When no data is available to render in the accumulation chart, the [NoDataTempla
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.gif)" %}
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 Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/accumulation-chart/grouping.md b/blazor/accumulation-chart/grouping.md
index a600d07bda..28e6b1b52b 100644
--- a/blazor/accumulation-chart/grouping.md
+++ b/blazor/accumulation-chart/grouping.md
@@ -55,8 +55,7 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.png)" %}
## Pie Grouping
@@ -110,9 +109,7 @@ The points that have been grouped together will appear as a single slice with th
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.png)" %}
**Group Mode**
When the [GroupMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupMode) property is set to [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.GroupMode.html#Syncfusion_Blazor_Charts_GroupMode_Point), the points are displayed as separate slices according to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) value. The remaining points will be grouped into a single slice and displayed.
@@ -163,8 +160,7 @@ The points that have been grouped together will appear as a single slice with th
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.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 various features of accumulation charts and how it is used to represent numeric proportional data.
diff --git a/blazor/accumulation-chart/legend.md b/blazor/accumulation-chart/legend.md
index b8d974416c..c0169e442c 100644
--- a/blazor/accumulation-chart/legend.md
+++ b/blazor/accumulation-chart/legend.md
@@ -45,8 +45,7 @@ The legend is available for accumulation charts, just like it is for charts, and
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.png)" %}
## Position and alignment
@@ -86,8 +85,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.png)" %}
## Legend Reverse
@@ -128,8 +126,7 @@ You can reverse the order of the legend items by using the [Reverse](https://hel
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.png)" %}
## Legend shape
@@ -170,8 +167,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.png)" %}
## Legend size
@@ -213,8 +209,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.png)" %}
## Legend shape size
@@ -255,8 +250,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.png)" %}
## Paging for Legend
@@ -297,8 +291,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.png)" %}
### Paging customization
@@ -355,8 +348,7 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.png)" %}
## Legend text wrap
@@ -395,8 +387,7 @@ 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" %}
+{% 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)" %}
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.
diff --git a/blazor/accumulation-chart/title-and-sub-title.md b/blazor/accumulation-chart/title-and-sub-title.md
index 3bab2bb932..4876827710 100644
--- a/blazor/accumulation-chart/title-and-sub-title.md
+++ b/blazor/accumulation-chart/title-and-sub-title.md
@@ -47,8 +47,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.png)" %}
## Title customization
@@ -90,8 +89,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.png)" %}
### Title position
@@ -133,8 +131,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.png)" %}
When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Y) properties in [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively.
@@ -172,8 +169,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.png)" %}
## Subtitle
@@ -213,8 +209,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.png)" %}
## Subtitle customization
@@ -255,8 +250,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.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 various features of accumulation charts and how it is used to represent numeric proportional data.
diff --git a/blazor/accumulation-chart/tool-tip.md b/blazor/accumulation-chart/tool-tip.md
index 3552c220fe..f874a004bb 100644
--- a/blazor/accumulation-chart/tool-tip.md
+++ b/blazor/accumulation-chart/tool-tip.md
@@ -47,8 +47,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.png)" %}
## Header
@@ -91,8 +90,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.png)" %}
## Tooltip format
@@ -135,8 +133,7 @@ By default, tooltip shows information about x and y value in points. In addition
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.png)" %}
## Tooltip customization
@@ -180,8 +177,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.png)" %}
## Tooltip Text Mapping
@@ -230,8 +226,7 @@ By default, tooltip shows information of x and y value in points. In addition, b
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.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.
diff --git a/blazor/ai-coding-assistant/mcp-server.md b/blazor/ai-coding-assistant/mcp-server.md
index 5062680f78..81218249d1 100644
--- a/blazor/ai-coding-assistant/mcp-server.md
+++ b/blazor/ai-coding-assistant/mcp-server.md
@@ -1,19 +1,19 @@
---
layout: post
-title: SyncfusionBlazorAssistant MCP Server | Syncfusion
-description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor apps.
+title: SyncfusionBlazorAssistant MCP server | Syncfusion
+description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor applications.
control: Getting started with SyncfusionBlazorAssistant MCP Server
platform: Blazor
documentation: ug
---
-# SyncfusionBlazorAssistant MCP Server
+# SyncfusionBlazorAssistant MCP server
## Overview
-The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components.
+The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) server that provides intelligent assistance for developers using Syncfusion Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components.
-### Key Benefits
+### Key benefits
* Intelligent code generation for Syncfusion® Blazor components.
* Detailed component documentation and usage examples.
@@ -23,15 +23,15 @@ The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor
Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have:
-* Required [node](https://nodejs.org/en/) version >= 18
-* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.)
+* Required [Node.js](https://nodejs.org/en/) version >= 18
+* A [compatible MCP client](https://modelcontextprotocol.io/clients) (Visual Studio Code with GitHub Copilot, [Syncfusion® Code Studio](https://www.syncfusion.com/code-studio/), etc.)
* An active Syncfusion® license (any of the following):
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
-* An active [API KEY](https://syncfusion.com/account/api-key)
+* An active [API key](https://www.syncfusion.com/account/api-key)
-## Unlimited Access
+## Unlimited access
Syncfusion® offers unlimited access to this MCP server. There are no restrictions on:
@@ -46,7 +46,7 @@ This ensures users can fully leverage Syncfusion®
Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients:
-### Generic MCP Server Settings
+### Generic MCP server settings
- **npm package name**: `@syncfusion/blazor-assistant`
- **Type**: stdio (standard input/output transport)
@@ -54,7 +54,7 @@ Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to co
- **Arguments**: -y
- **Server name**: syncfusionBlazorAssistant
-You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file:
+You need to add your [Syncfusion API key](https://www.syncfusion.com/account/api-key) as an env parameter in the configuration file:
```json
"env": {
@@ -93,7 +93,7 @@ Below are setup instructions for popular MCP clients:
}
```
-* After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands.
+* After updating the configuration in mcp.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands.
* Confirm the server is active by checking for a message like: `SyncfusionBlazorAssistant is running...` in the output.
@@ -176,7 +176,7 @@ For more details, refer to the [Cursor documentation](https://cursor.com/docs/co
For further assistance, see the [JetBrains documentation](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server).
-> For more detailed information about configuring MCP servers in various clients, refer to the official documentations, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
+> For more detailed information about configuring MCP servers in various clients, refer to the official documentation, e.g., [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json)
## Usage
@@ -199,7 +199,7 @@ To activate the SyncfusionBlazorAssistant MCP server:
Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients.
-### Best Practices for Effective Usage
+### Best practices for effective usage
1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?").
2. `Provide context`: Include details about your use case for more targeted solutions.
@@ -225,7 +225,7 @@ If you encounter issues:
## Support
-Product support is available through the following mediums.
+Product support is available through the following channels.
* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support
* [Community forum](https://www.syncfusion.com/forums/blazor-components)
@@ -234,4 +234,4 @@ Product support is available through the following mediums.
## See also
-* [Syncfusion Blazor Documentation](https://blazor.syncfusion.com/documentation)
\ No newline at end of file
+* [Syncfusion Blazor documentation](https://blazor.syncfusion.com/documentation)
diff --git a/blazor/ai-coding-assistant/overview.md b/blazor/ai-coding-assistant/overview.md
index cc9913fcb7..2dcc8fdc04 100644
--- a/blazor/ai-coding-assistant/overview.md
+++ b/blazor/ai-coding-assistant/overview.md
@@ -1,36 +1,36 @@
---
layout: post
-title: Syncfusion AI Coding Assistant Overview | Syncfusion
-description: Learn how Syncfusion AI Coding Assistant boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance.
+title: Syncfusion AI Coding Assistant overview | Syncfusion
+description: Learn how the Syncfusion AI Coding Assistant boosts Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance.
control: Syncfusion AI Coding Assistant Overview
platform: Blazor
documentation: ug
---
-# Syncfusion® AI Coding Assistant Overview
+# Syncfusion® AI Coding Assistant overview
-The **Syncfusion® AI Coding Assistant** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity.
+The **Syncfusion® AI Coding Assistant** is designed to streamline development when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity.
-AI Coding Assistant:
+AI Coding Assistants:
-* **The SyncfusionBlazorAssistant MCP Server**
- Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients).
+* **SyncfusionBlazorAssistant MCP server**
+ Processes prompts and returns tailored code suggestions through [MCP-compatible clients](https://modelcontextprotocol.io/clients).
-## Getting Started
+## Getting started
-To use the AI Coding Assistant, you need:
+To use the AI Coding Assistant, the following are required:
* A [Syncfusion® user account](https://www.syncfusion.com/account)
* An active Syncfusion® license (any of the following):
- [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense)
- [Free Community License](https://www.syncfusion.com/products/communitylicense)
- [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials)
-* An active [API KEY](https://syncfusion.com/account/api-key)
+* An active [API key](https://www.syncfusion.com/account/api-key)
* A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)
-## Unlimited Access
+## Unlimited access
-Syncfusion® offers unlimited access to the AI Coding Assistant, with no limitations on:
+Syncfusion® offers unlimited access to the AI Coding Assistant with no limitations on:
* Number of requests
* Components usage
@@ -39,12 +39,14 @@ Syncfusion® offers unlimited access to the
This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations.
-## Best Practices
+## Best practices
* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your Blazor application.
* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality.
* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security.
-* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information.
+* Step-by-step explanations: Use annotated code to understand component behavior. The level of detail may vary based on the tool, mode, and AI model. Refer to the [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information.
+* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, see the [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or contact [support](https://support.syncfusion.com/support/tickets/create).
+
* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or [support](https://support.syncfusion.com/support/tickets/create).
> Always check AI-generated content and code for accuracy before using it.
@@ -52,18 +54,18 @@ This ensures users can fully leverage Syncfusion®
## Recommendations
* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus.
-* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4.
+* Model compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4.
-## Privacy & Data Handling
+## Privacy and data handling
The Syncfusion® AI Coding Assistant is designed with privacy in mind:
* The tools do not access your project files or workspace directly.
* User prompts are not stored by any of the tools or used for any other purpose.
* Prompts are not used to train Syncfusion® models.
-* The assistant generates context, while the final output is handled by your selected AI model.
+* The assistant provides context, while the final output is generated by the AI model selected in your client.
## See also
-* Add the [SyncfusionBlazorAssistant MCP Server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client
-* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation)
+* Add the [SyncfusionBlazorAssistant MCP server](https://blazor.syncfusion.com/documentation/ai-coding-assistant/mcp-server) to an MCP-enabled client
+* [Syncfusion® Blazor documentation](https://blazor.syncfusion.com/documentation)
diff --git a/blazor/appbar/design.md b/blazor/appbar/design.md
index 46d25f9b5b..18a3f1f828 100644
--- a/blazor/appbar/design.md
+++ b/blazor/appbar/design.md
@@ -30,8 +30,7 @@ The following example depicts the code to provide spacing between the home and p
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)" %}
## Separator
@@ -66,9 +65,7 @@ The following example depicts the code to provide a vertical line between a grou
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)" %}
## Media Query
@@ -114,8 +111,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)" %}
## Designing AppBar with Menu
**SfMenu** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfMenu component.
@@ -173,8 +169,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)" %}
## Designing AppBar with Buttons
@@ -209,8 +204,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)" %}
## Designing AppBar with SideBar
@@ -370,6 +364,4 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba
}
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)" %}
\ No newline at end of file
diff --git a/blazor/appbar/position.md b/blazor/appbar/position.md
index 80fe46f511..9c41588da4 100644
--- a/blazor/appbar/position.md
+++ b/blazor/appbar/position.md
@@ -58,8 +58,7 @@ The top AppBar is the default one in which it positions the AppBar at the top of
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.png)" %}
### Bottom AppBar
@@ -104,8 +103,7 @@ This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.png)" %}
### Sticky AppBar
@@ -150,5 +148,4 @@ This position can be set to the AppBar by setting `true` to the property [IsStic
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.png)" %}
\ No newline at end of file
diff --git a/blazor/appbar/size-and-color.md b/blazor/appbar/size-and-color.md
index 26f84e1495..e8e460ba0b 100644
--- a/blazor/appbar/size-and-color.md
+++ b/blazor/appbar/size-and-color.md
@@ -41,9 +41,7 @@ This mode is the default one in which the AppBar is displayed with the default h
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.png)" %}
### Prominent AppBar
@@ -93,9 +91,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Prominent` to t
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.png)" %}
### Dense AppBar
@@ -121,8 +117,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Dense` to the p
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.png)" %}
## Color
@@ -162,9 +157,7 @@ This color mode is the default one in which the AppBar can be displayed with a l
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.png)" %}
### Dark AppBar
@@ -194,9 +187,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Dark` to the pr
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.png)" %}
### Primary AppBar
@@ -226,9 +217,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Primary` to the
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.png)" %}
### Inherit AppBar
@@ -259,6 +248,4 @@ This color mode can be set to the AppBar by setting `AppBarColor.Inherit` to the
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.png)" %}
\ No newline at end of file
diff --git a/blazor/appbar/style-and-appearance.md b/blazor/appbar/style-and-appearance.md
index dbd0c904a8..b8c95eba84 100644
--- a/blazor/appbar/style-and-appearance.md
+++ b/blazor/appbar/style-and-appearance.md
@@ -45,8 +45,7 @@ CssClass is used for AppBar customization based on the custom class. In the exam
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.png)" %}
## HtmlAttributes
diff --git a/blazor/autocomplete/data-source.md b/blazor/autocomplete/data-source.md
index 86161d213b..5062b2b585 100644
--- a/blazor/autocomplete/data-source.md
+++ b/blazor/autocomplete/data-source.md
@@ -73,8 +73,7 @@ In the following example, `Name` column from complex data have been mapped to
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor AutoComplete Component Items](./images/blazor-aurocomplete-binding-items.png)" %}
### Array of complex object
@@ -123,10 +122,7 @@ In the following example, `Country.CountryID` column from complex data have be
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMhCzLUzZpqxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMhCzLUzZpqxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Complex Items with Blazor AutoComplete](./images/blazor-autocomplete-binding-complex-items.png)" %}
## Bind to remote data
@@ -167,9 +163,7 @@ The following sample displays the first 6 contacts from the **Customers** table
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAsripLqTYeFHm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAsripLqTYeFHm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Data Binding](./images/blazor-autocomplete-remote-data.png)" %}
### Web API Adaptor
@@ -202,10 +196,7 @@ Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Web API Adaptor](./images/blazor-autocomplete-remote-data.png)" %}
### Custom adaptor
@@ -313,10 +304,7 @@ Refer to the following example for remote data binding and enabled offline mode.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUMBWphJDItkcZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUMBWphJDItkcZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Component in Offline Mode](./images/blazor-autocomplete-remote-data.png)" %}
### ValueTuple data binding
@@ -332,10 +320,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrqCVCzLJNucIfr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrqCVCzLJNucIfr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete ValueTuple Data](./images/blazor_autocomplete_valuetuple.png)" %}
## Binding ExpandoObject
@@ -462,9 +447,7 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthgsVWzBToAePUT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthgsVWzBToAePUT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with observable collection data binding](./images/blazor_autocomplete_observable-collection.png)" %}
## Entity Framework
diff --git a/blazor/autocomplete/filtering.md b/blazor/autocomplete/filtering.md
index 88d859d88d..b382c09df5 100644
--- a/blazor/autocomplete/filtering.md
+++ b/blazor/autocomplete/filtering.md
@@ -68,9 +68,7 @@ In the following example, `StartsWith` filter type has been mapped to the `Filte
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBKMhipBzHIgAvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBKMhipBzHIgAvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Filter Type](./images/filtering/blazor_autocomplete_filter-type.png)" %}
## Minimum length
@@ -84,9 +82,7 @@ In the following example, the remote request does not fetch the search data unti
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Character Count](./images/blazor-autocomplete-filter-based-length.png)" %}
## Multi column filtering
@@ -148,9 +144,7 @@ Refer to the following example to restrict the suggestion list item counts as 3.
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Count](./images/blazor-autocomplete-filter-item-count.png)" %}
## AutoComplete with google search result
@@ -174,9 +168,7 @@ You can highlight the search text in the suggested list items of the autocomplet
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %}
### Highlighting Search character using method
@@ -193,6 +185,4 @@ You can highlight the search text in the suggested list items of the autocomplet
{% endhighlight %}
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_dropdown_highLightSearch-method.png)" %}
diff --git a/blazor/autocomplete/grouping.md b/blazor/autocomplete/grouping.md
index 6a231fbf6f..b175604741 100644
--- a/blazor/autocomplete/grouping.md
+++ b/blazor/autocomplete/grouping.md
@@ -23,9 +23,7 @@ In the following sample, vegetables are grouped according to their category usin
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhqMhMfLJxZyQGD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhqMhMfLJxZyQGD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Grouping](./images/blazor-autocomplete-grouping.png)" %}
## Fixed group header
diff --git a/blazor/autocomplete/highlight-search.md b/blazor/autocomplete/highlight-search.md
index 9046ec2c72..7cd868b836 100644
--- a/blazor/autocomplete/highlight-search.md
+++ b/blazor/autocomplete/highlight-search.md
@@ -17,9 +17,7 @@ You can highlight the search text in the suggested list items of the autocomplet
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %}
## Highlight with template
@@ -36,9 +34,7 @@ You can highlight the search text in the suggested list items of the autocomplet
{% endhighlight %}
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_autocomplete_highLightSearch-method.png)" %}
## Change the highlight style
diff --git a/blazor/autocomplete/style.md b/blazor/autocomplete/style.md
index f44d684ef9..3d7c8475b7 100644
--- a/blazor/autocomplete/style.md
+++ b/blazor/autocomplete/style.md
@@ -45,9 +45,7 @@ You can customize the text color of a disabled component by targeting its CSS cl
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLUMBspqpbhLCdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLUMBspqpbhLCdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Disabled component text color](./images/style/blazor_autocomplete_disabled-text-color.png)" %}
## Show the custom icon in dropdown icon
@@ -81,9 +79,7 @@ You can customize the appearance of the container element within the autocomplet
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLKMhMJAzRFhNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLKMhMJAzRFhNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete container element customization](./images/style/blazor_autocomplete_appearance-of-container.png)" %}
## Customizing the dropdown icon’s color
@@ -95,9 +91,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqCVCfqzcCFPUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqCVCfqzcCFPUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete icon color](./images/style/blazor_autocomplete_icon-color.png)" %}
## Customizing the focus color
@@ -109,9 +103,7 @@ You can customize the component color when it is focused by targeting its CSS cl
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBAMVipgpQeUpvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBAMVipgpQeUpvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete focus color](./images/style/blazor_autocomplete_focus-color.png)" %}
## Customizing the outline theme's focus color
@@ -123,9 +115,7 @@ You can customize the color of the autocomplete component when it is in a focuse
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgiBMzAzcPvKba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgiBMzAzcPvKba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete focusing color outline theme](./images/style/blazor_autocomplete_outline-focus-color.png)" %}
## Customizing the background color of focus, hover, and active items
@@ -137,9 +127,7 @@ You can customize the background color and text color of list items within the a
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhUirWJAIjRQrXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhUirWJAIjRQrXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_background-color.png)" %}
## Customizing the appearance of popup element
@@ -151,9 +139,7 @@ You can customize the appearance of the popup element within the autocomplete co
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAMBMTKeChemce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAMBMTKeChemce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with customizing popup color](./images/style/blazor_autocomplete_appearance-of-popup.png)" %}
## Change the HTML attributes
@@ -273,9 +259,7 @@ You can add the search icon to the AutoComplete component by overriding the cont
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAChsTqeiSPGka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAChsTqeiSPGka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Search Icon](./images/blazor_searchicon_autocomplete.png)" %}
## Customizing the float label element's focusing color
@@ -287,9 +271,7 @@ You can change the text color of the floating label when it is focused by target
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMrMfUfPwJAuJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMrMfUfPwJAuJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with float label focusing color](./images/style/blazor_autocomplete_floatlabel-focus-color.png)" %}
## Customizing the color of the placeholder text
@@ -301,9 +283,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiLszgzkMoAhv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiLszgzkMoAhv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with color placeholder](./images/style/blazor_autocomplete_placeholder-color.png)" %}
## Customizing the placeholder to add mandatory indicator(*)
@@ -315,9 +295,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgCBCfqpEyZQOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgCBCfqpEyZQOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with mandatory indicator placeholder](./images/style/blazor_autocomplete_placeholder-with-mandatory.png)" %}
## Customizing the text selection color
@@ -329,6 +307,4 @@ The appearance of a selected item within a AutoComplete component can be customi
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVgMBsJUzucuFKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVgMBsJUzucuFKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_text-selection-color.png)" %}
diff --git a/blazor/autocomplete/templates.md b/blazor/autocomplete/templates.md
index bc3378df18..3f8611f461 100644
--- a/blazor/autocomplete/templates.md
+++ b/blazor/autocomplete/templates.md
@@ -23,9 +23,7 @@ In the following sample, each list item is split into two columns to display rel
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLCzKpNiSVjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLCzKpNiSVjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with ItemTemplate](./images/blazor-autocomplete-item-template.png)" %}
## Group template
@@ -39,9 +37,7 @@ In the following sample, employees are grouped according to their country.
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqiVMzUfBbOtpn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqiVMzUfBbOtpn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with GroupTemplate](./images/blazor-autocomplete-group-template.png)" %}
## Header template
@@ -55,9 +51,7 @@ In the following sample, the list items and its headers are designed and display
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVKChCfATUBVrhy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVKChCfATUBVrhy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HeaderTemplate](./images/blazor-autocomplete-header-template.png)" %}
## Footer template
@@ -71,9 +65,7 @@ In the following sample, footer element displays the total number of list items
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKChWpApASinEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKChWpApASinEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with FooterTemplate](./images/blazor-autocomplete-footer-template.png)" %}
## No records template
@@ -87,9 +79,7 @@ In the following sample, suggestion list content displays the notification of no
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUWLCpKTJNdtaV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUWLCpKTJNdtaV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete without Data](./images/blazor-autocomplete-without-data.png)" %}
## Action failure template
diff --git a/blazor/autocomplete/virtualization.md b/blazor/autocomplete/virtualization.md
index c9a89ea305..55741d0a91 100644
--- a/blazor/autocomplete/virtualization.md
+++ b/blazor/autocomplete/virtualization.md
@@ -21,9 +21,7 @@ This feature is applicable to both local and remote data scenarios, providing fl
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhqsLsJUSqMNRqD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhqsLsJUSqMNRqD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with virtualization](./images/blazor_autocomplete_virtualization.gif)" %}
## Remote data
diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md
index 2cd120eafe..ad9c4402b5 100644
--- a/blazor/barcode/barcodeGenerator.md
+++ b/blazor/barcode/barcodeGenerator.md
@@ -19,9 +19,7 @@ The Code 39 character set includes the digits 0-9, the letters A-Z (upper case o
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLAWhWpKaDiwKIJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLAWhWpKaDiwKIJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code39 in Blazor Barcode](images/blazor-code39-barcode.png)" %}
## Code39 Extended
@@ -33,9 +31,7 @@ Code 39 Extended is an extended version of Code 39 that supports ASCII character
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLAWBWTUEDJqMHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLAWBWTUEDJqMHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code39 Extended in Blazor Barcode](images/blazor-code39-extended-barcode.png)" %}
## Code 11
@@ -47,9 +43,7 @@ Code 11 is used primarily for labeling the telecommunication equipment’s. The
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKMLWJKunSzaPB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKMLWJKunSzaPB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code11 in Blazor Barcode](images/blazor-code11-barcode.png)" %}
## Codabar
@@ -65,9 +59,7 @@ The characters A, B, C and D are used as start and stop characters. Codabar is u
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUWrMfTZgKRrDa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUWrMfTZgKRrDa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Codabar in Blazor Barcode](images/blazor-codebar-barcode.png)" %}
## Code 32
@@ -85,9 +77,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWBWJfDKHBhkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWBWJfDKHBhkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code32 in Blazor Barcode](images/blazor-code32-barcode.png)" %}
## Code 93
@@ -99,9 +89,7 @@ Code 93 is designed to complement and improve Code 39. It can represent the enti
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgMhszJtgvyKlX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgMhszJtgvyKlX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code 93 in Blazor Barcode](images/blazor-code93-barcode.png)" %}
## Code 93 Extended
@@ -127,9 +115,7 @@ The last seven characters of Code Sets A and B (character values 96 - 102) and t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhqMrsJfNTBcTKn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhqMrsJfNTBcTKn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code 128 Special Characters in Blazor Barcode](images/blazor-code128-barcode.png)" %}
## Customizing the Barcode color
@@ -141,9 +127,7 @@ A page or printed media with barcode often appears colorful in the background an
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLKCVMfpZpePoSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLKCVMfpZpePoSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Color](images/blazor-barcode-color-customization.png)" %}
## Customizing the Barcode dimension
@@ -155,9 +139,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVACViTTDTFyxuE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVACViTTDTFyxuE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Dimension](images/blazor-barcode-dimension-customization.png)" %}
## Customizing the text
@@ -171,9 +153,7 @@ In barcode generators, you can customize the barcode text by using display [Text
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqiVspptosptJA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqiVspptosptJA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing the Text in Blazor Barcode](images/blazor-barcode-text-customization.png)" %}
## Enable Check Sum
diff --git a/blazor/barcode/datamatrixgenerator.md b/blazor/barcode/datamatrixgenerator.md
index e4292cd4f7..49417b1b81 100644
--- a/blazor/barcode/datamatrixgenerator.md
+++ b/blazor/barcode/datamatrixgenerator.md
@@ -19,9 +19,7 @@ documentation: ug
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAWrMTJZbJfybQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAWrMTJZbJfybQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode](images/blazor-barcode-with-datamatrix.png)" %}
## Customizing the Barcode color
@@ -33,9 +31,7 @@ A page or printed media with barcode often appears colorful in the background an
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrqMVCfzDOMreTm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrqMVCfzDOMreTm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Color in Data Matrix Generator](images/blazor-barcode-datamatrix-color-customization.png)" %}
## Customizing the Barcode dimension
@@ -61,9 +57,7 @@ In barcode generators, you can customize the barcode text by using the display [
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUiLMffNOmVTuG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUiLMffNOmVTuG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Text in Data Matrix Generator](images/blazor-barcode-text-in-datamatrix.png)" %}
## Event
diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md
index 1d69a7017d..f23e983f8b 100644
--- a/blazor/barcode/qrcodegenerator.md
+++ b/blazor/barcode/qrcodegenerator.md
@@ -19,9 +19,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBqsLMJfZxnCqnf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBqsLMJfZxnCqnf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[QR Code in Blazor Barcode Component](images/blazor-barcode-with-qrcode.png)" %}
## Customizing the Barcode color
@@ -33,9 +31,7 @@ A page or printed media containing a barcode often appears colorful in the backg
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUiVMzfXduXXET?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUiVMzfXduXXET?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing QR Code Color in Blazor Barcode](images/blazor-barcode-qrcode-color-customization.png)" %}
## Customizing the Barcode dimension
@@ -61,9 +57,7 @@ In barcode generators, you can customize the barcode text by using the display [
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrKMVCTTXGflLco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrKMVCTTXGflLco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing the Text for QR Code in Blazor Barcode](images/blazor-barcode-qrcode-text-customization.png)" %}
## Error Correction Level
diff --git a/blazor/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md
index 69bfd7846c..6db36308f9 100644
--- a/blazor/breadcrumb/breadcrumb-items.md
+++ b/blazor/breadcrumb/breadcrumb-items.md
@@ -31,9 +31,7 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)" %}
## Items based on current URL
@@ -44,9 +42,7 @@ The Breadcrumb items can be generated based on the current URL of the page when
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png)" %}
N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample.
@@ -60,9 +56,7 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)" %}
## Add or remove the Breadcrumb items
diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md
index b330a59ae4..f1bec6bacf 100644
--- a/blazor/breadcrumb/getting-started.md
+++ b/blazor/breadcrumb/getting-started.md
@@ -155,9 +155,7 @@ Add the Syncfusion® Blazor Breadcrumb compo
* Press F5 to run the application. Then, the Syncfusion® Blazor Breadcrumb component will be rendered in the default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png)" %}
N> The Breadcrumb component will render based on the current URL, when the Breadcrumb items are not specified.
diff --git a/blazor/breadcrumb/icons.md b/blazor/breadcrumb/icons.md
index 684a465673..5992eb3bcc 100644
--- a/blazor/breadcrumb/icons.md
+++ b/blazor/breadcrumb/icons.md
@@ -27,9 +27,7 @@ To place the font icon on the Breadcrumb item, set the [IconCss](https://help.sy
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
N> By default, the icon is positioned to the left side of the item.
@@ -57,9 +55,7 @@ In the Breadcrumb component, you can add images to the items using [IconCss](htt
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.png)" %}
## Breadcrumb with SVG image
@@ -85,9 +81,7 @@ In the Breadcrumb component, SVG image can be added for the items using the [Ico
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.PNG)" %}
## Icon only
@@ -106,9 +100,7 @@ In the following example, Breadcrumb items are demonstrated with only icons by p
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.PNG)" %}
## Show icon only for first item
@@ -126,6 +118,4 @@ To show icon only for the first item in the Breadcrumb component, add icons to t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/navigation.md b/blazor/breadcrumb/navigation.md
index e33de13812..6a355090ac 100644
--- a/blazor/breadcrumb/navigation.md
+++ b/blazor/breadcrumb/navigation.md
@@ -29,9 +29,7 @@ You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png)" %}
## Absolute URL
@@ -50,9 +48,7 @@ You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png)" %}
## Enable navigation for last Breadcrumb item
@@ -71,6 +67,4 @@ Breadcrumb enables the navigation for the last item by setting the [EnableActive
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/overflow.md b/blazor/breadcrumb/overflow.md
index bbb55f13bb..255a287b1d 100644
--- a/blazor/breadcrumb/overflow.md
+++ b/blazor/breadcrumb/overflow.md
@@ -44,9 +44,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png)" %}
## Menu
@@ -70,9 +68,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.png)" %}
## Wrap
@@ -96,9 +92,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.png)" %}
## Scroll
@@ -124,9 +118,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.png)" %}
## Hidden
@@ -150,9 +142,7 @@ Hidden mode shows the maximum number of items possible in the container space an
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.png)" %}
## None
diff --git a/blazor/breadcrumb/style-and-appearance.md b/blazor/breadcrumb/style-and-appearance.md
index 340436db6f..11ba7d5e38 100644
--- a/blazor/breadcrumb/style-and-appearance.md
+++ b/blazor/breadcrumb/style-and-appearance.md
@@ -53,6 +53,4 @@ Use the following CSS to customize the background and text color of Breadcrumb.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png)" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md
index 5b75ad02db..3497a8a7f5 100644
--- a/blazor/breadcrumb/templates.md
+++ b/blazor/breadcrumb/templates.md
@@ -47,9 +47,7 @@ In the following example, shopping cart details are used as Breadcrumb items and
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png)" %}
## Separator template
@@ -79,9 +77,7 @@ In the following example, the separators are customized with icons using [Separa
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png)" %}
## Customize Specific Item Template
@@ -148,6 +144,4 @@ The specific breadcrumb item can be customizable by adding the custom element as
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/actual-bar.md b/blazor/bullet-chart/actual-bar.md
index 393604685c..14c355c3c0 100644
--- a/blazor/bullet-chart/actual-bar.md
+++ b/blazor/bullet-chart/actual-bar.md
@@ -33,9 +33,7 @@ To display the primary data or the current value of the data being measured know
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.png)" %}
## Types of actual bar
@@ -55,9 +53,7 @@ The shape of the actual bar can be customized using the [Type](https://help.sync
N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.png)" %}
## Actual bar customization
@@ -82,6 +78,4 @@ The following properties will be used to customize the actual bar.
N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/axis-customization.md b/blazor/bullet-chart/axis-customization.md
index 057e57b00b..3ed4dad11d 100644
--- a/blazor/bullet-chart/axis-customization.md
+++ b/blazor/bullet-chart/axis-customization.md
@@ -43,9 +43,7 @@ The following properties can be used to customize [MajorTicklines](https://help.
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.png)" %}
## Tick placement
@@ -65,9 +63,7 @@ The major and the minor ticks can be placed [Inside](https://help.syncfusion.com
N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.png)" %}
## Label format
@@ -87,9 +83,7 @@ The axis labels support all the globalize formats and can be changed using the [
N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.png)" %}
The following table describes the result of applying some commonly used formats to numeric axis values.
@@ -179,9 +173,7 @@ To separate the groups of thousands, set the [EnableGroupSeparator](https://help
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.png)" %}
## Custom label format
@@ -201,9 +193,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.png)" %}
## Label placement
@@ -223,9 +213,7 @@ Label can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl
N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.png)" %}
## Opposed position
@@ -245,9 +233,7 @@ To place an axis opposite to its original position, set the [OpposedPosition](ht
N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.png)" %}
## Category label
@@ -278,9 +264,7 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.png)" %}
## Axis label and category label customization
@@ -302,6 +286,4 @@ The label color, opacity, font size, font family, font weight, and font style ca
N> Refer to the [code block](#category-label) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/bullet-chart-dimensions.md b/blazor/bullet-chart/bullet-chart-dimensions.md
index f5267492df..cd7ec91fcb 100644
--- a/blazor/bullet-chart/bullet-chart-dimensions.md
+++ b/blazor/bullet-chart/bullet-chart-dimensions.md
@@ -90,6 +90,4 @@ The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/data-binding.md b/blazor/bullet-chart/data-binding.md
index b732b4aa4c..31a6acfbbb 100644
--- a/blazor/bullet-chart/data-binding.md
+++ b/blazor/bullet-chart/data-binding.md
@@ -41,6 +41,4 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png)" %}
\ No newline at end of file
diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md
index 0837c0c3ab..df8f8d7c1e 100644
--- a/blazor/bullet-chart/ranges.md
+++ b/blazor/bullet-chart/ranges.md
@@ -34,9 +34,7 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and *
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.png)" %}
## Color customization
@@ -70,6 +68,4 @@ Enhance the readability of ranges with color and opacity. It can be applied usin
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/button-group/selection-and-nesting.md b/blazor/button-group/selection-and-nesting.md
index 4ba436411d..df1d91c4b6 100644
--- a/blazor/button-group/selection-and-nesting.md
+++ b/blazor/button-group/selection-and-nesting.md
@@ -46,9 +46,7 @@ The following example illustrates the single selection behavior in ButtonGroup.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBzsDVOTbttngcl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBzsDVOTbttngcl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with Single Selection](./images/blazor-buttongroup-single-selection.png)" %}
## Multiple selection
@@ -85,9 +83,7 @@ The following example illustrates the multiple selection behavior in ButtonGroup
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLfitrYfutrvLMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLfitrYfutrvLMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with Multiple Selection](./images/blazor-buttongroup-multiple-selection.png)" %}
## Nesting
@@ -116,9 +112,7 @@ In the following example, the DropDownButton component can be added in ButtonGro
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrUsLVrClyyBbnb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrUsLVrClyyBbnb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with DropDown Button](./images/blazor-buttongroup-with-dropdown.png)" %}
### SplitButton
@@ -140,6 +134,4 @@ In the following example, SplitButton component can be added in ButtonGroup tag.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBgMhVLilSvoAeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBgMhVLilSvoAeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with SplitButton](./images/blazor-buttongroup-with-splitbutton.png)" %}
\ No newline at end of file
diff --git a/blazor/button-group/types-and-styles.md b/blazor/button-group/types-and-styles.md
index 02727ba228..8d6225997b 100644
--- a/blazor/button-group/types-and-styles.md
+++ b/blazor/button-group/types-and-styles.md
@@ -40,9 +40,7 @@ The Blazor ButtonGroup has the following predefined styles that can be defined u
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrUWrVhsFgtTPNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrUWrVhsFgtTPNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with different Style](./images/blazor-buttongroup-style.png)" %}
N> Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers.
@@ -88,9 +86,7 @@ A round ButtonGroup is shaped like a circle. Usually, it contains an icon repres
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthKWBVBCPUzgjog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthKWBVBCPUzgjog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying different Type of ButtonGroup Component](./images/blazor-buttongroup-type.png)" %}
## Icons
@@ -118,10 +114,7 @@ To create ButtonGroup with icons, [IconCss](https://help.syncfusion.com/cr/blazo
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjByDhrHzXmJmyeK?appbar=true&editor=true&result=true&errorlist=true&theme=material" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjByDhrHzXmJmyeK?appbar=true&editor=true&result=true&errorlist=true&theme=material" backgroundimage "[Blazor ButtonGroup with Icon](./images/blazor-buttongroup-icon.png)" %}
## ButtonGroup size
@@ -142,7 +135,4 @@ The two types of ButtonGroup sizes are default and small. To change the size of
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrgirVBMPpAJRYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrgirVBMPpAJRYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ButtonGroup Size](./images/blazor-buttongroup-size.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/create-a-block-button.md b/blazor/button/how-to/create-a-block-button.md
index 6104871cde..14510939c8 100644
--- a/blazor/button/how-to/create-a-block-button.md
+++ b/blazor/button/how-to/create-a-block-button.md
@@ -20,6 +20,4 @@ You can customize a Button into a Block Button that will span the entire width o
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKWVVBMmGAcBTQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKWVVBMmGAcBTQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Block Button](./../images/blazor-block-button.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/customize-button-appearance.md b/blazor/button/how-to/customize-button-appearance.md
index 5ea9aacd07..3a354e91fe 100644
--- a/blazor/button/how-to/customize-button-appearance.md
+++ b/blazor/button/how-to/customize-button-appearance.md
@@ -32,6 +32,4 @@ You can customize the appearance of the Button by using the Cascading Style Shee
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Button Appearance](./../images/blazor-button-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/repeat-button.md b/blazor/button/how-to/repeat-button.md
index 28bfc5c887..ab546d3091 100644
--- a/blazor/button/how-to/repeat-button.md
+++ b/blazor/button/how-to/repeat-button.md
@@ -57,6 +57,4 @@ The following example explains about how to achieve Repeat Button in mouse and t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrUCVhhiGkNFPZK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrUCVhhiGkNFPZK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Repeat Button in Blazor Button Component](./../images/blazor-button-with-repeat-button.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/right-to-left.md b/blazor/button/how-to/right-to-left.md
index acfc9c368a..ddc220de78 100644
--- a/blazor/button/how-to/right-to-left.md
+++ b/blazor/button/how-to/right-to-left.md
@@ -25,7 +25,4 @@ The following example illustrates how to enable right-to-left support in Button
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVgirrrCcOUEMiy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVgirrrCcOUEMiy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor Button](./../images/blazor-button-in-right-to-left.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/set-the-disabled-state.md b/blazor/button/how-to/set-the-disabled-state.md
index 21b7a8a507..99b9b1d24c 100644
--- a/blazor/button/how-to/set-the-disabled-state.md
+++ b/blazor/button/how-to/set-the-disabled-state.md
@@ -30,6 +30,4 @@ The following example demonstrates Button in `Disabled` state.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor Button](./../images/blazor-button-disable-state.png)" %}
\ No newline at end of file
diff --git a/blazor/button/how-to/tooltip-for-button.md b/blazor/button/how-to/tooltip-for-button.md
index 3d3364d53e..c5df8eaaef 100644
--- a/blazor/button/how-to/tooltip-for-button.md
+++ b/blazor/button/how-to/tooltip-for-button.md
@@ -23,6 +23,4 @@ Tooltip can be shown on Button hover and it can be achieved by title attribute.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVqMVVLsbtDTzCr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVqMVVLsbtDTzCr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button displays ToolTip](./../images/blazor-button-tooltip.png)" %}
diff --git a/blazor/button/native-event.md b/blazor/button/native-event.md
index f168981333..f3f5314fe8 100644
--- a/blazor/button/native-event.md
+++ b/blazor/button/native-event.md
@@ -56,6 +56,4 @@ The `onclick` attribute is used to bind the click event for button. Here, we hav
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqMVBhCcqcrEoi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqMVBhCcqcrEoi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Native Event Button.](images/blazor-native-event-button.png)" %}
\ No newline at end of file
diff --git a/blazor/button/style-and-appearance.md b/blazor/button/style-and-appearance.md
index 81911f31b3..5b94f2a275 100644
--- a/blazor/button/style-and-appearance.md
+++ b/blazor/button/style-and-appearance.md
@@ -44,6 +44,4 @@ Use the following CSS to customize the background color of button while clicking
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif)" %}
\ No newline at end of file
diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md
index 2742bd71db..7163441a7b 100644
--- a/blazor/button/types-and-styles.md
+++ b/blazor/button/types-and-styles.md
@@ -37,9 +37,7 @@ The Blazor Button has the following predefined styles that can be defined using
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component with different Styles](./images/blazor-button-with-different-style.png)" %}
N> Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers.
@@ -79,9 +77,7 @@ A Round Button is circular in shape. Usually, it contains an icon representing i
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with different Types](./images/blazor-button-types.png)" %}
### Primary Button
@@ -93,9 +89,7 @@ The primary button is styled with background color and it is used to represent a
Primary
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Primary Button](./images/blazor-primary-button.png)" %}
### Toggle Button
@@ -140,9 +134,7 @@ A toggle Button allows you to change between the two states. The Button is activ
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Button](./images/blazor-toggle-button.png)" %}
## Icons
@@ -167,10 +159,7 @@ The Button can have an icon to provide the visual representation of the action.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with Icon](./images/blazor-button-icon.png)" %}
## Button size
@@ -184,7 +173,4 @@ The two types of Button sizes are default and small. To change the size of the d
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with different Size](./images/blazor-button-with-different-size.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md
index 40a0636222..0e808923b0 100644
--- a/blazor/calendar/calendar-views.md
+++ b/blazor/calendar/calendar-views.md
@@ -33,10 +33,7 @@ The following example demonstrates how to set the `Year` as the start view of th
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.png)" %}
## View restriction
@@ -57,7 +54,4 @@ N> Depth view should always be smaller than the Start view. If the `Depth` and `
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md
index beeabc4093..b8f782c846 100644
--- a/blazor/calendar/date-range.md
+++ b/blazor/calendar/date-range.md
@@ -29,6 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md
index b6a3c0fe9e..e5448fb521 100644
--- a/blazor/calendar/dateonly-support.md
+++ b/blazor/calendar/dateonly-support.md
@@ -19,6 +19,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %}
\ No newline at end of file
diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md
index abe8dca15d..90a9650277 100644
--- a/blazor/calendar/how-to/change-the-first-day-of-week.md
+++ b/blazor/calendar/how-to/change-the-first-day-of-week.md
@@ -20,6 +20,4 @@ The following code shows the Calendar with `Tuesday` as the first day of the wee
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
index 42aea9a0ac..681b3325c1 100644
--- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
+++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md
@@ -16,9 +16,7 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.png)" %}
## Week rule
diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md
index 9e6adbbe15..47892e8d35 100644
--- a/blazor/calendar/how-to/show-dates-of-other-months.md
+++ b/blazor/calendar/how-to/show-dates-of-other-months.md
@@ -32,6 +32,4 @@ The following code demonstrates how to show dates of other months. Using the sty
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md
index 629d4e7512..cdb767c883 100644
--- a/blazor/calendar/multi-select.md
+++ b/blazor/calendar/multi-select.md
@@ -25,7 +25,4 @@ public DateTime[] MultipleValues { get; set; } = new DateTime[] { new DateTime(D
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.png)" %}
\ No newline at end of file
diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md
index fe525baa21..863331a1a1 100644
--- a/blazor/calendar/special-dates.md
+++ b/blazor/calendar/special-dates.md
@@ -89,6 +89,4 @@ You can customize specific dates in a [Blazor Calendar](https://www.syncfusion.c
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.png)" %}
\ No newline at end of file
diff --git a/blazor/card/header-content.md b/blazor/card/header-content.md
index 4831aefb13..23f56d971a 100644
--- a/blazor/card/header-content.md
+++ b/blazor/card/header-content.md
@@ -94,6 +94,4 @@ Card content is designed to display an image tag within it. You can wrap an imag
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %}
\ No newline at end of file
diff --git a/blazor/card/horizontal.md b/blazor/card/horizontal.md
index 3d9b8109d2..1b404916c7 100644
--- a/blazor/card/horizontal.md
+++ b/blazor/card/horizontal.md
@@ -37,9 +37,7 @@ A horizontally aligned card can push a specific column to align vertically using
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %}
## See also
diff --git a/blazor/carousel/animations-and-transitions.md b/blazor/carousel/animations-and-transitions.md
index 7b6948fe80..871dd13026 100644
--- a/blazor/carousel/animations-and-transitions.md
+++ b/blazor/carousel/animations-and-transitions.md
@@ -63,9 +63,7 @@ The following demo depicts the example for `Fade` animation,
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUMrhrhmDEXNND?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUMrhrhmDEXNND?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel fade animation](images/fade_animation.gif)" %}
### Custom animation
@@ -156,9 +154,7 @@ The following demo depicts the example for `parallax` custom animation
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhgWrBrLGWiDURZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhgWrBrLGWiDURZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel custom animation](images/custom_animation.gif)" %}
## Intervals between slides
@@ -346,9 +342,7 @@ In the carousel, slides transitions are repeated continuously when you reach the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgiVVhrwLArCWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgiVVhrwLArCWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Looping Slides](images/looping_slides.png)" %}
## Slide changing events
@@ -509,6 +503,4 @@ The following are the different swipe modes available in the carousel:
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMVVVhQADiviB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMVVVhQADiviB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Swipe Mode](images/swipe.gif)" %}
\ No newline at end of file
diff --git a/blazor/carousel/navigators-and-indicators.md b/blazor/carousel/navigators-and-indicators.md
index c0cbf24a20..df6fb3ed6d 100644
--- a/blazor/carousel/navigators-and-indicators.md
+++ b/blazor/carousel/navigators-and-indicators.md
@@ -68,9 +68,7 @@ The following example depicts the code to hide the navigators in the carousel.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKCBVhAsyEmfKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKCBVhAsyEmfKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators](images/navigators_hidden.png)" %}
### Show previous and next button on hover
@@ -116,9 +114,7 @@ In the carousel, you can show the previous and next buttons only on mouse hover
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrAiBrLAMdVnAce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrAiBrLAMdVnAce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators OnHover](images/navigators_onhover.gif)" %}
### Previous and next button template
@@ -200,9 +196,7 @@ Template options are provided to customize the previous button using [PreviousBu
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVUihrBKinwfomJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVUihrBKinwfomJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators Template](images/navigators_template.png)" %}
## Indicators
@@ -250,9 +244,7 @@ In indicators, the total slides and current slide state have been depicted. You
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsVBBgWwAAeOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsVBBgWwAAeOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_hidden.png)" %}
### Indicators template
@@ -328,9 +320,7 @@ Template option is provided to customize the indicators by using the [Indicators
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqshhrUWwRrjbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqshhrUWwRrjbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_template.png)" %}
### Showing preview of slide in indicator
@@ -405,9 +395,7 @@ You can customize the indicators by showing the preview image of each slide usin
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLAsVBBgMwagdvn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLAsVBBgMwagdvn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_preview.png)" %}
### Indicators Types
@@ -462,9 +450,7 @@ A default indicator in a carousel is a set of dots that indicate the current pos
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBKsBVhKsaLlNlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBKsBVhKsaLlNlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type default](images/indicator-default.png)" %}
#### Dynamic Indicator
@@ -510,9 +496,7 @@ A dynamic indicator in a carousel provides visual cues or markers that dynamical
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqsLBhACumvJUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqsLBhACumvJUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type dynamic](images/indicator-dynamic.png)" %}
#### Fraction Indicator
@@ -558,9 +542,7 @@ The fraction indicator type displays the current slide index and total slide cou
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBUCBhhqVZMmiMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBUCBhhqVZMmiMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type fraction](images/indicator-fraction.png)" %}
#### Progress Indicator
@@ -606,9 +588,7 @@ The Progress Indicator type displays the current slide as a progress bar. The Pr
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgChBrqhNyvyRO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgChBrqhNyvyRO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type progress](images/indicator-progress.png)" %}
## Play button
@@ -656,9 +636,7 @@ In the carousel, [AutoPlay](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLUCBVrgBjuRDmo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLUCBVrgBjuRDmo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button.png)" %}
### Play button template
@@ -737,6 +715,4 @@ Template option is provided to customize the play button by using the [PlayButto
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgsVVhgVCgSyAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgsVVhgVCgSyAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button_template.png)" %}
diff --git a/blazor/carousel/populating-items.md b/blazor/carousel/populating-items.md
index d6eaa1f2ae..b91683aca0 100644
--- a/blazor/carousel/populating-items.md
+++ b/blazor/carousel/populating-items.md
@@ -110,9 +110,7 @@ Using the [SelectedIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgiVVLhncMgRcW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgiVVLhncMgRcW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel selected slide](images/selected_index.png)" %}
### Select an item using the method
@@ -237,9 +235,7 @@ The Carousel component supports to show one complete slide and a partial view of
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqMVVLVdwQwMNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqMVVLVdwQwMNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/partial-visible.jpg)" %}
N> Slide animation only applicable if the `partialVisible` is enabled.
@@ -298,9 +294,7 @@ The following example code depicts the functionality of `partialVisible` and wit
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLqMrrLhHlMnUgO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLqMrrLhHlMnUgO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/without-loop.jpg)" %}
## See also
diff --git a/blazor/chart/axis-customization.md b/blazor/chart/axis-customization.md
index 459ab062af..f75f387aee 100644
--- a/blazor/chart/axis-customization.md
+++ b/blazor/chart/axis-customization.md
@@ -54,9 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.png)" %}
## Title
@@ -97,9 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %}
### Axis title alignment
@@ -143,9 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.png)" %}
## Tick lines
@@ -188,9 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %}
## Grid lines customization
@@ -232,9 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %}
## Multiple Axis
@@ -279,9 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %}
## See also
@@ -328,9 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %}
## Opposed position
@@ -371,9 +357,7 @@ To place an axis in the opposite position of its original position, set its [Opp
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/axis-labels.md b/blazor/chart/axis-labels.md
index c4ec06965b..c53f9e7f12 100644
--- a/blazor/chart/axis-labels.md
+++ b/blazor/chart/axis-labels.md
@@ -60,9 +60,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %}
**Case 2:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelIntersectAction) is set to **Rotate45**.
@@ -104,9 +102,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %}
**Case 3:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelIntersectAction) is set to **Rotate90**.
@@ -148,9 +144,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %}
## Axis labels positioning
@@ -194,9 +188,7 @@ The axis labels can be put **Outside** of the axis line by default, however the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.png)" %}
## Multilevel labels
@@ -251,9 +243,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.png)" %}
### Overflow
@@ -305,9 +295,7 @@ Using the [Overflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.png)" %}
### Alignment
@@ -359,9 +347,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.png)" %}
### Text customization
@@ -414,9 +400,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.png)" %}
### Border customization
@@ -469,9 +453,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.png)" %}
## Edge label placement
@@ -519,9 +501,7 @@ The longer text labels at the axes edges may only be partially visible in the c
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %}
## Labels customization
@@ -563,9 +543,7 @@ The label [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.png)" %}
## Trim label
@@ -606,9 +584,7 @@ The label can be trimmed using the [EnableTrim](https://help.syncfusion.com/cr/b
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.png)" %}
## Line break
@@ -650,9 +626,7 @@ The ` ` tag can used to separate the long axis label into multiple lines.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.png)" %}
## Label format
@@ -732,9 +706,7 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.png)" %}
## Axis label template
@@ -788,8 +760,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroXaDFiQqYQesU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroXaDFiQqYQesU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.png)" %}
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization).
diff --git a/blazor/chart/category-axis.md b/blazor/chart/category-axis.md
index bfdca6df7e..336f8dda5e 100644
--- a/blazor/chart/category-axis.md
+++ b/blazor/chart/category-axis.md
@@ -50,9 +50,7 @@ You can learn how to customize the category axis by watching the video below.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %}
## Labels placement
@@ -93,9 +91,7 @@ The category labels are positioned between ticks by default, but the [LabelPlace
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.png)" %}
## Range and interval
@@ -136,9 +132,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %}
## Indexed category axis
@@ -187,9 +181,7 @@ The category axis can also be rendered using the data source index values. This
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals.
diff --git a/blazor/chart/chart-appearance.md b/blazor/chart/chart-appearance.md
index ef00a5ce9f..d2fe14843c 100644
--- a/blazor/chart/chart-appearance.md
+++ b/blazor/chart/chart-appearance.md
@@ -332,8 +332,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.png)" %}
When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Y) properties in [ChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively.
@@ -376,8 +375,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.png)" %}
## Chart subtitle
diff --git a/blazor/chart/chart-dimensions.md b/blazor/chart/chart-dimensions.md
index 89ce1fc0dd..127597f763 100644
--- a/blazor/chart/chart-dimensions.md
+++ b/blazor/chart/chart-dimensions.md
@@ -61,9 +61,7 @@ The chart can be scaled to fit the container. As shown below, the size can be s
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %}
## Size for chart
@@ -107,9 +105,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %}
### In percentage
@@ -149,9 +145,7 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/chart-types/area.md b/blazor/chart/chart-types/area.md
index 2955f4ff9c..b5cb8aee54 100644
--- a/blazor/chart/chart-types/area.md
+++ b/blazor/chart/chart-types/area.md
@@ -42,9 +42,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.png)" %}
N> Refer to our [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=fluent) to know how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/chart-types/bar.md b/blazor/chart/chart-types/bar.md
index 49ad50481e..23d41c1b7a 100644
--- a/blazor/chart/chart-types/bar.md
+++ b/blazor/chart/chart-types/bar.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.png)" %}
N> Refer to our [Blazor Bar Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Bar Chart Example](https://blazor.syncfusion.com/demos/chart/bar?theme=bootstrap5) to compare values across categories by using horizontal bars.
@@ -370,8 +368,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.png)" %}
We can customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -421,8 +418,7 @@ We can customize the corner radius for individual points in the chart series usi
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png)" %}
## Bar space and width
@@ -508,8 +504,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.png)" %}
## Grouped bar
diff --git a/blazor/chart/chart-types/box-whisker.md b/blazor/chart/chart-types/box-whisker.md
index 2dbe3da28f..0e049f126a 100644
--- a/blazor/chart/chart-types/box-whisker.md
+++ b/blazor/chart/chart-types/box-whisker.md
@@ -53,9 +53,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.png)" %}
N> Refer to our [Blazor Box and Whisker Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Box and Whisker Chart Example](https://blazor.syncfusion.com/demos/chart/box-and-whisker) to know how to render and configure the box and whisker type charts.
diff --git a/blazor/chart/chart-types/bubble.md b/blazor/chart/chart-types/bubble.md
index 6fef39f06a..62914bc103 100644
--- a/blazor/chart/chart-types/bubble.md
+++ b/blazor/chart/chart-types/bubble.md
@@ -56,9 +56,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png)" %}
N> Refer to our [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore our [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts.
diff --git a/blazor/chart/chart-types/candle.md b/blazor/chart/chart-types/candle.md
index fd97b322d7..7a553339c1 100644
--- a/blazor/chart/chart-types/candle.md
+++ b/blazor/chart/chart-types/candle.md
@@ -59,9 +59,7 @@ To render a [`Candle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/column.md b/blazor/chart/chart-types/column.md
index 7b9348e83c..5c09e967c5 100644
--- a/blazor/chart/chart-types/column.md
+++ b/blazor/chart/chart-types/column.md
@@ -56,9 +56,7 @@ To render a [Column Chart](https://www.syncfusion.com/blazor-components/blazor-c
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.png)" %}
N> Refer to our [Blazor Column Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Column Charts Example](https://blazor.syncfusion.com/demos/chart/column?theme=bootstrap5) to compare **Frequency**, **Count**, **Total**, or **Average** of data in different categories.
@@ -372,8 +370,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -423,8 +420,7 @@ We can also customize the corner radius for individual points in the chart serie
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png)" %}
## Column space and width
@@ -556,8 +552,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.png)" %}
## Grouped column
diff --git a/blazor/chart/chart-types/error-bar.md b/blazor/chart/chart-types/error-bar.md
index 19f336f32b..c992030392 100644
--- a/blazor/chart/chart-types/error-bar.md
+++ b/blazor/chart/chart-types/error-bar.md
@@ -49,9 +49,7 @@ Error bars are graphical representations of the variability of data that are use
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.png)" %}
## Error bar type
diff --git a/blazor/chart/chart-types/high-low-open-close.md b/blazor/chart/chart-types/high-low-open-close.md
index c169311419..241fe76c7c 100644
--- a/blazor/chart/chart-types/high-low-open-close.md
+++ b/blazor/chart/chart-types/high-low-open-close.md
@@ -53,9 +53,7 @@ You can learn how to create a HiloOpenClose chart using Blazor Charts by watchin
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/high-low.md b/blazor/chart/chart-types/high-low.md
index 6aadf2c31f..cd7195d5a2 100644
--- a/blazor/chart/chart-types/high-low.md
+++ b/blazor/chart/chart-types/high-low.md
@@ -58,9 +58,7 @@ This indicates that the data should be represented as a hilo chart, which shows
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.png)" %}
N> Refer to our [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page to know about its other groundbreaking feature representations and also explore our [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to know how to render and configure the Hilo type series.
diff --git a/blazor/chart/chart-types/histogram.md b/blazor/chart/chart-types/histogram.md
index f7789e6c6d..e99cab953b 100644
--- a/blazor/chart/chart-types/histogram.md
+++ b/blazor/chart/chart-types/histogram.md
@@ -65,9 +65,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.png)" %}
## Events
diff --git a/blazor/chart/chart-types/line.md b/blazor/chart/chart-types/line.md
index d9f4125b0f..e69987533b 100644
--- a/blazor/chart/chart-types/line.md
+++ b/blazor/chart/chart-types/line.md
@@ -56,9 +56,7 @@ To render a [Line](https://www.syncfusion.com/blazor-components/blazor-charts/ch
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png)" %}
N> Refer to our [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/chart-types/pare-to.md b/blazor/chart/chart-types/pare-to.md
index 0137ad74a3..0f9bb1a9ba 100644
--- a/blazor/chart/chart-types/pare-to.md
+++ b/blazor/chart/chart-types/pare-to.md
@@ -63,9 +63,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/polar.md b/blazor/chart/chart-types/polar.md
index c8859e58ef..7a88d10484 100644
--- a/blazor/chart/chart-types/polar.md
+++ b/blazor/chart/chart-types/polar.md
@@ -51,9 +51,7 @@ To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/c
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.png)" %}
N> Refer to our [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Polar type chart.
diff --git a/blazor/chart/chart-types/radar.md b/blazor/chart/chart-types/radar.md
index 0d45ec0d0d..e8fddeb635 100644
--- a/blazor/chart/chart-types/radar.md
+++ b/blazor/chart/chart-types/radar.md
@@ -54,9 +54,7 @@ To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/bl
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.png)" %}
N> Refer to our [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Radar type chart.
diff --git a/blazor/chart/chart-types/range-area.md b/blazor/chart/chart-types/range-area.md
index 67bec2cd54..c9a7f94021 100644
--- a/blazor/chart/chart-types/range-area.md
+++ b/blazor/chart/chart-types/range-area.md
@@ -52,9 +52,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.png)" %}
N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time.
diff --git a/blazor/chart/chart-types/range-column.md b/blazor/chart/chart-types/range-column.md
index 1bd6dd3527..5c75c08fa5 100644
--- a/blazor/chart/chart-types/range-column.md
+++ b/blazor/chart/chart-types/range-column.md
@@ -64,9 +64,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.png)" %}
N> Refer to our [Blazor Range Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=bootstrap5) to know how to show variations in the data values for a given time.
@@ -520,8 +518,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -585,8 +582,7 @@ We can also customize the corner radius for individual points in the chart serie
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.png)" %}
## Empty points
diff --git a/blazor/chart/chart-types/range-step-area.md b/blazor/chart/chart-types/range-step-area.md
index 65292cee8a..26106a86c0 100644
--- a/blazor/chart/chart-types/range-step-area.md
+++ b/blazor/chart/chart-types/range-step-area.md
@@ -58,9 +58,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/scatter.md b/blazor/chart/chart-types/scatter.md
index 8ea2aa4e4d..a76ff93607 100644
--- a/blazor/chart/chart-types/scatter.md
+++ b/blazor/chart/chart-types/scatter.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.png)" %}
N> Refer to our [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to know how to plot data with two numeric parameters.
diff --git a/blazor/chart/chart-types/spline-area.md b/blazor/chart/chart-types/spline-area.md
index 50f365725b..3c019ca80d 100644
--- a/blazor/chart/chart-types/spline-area.md
+++ b/blazor/chart/chart-types/spline-area.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.png)" %}
N> Refer to our [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap5) to know how to connect the data points with smooth curves.
diff --git a/blazor/chart/chart-types/spline-range-area.md b/blazor/chart/chart-types/spline-range-area.md
index 296df614eb..43908aa21f 100644
--- a/blazor/chart/chart-types/spline-range-area.md
+++ b/blazor/chart/chart-types/spline-range-area.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.png)" %}
> Refer to our [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time.
diff --git a/blazor/chart/chart-types/spline.md b/blazor/chart/chart-types/spline.md
index 28ce66ff57..2f459cb0a9 100644
--- a/blazor/chart/chart-types/spline.md
+++ b/blazor/chart/chart-types/spline.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.png)" %}
N> Refer to our [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap5) to know how to connect the data points with smooth curves.
diff --git a/blazor/chart/chart-types/stack-area.md b/blazor/chart/chart-types/stack-area.md
index 11a0d84274..2656296d0d 100644
--- a/blazor/chart/chart-types/stack-area.md
+++ b/blazor/chart/chart-types/stack-area.md
@@ -52,9 +52,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png)" %}
N> Refer to our [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to know how to render and configure the 100% Stacked Area type chart.
diff --git a/blazor/chart/chart-types/stack-bar.md b/blazor/chart/chart-types/stack-bar.md
index 5a55359407..38679d2165 100644
--- a/blazor/chart/chart-types/stack-bar.md
+++ b/blazor/chart/chart-types/stack-bar.md
@@ -56,9 +56,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %}
N> Refer to our [Blazor 100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. You can also explore our [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap5) to know how to render and configure the 100% Stacked Bar type chart.
@@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -511,8 +508,7 @@ We can also customize the corner radius for individual points in the chart serie
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.png)" %}
## Empty points
diff --git a/blazor/chart/chart-types/stack-column.md b/blazor/chart/chart-types/stack-column.md
index 885f178462..7a3a2fd9c9 100644
--- a/blazor/chart/chart-types/stack-column.md
+++ b/blazor/chart/chart-types/stack-column.md
@@ -56,9 +56,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %}
N> Refer to our [Blazor 100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=bootstrap5) to know how to render and configure the 100% Stacked Column type chart.
@@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -511,8 +508,7 @@ We can also customize the corner radius for individual points in the chart serie
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png)" %}
## Empty points
diff --git a/blazor/chart/chart-types/stack-line.md b/blazor/chart/chart-types/stack-line.md
index 67ae970f7e..f5ab65fa10 100644
--- a/blazor/chart/chart-types/stack-line.md
+++ b/blazor/chart/chart-types/stack-line.md
@@ -73,9 +73,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.png)" %}
N> Refer to our [Blazor 100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=bootstrap5) to know how to render and configure the 100% Stacked Line type chart.
diff --git a/blazor/chart/chart-types/stacked-area.md b/blazor/chart/chart-types/stacked-area.md
index 5345b6d270..cfe603c1da 100644
--- a/blazor/chart/chart-types/stacked-area.md
+++ b/blazor/chart/chart-types/stacked-area.md
@@ -52,9 +52,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.png)" %}
N> Refer to our [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) to know how to render and configure the Stacked Area type chart.
diff --git a/blazor/chart/chart-types/stacked-bar.md b/blazor/chart/chart-types/stacked-bar.md
index 3a025f806b..ff14981b24 100644
--- a/blazor/chart/chart-types/stacked-bar.md
+++ b/blazor/chart/chart-types/stacked-bar.md
@@ -56,9 +56,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.png)" %}
N> Refer to our [Blazor Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap5) to know how to to render and configure the Stacked Bar type chart.
@@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -510,8 +507,7 @@ We can also customize the corner radius for individual points in the chart serie
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png)" %}
## Stacking group
diff --git a/blazor/chart/chart-types/stacked-column.md b/blazor/chart/chart-types/stacked-column.md
index 565a62b9dd..952674feeb 100644
--- a/blazor/chart/chart-types/stacked-column.md
+++ b/blazor/chart/chart-types/stacked-column.md
@@ -62,9 +62,7 @@ To render a [stacked column](https://www.syncfusion.com/blazor-components/blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %}
N> Refer to our [Blazor Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=bootstrap5) to know how to render and configure the Stacked Column type chart.
@@ -458,8 +456,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -516,8 +513,7 @@ We can also customize the corner radius for individual points in the chart serie
}
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png)" %}
## Stacking group
diff --git a/blazor/chart/chart-types/stacked-line.md b/blazor/chart/chart-types/stacked-line.md
index 032a8a9bfd..c0d3825391 100644
--- a/blazor/chart/chart-types/stacked-line.md
+++ b/blazor/chart/chart-types/stacked-line.md
@@ -80,9 +80,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.png)" %}
N> Refer to our [Blazor Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=bootstrap5) to know how to render and configure the Stacked Line type chart.
diff --git a/blazor/chart/chart-types/step-area.md b/blazor/chart/chart-types/step-area.md
index a1c787d95f..a9c4410460 100644
--- a/blazor/chart/chart-types/step-area.md
+++ b/blazor/chart/chart-types/step-area.md
@@ -47,9 +47,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.png)" %}
N> Refer to our [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to know how to render and configure the Step Area type chart.
diff --git a/blazor/chart/chart-types/step-line.md b/blazor/chart/chart-types/step-line.md
index 352c4cf6a7..d165db5be9 100644
--- a/blazor/chart/chart-types/step-line.md
+++ b/blazor/chart/chart-types/step-line.md
@@ -50,9 +50,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/vertical-chart.md b/blazor/chart/chart-types/vertical-chart.md
index 89b7dc349c..fd9cf295ff 100644
--- a/blazor/chart/chart-types/vertical-chart.md
+++ b/blazor/chart/chart-types/vertical-chart.md
@@ -44,9 +44,7 @@ One can draw a vertical chart by changing the axis orientation, and all series t
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.png)" %}
## Binding data with series
diff --git a/blazor/chart/chart-types/waterfall.md b/blazor/chart/chart-types/waterfall.md
index d6d60c939f..31de9b5aeb 100644
--- a/blazor/chart/chart-types/waterfall.md
+++ b/blazor/chart/chart-types/waterfall.md
@@ -52,9 +52,7 @@ documentation: ug
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.png)" %}
N> Explore our [Blazor Waterfall Chart Example](https://blazor.syncfusion.com/demos/chart/waterfall?theme=bootstrap5) to know how to render and configure the Waterfall type chart.
@@ -191,8 +189,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.png)" %}
We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument.
@@ -245,8 +242,7 @@ We can also customize the corner radius for individual points in the chart serie
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png)" %}
## Empty points
diff --git a/blazor/chart/cross-hair-and-track-ball.md b/blazor/chart/cross-hair-and-track-ball.md
index 107027000b..ee11a31dc4 100644
--- a/blazor/chart/cross-hair-and-track-ball.md
+++ b/blazor/chart/cross-hair-and-track-ball.md
@@ -274,8 +274,7 @@ The [HighlightCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/date-time-axis.md b/blazor/chart/date-time-axis.md
index c305abec0b..8270132ed7 100644
--- a/blazor/chart/date-time-axis.md
+++ b/blazor/chart/date-time-axis.md
@@ -50,9 +50,7 @@ You can learn how to customize the DateTime axis by watching the video below.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.png)" %}
## DateTime category axis
@@ -89,9 +87,7 @@ The [DateTime Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.png)" %}
### Range
@@ -131,9 +127,7 @@ The axis range will be calculated automatically based on the provided data; howe
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.png)" %}
### Interval customization
@@ -182,9 +176,7 @@ The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.png)" %}
**Applying padding to the Range**
@@ -229,9 +221,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKsBVrpCdNHsgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKsBVrpCdNHsgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.png)" %}
**DateTime - Round**
@@ -340,9 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.png)" %}
The table below shows the results of applying various popular date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelFormat) property.
diff --git a/blazor/chart/how-to/lazy-loading.md b/blazor/chart/how-to/lazy-loading.md
index 5da6dad547..c54be85415 100644
--- a/blazor/chart/how-to/lazy-loading.md
+++ b/blazor/chart/how-to/lazy-loading.md
@@ -98,9 +98,7 @@ else
### Line
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[LazyLoad Column](../images/lazyload-column.png)" %}
### Column
diff --git a/blazor/chart/last-data-label.md b/blazor/chart/last-data-label.md
index 06bd611a35..2e9589ad01 100644
--- a/blazor/chart/last-data-label.md
+++ b/blazor/chart/last-data-label.md
@@ -54,8 +54,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.png)" %}
## Customization
@@ -122,8 +121,7 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.png)" %}
## See also
diff --git a/blazor/chart/logarithmic-axis.md b/blazor/chart/logarithmic-axis.md
index 5e015ef81e..259bae9eeb 100644
--- a/blazor/chart/logarithmic-axis.md
+++ b/blazor/chart/logarithmic-axis.md
@@ -51,9 +51,7 @@ You can learn how to customize the logarithmic axis by watching the video below.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %}
## Range
@@ -93,9 +91,7 @@ The axis range will be calculated automatically based on the provided data; howe
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %}
## Logarithmic base
@@ -135,9 +131,7 @@ Logarithmic base can be customized using the [LogBase](https://help.syncfusion.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png)" %}
## Logarithmic interval
@@ -177,9 +171,7 @@ The interval can be customized using the [Interval](https://help.syncfusion.com/
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %}
## Label format
@@ -220,9 +212,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
```
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)" %}
The table below shows the results of applying some commonly used label formats to logarithmic values.
@@ -321,9 +311,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/multiple-panes.md b/blazor/chart/multiple-panes.md
index 4b3175e879..75b44fc001 100644
--- a/blazor/chart/multiple-panes.md
+++ b/blazor/chart/multiple-panes.md
@@ -74,9 +74,7 @@ Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %}
The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the vertical axis across multiple rows.
@@ -134,9 +132,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %}
## Columns
@@ -200,9 +196,7 @@ Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %}
The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the horizontal axis across multiple column.
@@ -258,9 +252,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/numeric-axis.md b/blazor/chart/numeric-axis.md
index 4ace5dc667..e0320a73bb 100644
--- a/blazor/chart/numeric-axis.md
+++ b/blazor/chart/numeric-axis.md
@@ -48,9 +48,7 @@ You can learn how to customize the numeric axis by watching the video below.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.png)" %}
## Range and interval
@@ -88,9 +86,7 @@ The axis range will be calculated automatically based on the provided data; howe
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.png)" %}
## Range padding
@@ -138,9 +134,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.png)" %}
**Numeric - Round**
@@ -178,9 +172,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.png)" %}
**Numeric - Additional**
@@ -218,9 +210,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.png)" %}
**Numeric - Normal**
@@ -258,9 +248,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.png)" %}
**Numeric - Auto**
@@ -299,9 +287,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.png)" %}
## Label format
@@ -344,9 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.png)" %}
The table below shows the results of applying various commonly used label formats to numeric data.
@@ -456,8 +440,7 @@ To separate groups of thousands for numerical values, use the [UseGroupingSepara
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.png)" %}
## Custom label format
@@ -495,9 +478,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/selection.md b/blazor/chart/selection.md
index 7350145de9..cb1710a10b 100644
--- a/blazor/chart/selection.md
+++ b/blazor/chart/selection.md
@@ -372,8 +372,7 @@ A point or series can be selected programmatically on a chart using the [Selecte
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.png)" %}
## Legend Selection
diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md
index 3f722e1f70..0f7a4009d3 100644
--- a/blazor/chart/strip-line.md
+++ b/blazor/chart/strip-line.md
@@ -58,9 +58,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.png)" %}
## Vertical striplines
@@ -104,9 +102,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.png)" %}
## Striplines customization
@@ -150,9 +146,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.png)" %}
## Text customization
@@ -199,9 +193,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.png)" %}
## Segmented stripline
@@ -254,9 +246,7 @@ To create a stripline in a specific region with respect to a segment (segmented
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/tool-tip.md b/blazor/chart/tool-tip.md
index 56b6640383..deef4e13e8 100644
--- a/blazor/chart/tool-tip.md
+++ b/blazor/chart/tool-tip.md
@@ -335,8 +335,7 @@ By enabling the [EnableHighlight](https://help.syncfusion.com/cr/blazor/Syncfusi
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.png)" %}
## Displaying tooltip for nearest data point
@@ -391,8 +390,7 @@ N> By default, `ShowNearestTooltip` property in [ChartSeries](https://help.syncf
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.png)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/working-with-data.md b/blazor/chart/working-with-data.md
index 24679c21d0..9235fcfbff 100644
--- a/blazor/chart/working-with-data.md
+++ b/blazor/chart/working-with-data.md
@@ -54,9 +54,7 @@ An IEnumerable object can be assigned to the [DataSource](https://help.syncfusio
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %}
N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding.
@@ -174,9 +172,7 @@ Assign service data as an instance of [SfDataManager](https://help.syncfusion.co
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.png)" %}
### Binding with OData services
@@ -205,9 +201,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVKsrVVKFPmAhzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVKsrVVKFPmAhzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.png)" %}
### Sending additional parameters to the server
@@ -509,9 +503,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.png)" %}
## Empty points
@@ -610,9 +602,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartE
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %}
## Handling No Data
@@ -674,8 +664,7 @@ When no data is available to render in the chart, the [NoDataTemplate](https://h
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Chart](images/working-data/blazor-chart-no-data-template.gif)" %}
N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals.
diff --git a/blazor/chart/zooming.md b/blazor/chart/zooming.md
index c7057841cd..5879d580b8 100644
--- a/blazor/chart/zooming.md
+++ b/blazor/chart/zooming.md
@@ -242,8 +242,7 @@ The zoom toolbar in the chart can be repositioned using the [ChartZoomToolbarPos
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.png)" %}
## Enable pan
@@ -417,8 +416,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.png)" %}
### Customization
@@ -478,8 +476,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett
};
}
```
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.png)" %}
## Auto interval on zooming
diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md
index 7775545c38..c1f9e927f7 100644
--- a/blazor/chat-ui/getting-started-webapp.md
+++ b/blazor/chat-ui/getting-started-webapp.md
@@ -225,11 +225,9 @@ N> If the **Interactivity Location** is set to `Global`, the **Render Mode** is
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chat UI component will be rendered in your browser.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.png)" %}
## Configure Messages and User
@@ -257,6 +255,4 @@ Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inter
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt](./images/default-messages.png)" %}
diff --git a/blazor/chat-ui/getting-started.md b/blazor/chat-ui/getting-started.md
index 1d6c15198f..f361a2c326 100644
--- a/blazor/chat-ui/getting-started.md
+++ b/blazor/chat-ui/getting-started.md
@@ -151,11 +151,9 @@ Add the Syncfusion® Blazor Chat UI componen
* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component.](images/chat-ui-component.png)" %}
## Configure messages and user
@@ -183,7 +181,5 @@ You can use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt.](images/default-messages.png)" %}
diff --git a/blazor/check-box/how-to/checkbox-model-binding.md b/blazor/check-box/how-to/checkbox-model-binding.md
index a41ff4cf96..19abcdc75d 100644
--- a/blazor/check-box/how-to/checkbox-model-binding.md
+++ b/blazor/check-box/how-to/checkbox-model-binding.md
@@ -46,6 +46,4 @@ In this sample, first check the option and click the submit button to post the s
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.png)" %}
\ No newline at end of file
diff --git a/blazor/check-box/how-to/customized-checkbox.md b/blazor/check-box/how-to/customized-checkbox.md
index b9ed9de034..285a408dbb 100644
--- a/blazor/check-box/how-to/customized-checkbox.md
+++ b/blazor/check-box/how-to/customized-checkbox.md
@@ -76,9 +76,7 @@ The background and border color of the Checkbox is customized through the custom
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.png)" %}
## Customize width and height
@@ -119,9 +117,7 @@ The following section explains about how to customize the height and width of th
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.png)" %}
## Custom frame
@@ -178,9 +174,7 @@ In the following example, to-do list is displayed with round checkbox by changin
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.png)" %}
## Custom check icon
@@ -228,6 +222,4 @@ In the following example, the check icon can be customized by changing check ico
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/check-box/how-to/right-to-left.md b/blazor/check-box/how-to/right-to-left.md
index 3e1c4dab6c..537d16fddd 100644
--- a/blazor/check-box/how-to/right-to-left.md
+++ b/blazor/check-box/how-to/right-to-left.md
@@ -23,6 +23,4 @@ The following example illustrates how to enable right-to-left support in Checkbo
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.png)" %}
\ No newline at end of file
diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md
index 648fd6d416..0d8b3c7609 100644
--- a/blazor/check-box/label-and-size.md
+++ b/blazor/check-box/label-and-size.md
@@ -27,9 +27,7 @@ The [Blazor Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkb
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox with Label](./images/blazor-checkbox-label.png)" %}
## Size
@@ -53,9 +51,7 @@ The different Checkbox sizes available are default and small. To reduce the size
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor CheckBox Size](./images/blazor-checkbox-size.png)" %}
## See also
diff --git a/blazor/chip/customization.md b/blazor/chip/customization.md
index 0987e3277b..6943f20880 100644
--- a/blazor/chip/customization.md
+++ b/blazor/chip/customization.md
@@ -38,9 +38,7 @@ The Chip control has the following predefined styles that can be defined using t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Chip Styles](./images/blazor-chip-style.png)" %}
## Leading icon
@@ -77,9 +75,7 @@ You can add and customize the leading icon of chip using the [`LeadingIconCss`](
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing LeadingIcon of Blazor Chip](./images/blazor-chip-leading-icon.gif)" %}
## Avatar
@@ -136,10 +132,7 @@ You can add and customize the avatar content of chip using the [`LeadingText`](h
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Avatar Text of Blazor Chip](./images/blazor-chip-avatar-content.gif)" %}
## Trailing icon
@@ -158,10 +151,7 @@ You can add and customize the trailing icon of chip using the [`TrailingIconCss`
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Chip TrailingIcon](./images/blazor-chip-trailing-icon.png)" %}
## Outline chip
@@ -179,11 +169,7 @@ Outline chip has the border with the background transparent. It can be set using
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Outline Chip with Transparent Background](./images/blazor-outline-chip-transparent-background.gif)" %}
## Template
diff --git a/blazor/chip/types.md b/blazor/chip/types.md
index 2fd99e0c8d..fdabdab897 100644
--- a/blazor/chip/types.md
+++ b/blazor/chip/types.md
@@ -33,9 +33,7 @@ Input Chip holds information in compact form. It converts user input into chips.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhotaWuJwkKgwBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhotaWuJwkKgwBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip with Input Items](./images/blazor-chip-input-items.png)" %}
## Choice Chip
@@ -54,9 +52,7 @@ Choice Chip allows you to select a single chip from the set of Chip/ChipItems. I
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgihLQrIIaiZzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgihLQrIIaiZzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Single Selection in Blazor Chip](./images/blazor-chip-single-selection.gif)" %}
## Filter Chip
@@ -75,10 +71,7 @@ Filter Chip allows you to select a multiple chip from the set of Chip/ChipItems.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVUChLGrodMJCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVUChLGrodMJCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multiple Selection in Blazor Chip](./images/blazor-chip-multiple-selection.gif)" %}
## Action Chip
@@ -109,10 +102,7 @@ The Action Chip triggers the event like [`OnClick`](https://help.syncfusion.com/
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgCrLGBSnHjcxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgCrLGBSnHjcxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Action Chip](./images/blazor-action-chip.gif)" %}
### Deletable Chip
diff --git a/blazor/circular-gauge/annotations.md b/blazor/circular-gauge/annotations.md
index 5a7f523def..146cc27701 100644
--- a/blazor/circular-gauge/annotations.md
+++ b/blazor/circular-gauge/annotations.md
@@ -46,9 +46,7 @@ You can place any custom element on the axis area using [ContentTemplate](https:
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.png)" %}
## Positioning the annotation
@@ -89,9 +87,7 @@ The radius of an annotation takes values either in pixel or in percentage. By se
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.png)" %}
## Multiple annotations
@@ -146,9 +142,7 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.png)" %}
## See also
diff --git a/blazor/circular-gauge/appearance.md b/blazor/circular-gauge/appearance.md
index 0b2631c6ec..b973223a5c 100644
--- a/blazor/circular-gauge/appearance.md
+++ b/blazor/circular-gauge/appearance.md
@@ -27,9 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.png)" %}
## Circular gauge position
@@ -48,9 +46,7 @@ You can set the mid point of the Circular Gauge in pixel as shown below.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.png)" %}
### In percentage
@@ -65,9 +61,7 @@ By setting the value in percentage, Circular Gauge gets its mid point with respe
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.png)" %}
## Background customization
@@ -101,9 +95,7 @@ Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.png)" %}
## Radius calculation based on angles
@@ -121,6 +113,4 @@ You can render semi or quarter Circular Gauge by modifying the start and end ang
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.png)" %}
\ No newline at end of file
diff --git a/blazor/circular-gauge/axes.md b/blazor/circular-gauge/axes.md
index c05c55225d..2bae65d061 100644
--- a/blazor/circular-gauge/axes.md
+++ b/blazor/circular-gauge/axes.md
@@ -27,9 +27,7 @@ You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.B
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.png)" %}
## Minimum and maximum
@@ -45,9 +43,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGa
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.png)" %}
## Start and end angle
@@ -63,9 +59,7 @@ You can sweep the Circular Gauge axis from 0 to 360 degrees. By default, the sta
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.png)" %}
## Axis radius
@@ -85,9 +79,7 @@ You can set the radius of the Circular Gauge in pixel as shown below.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.png)" %}
### In percentage
@@ -102,9 +94,7 @@ By setting value in percentage, Circular Gauge gets its dimension with respect t
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.png)" %}
## Ticks
@@ -126,9 +116,7 @@ By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.png)" %}
### Tick position
@@ -158,9 +146,7 @@ The minor ticks and major ticks can be positioned using the [Offset](https://hel
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.png)" %}
## Labels
@@ -180,9 +166,7 @@ The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](h
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.png)" %}
### Label position
@@ -205,9 +189,7 @@ The labels can be moved using the [Offset](https://help.syncfusion.com/cr/blazor
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.png)" %}
### Auto angle
@@ -224,9 +206,7 @@ The labels can be swept along the axis angle by enabling the [AutoAngle](https:/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.png)" %}
### Smart labels
@@ -256,9 +236,7 @@ When an axis makes a complete circle, then the first and last labels of the axis
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.png)" %}
### Label format
@@ -275,9 +253,7 @@ The axis labels can be formatted using the [Format](https://help.syncfusion.com/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.png)" %}
The following table describes the result of applying some commonly used label formats on numeric values.
@@ -354,9 +330,7 @@ Axis labels support custom label format using placeholder like {value}°C, in
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.png)" %}
### Show last label
@@ -374,9 +348,7 @@ If the maximum value does not enter the interval of major ticks, the last label
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.png)" %}
### Hide intersecting axis labels
@@ -392,9 +364,7 @@ When the axis labels overlap with each other, you can hide the intersected label
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.PNG)" %}
## Axis direction
@@ -413,9 +383,7 @@ You can change the axis direction of the circular gauge using [Direction](https:
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.png)" %}
## Multiple axes
@@ -452,6 +420,4 @@ In addition to the default axis, you can add n number of axis to a gauge. Each a
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVgWhhcqiQyCvQy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVgWhhcqiQyCvQy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Axes](./images/blazor-circulargauge-multiple-axes.png)" %}
\ No newline at end of file
diff --git a/blazor/circular-gauge/dimensions.md b/blazor/circular-gauge/dimensions.md
index 070f8345c4..03fda20790 100644
--- a/blazor/circular-gauge/dimensions.md
+++ b/blazor/circular-gauge/dimensions.md
@@ -30,9 +30,7 @@ You can set the size of the Circular Gauge in pixel as demonstrated below.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.png)" %}
### In percentage
@@ -54,8 +52,6 @@ By setting value in percentage, gauge gets its dimension with respect to its con
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.png)" %}
N> When you do not specify the size, it takes `450` pixels as the height and window size as its width.
\ No newline at end of file
diff --git a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md
index 7d558c018c..c3f3358cc0 100644
--- a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md
+++ b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md
@@ -403,9 +403,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.png)" %}
## Circular Gauge component inside Accordion
diff --git a/blazor/circular-gauge/legend.md b/blazor/circular-gauge/legend.md
index 94a2608b57..97dbedb970 100644
--- a/blazor/circular-gauge/legend.md
+++ b/blazor/circular-gauge/legend.md
@@ -112,9 +112,7 @@ The following code example shows how to add legend in the gauge.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.PNG)" %}
@@ -151,9 +149,7 @@ The toggle option has been provided for legend. So, if you toggle the legend, th
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.gif)" %}
## Paging support in legend
@@ -188,9 +184,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.gif)" %}
## Legend text customization
@@ -225,6 +219,4 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.PNG)" %}
\ No newline at end of file
diff --git a/blazor/circular-gauge/methods.md b/blazor/circular-gauge/methods.md
index 89bfd22f89..b3eac4548e 100644
--- a/blazor/circular-gauge/methods.md
+++ b/blazor/circular-gauge/methods.md
@@ -81,9 +81,7 @@ To change the pointer value dynamically, use the [SetPointerValueAsync](https://
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqsVBwKfbNwfqv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqsVBwKfbNwfqv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge](./images/blazor-circulargauge.png)" %}
## SetRangeValue
diff --git a/blazor/circular-gauge/pointers.md b/blazor/circular-gauge/pointers.md
index 5beb1d75f5..f4d1590a9c 100644
--- a/blazor/circular-gauge/pointers.md
+++ b/blazor/circular-gauge/pointers.md
@@ -25,9 +25,7 @@ Pointers are used to indicate values on an axis. The value of a pointer can be m
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrqshBwUVzsUfys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrqshBwUVzsUfys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer](./images/blazor-circulargauge-with-pointer.png)" %}
The Circular Gauge supports three types of pointers such as [Needle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Needle), [RangeBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_RangeBar), and [Marker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Marker). You can choose any pointer using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Type) property.
@@ -49,9 +47,7 @@ The circular gauge's default pointer type will be needle. A needle point contain
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLgCVhcghfqMkfw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLgCVhcghfqMkfw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Needle Pointer](./images/blazor-circulargauge-needle-pointer.png)" %}
### Customization
@@ -98,9 +94,7 @@ The needle, tail and cap of the pointer can be customized with the following pro
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBAMVBcgVpSKNFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBAMVBcgVpSKNFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Pointer](./images/blazor-circulargauge-pointer-customization.png)" %}
@@ -173,9 +167,7 @@ The range bar pointer is like a range in an axis that can be placed on gauge to
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVgWLLQqLfubBRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVgWLLQqLfubBRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Range Bar Pointer](./images/blazor-circulargauge-range-bar-pointer.png)" %}
### Customization
@@ -208,9 +200,7 @@ You can customize the range bar using the following properties.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUMhrwKBosYIXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUMhrwKBosYIXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Range Bar](./images/blazor-circulargauge-range-customization.png)" %}
### Rounded corners
@@ -232,9 +222,7 @@ The start and end pointers of a range bar in the Circular Gauge are rounded to f
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgsrVGUhIpRJzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgsrVGUhIpRJzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range Bar with Rounded Corner](./images/blazor-circulargauge-range-with-round-corner.png)" %}
## Marker pointer
@@ -264,9 +252,7 @@ The different types of marker shapes can be used to mark the pointer value in an
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBAshVGghyGCzzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBAshVGghyGCzzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Marker Pointer](./images/blazor-circulargauge-marker-pointer.png)" %}
### Customization
@@ -299,9 +285,7 @@ You can customize the marker pointer using the following properties.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgCVhQUhRjXeXh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgCVhQUhRjXeXh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Marker Pointer](./images/blazor-circulargauge-custom-marker-pointer.png)" %}
### Image marker pointer
@@ -350,9 +334,7 @@ The pointers can be dragged over the axis values by clicking and dragging the sa
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthgCLBcqhdAvjZX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthgCLBcqhdAvjZX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif)" %}
## Multiple pointers
@@ -392,9 +374,7 @@ In addition to the default pointer, you can add n number of pointers to an axis
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgMBrGKBnvQyWB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgMBrGKBnvQyWB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Pointers](./images/blazor-circulargauge-multiple-pointers.png)" %}
## Pointer animation
@@ -416,9 +396,7 @@ The pointers are animated on loading the gauge using the [CircularGaugePointerAn
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.gif)" %}
## Gradient color
diff --git a/blazor/circular-gauge/ranges.md b/blazor/circular-gauge/ranges.md
index 142f34187a..fe0283ffd4 100644
--- a/blazor/circular-gauge/ranges.md
+++ b/blazor/circular-gauge/ranges.md
@@ -29,9 +29,7 @@ The start and end values of a range in an axis can be customized using the [Star
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.png)" %}
## Start width and end width
@@ -54,9 +52,7 @@ Using [StartWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Circu
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.png)" %}
## Changing color
@@ -81,9 +77,7 @@ The color of a range can be customized using the [Color](https://help.syncfusion
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.png)" %}
## Range position
@@ -103,9 +97,7 @@ The ranges can be placed either inside, outside or center of the axis using the
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.png)" %}
## Rounded corners
@@ -125,9 +117,7 @@ You can customize the corner radius using the [RoundedCornerRadius](https://help
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.png)" %}
## Radius
@@ -151,9 +141,7 @@ You can set a radius of the range in pixel as demonstrated below.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.png)" %}
### In percentage
@@ -173,9 +161,7 @@ By setting value in percentage, a range gets its dimension with respect to its a
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.png)" %}
@@ -232,9 +218,7 @@ You can set the range color to ticks and labels of an axis by enabling the [UseR
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.png)" %}
## Gradient color
diff --git a/blazor/circular-gauge/user-interaction.md b/blazor/circular-gauge/user-interaction.md
index d8a0a8cee4..d68dfcabaa 100644
--- a/blazor/circular-gauge/user-interaction.md
+++ b/blazor/circular-gauge/user-interaction.md
@@ -59,9 +59,7 @@ By default, the tooltip is not visible. You can enable the tooltip by setting th
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqsLVwAKXazbSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqsLVwAKXazbSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip](./images/blazor-circulargauge-tooltip.png)" %}
### Showing tooltip at mouse position
@@ -83,9 +81,7 @@ By default tooltip will be shown on the axis, you can show the tooltip at the cu
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqMhVcKqCWBJms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqMhVcKqCWBJms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Circular Gauge ToolTip at Cursor Position](./images/blazor-circulargauge-tooltip-at-cursor-position.png)" %}
## Tooltip for ranges
@@ -171,9 +167,7 @@ The following code example shows the tooltip for the pointers, ranges, and annot
public string[] TooltipType = new string[] { "Range", "Annotation", "Pointer"};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAiBrwUAiKegWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAiBrwUAiKegWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip for Annotation](./images/blazor-circulargauge-tooltip-annotation.gif)" %}
## Dragging pointer
@@ -193,9 +187,7 @@ The pointers can be dragged over the axis values by clicking and dragging the po
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBAirVGgqWoeGGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBAirVGgqWoeGGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif)" %}
## Dragging range
@@ -219,6 +211,4 @@ The ranges can be dragged over the axis values by clicking and dragging the rang
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUihrmgKWmfaRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUihrmgKWmfaRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Range](./images/blazor-circulargauge-dragging-range.gif)" %}
\ No newline at end of file
diff --git a/blazor/common/deployment/deployment-linux-nginx.md b/blazor/common/deployment/deployment-linux-nginx.md
new file mode 100644
index 0000000000..f17bdf89e3
--- /dev/null
+++ b/blazor/common/deployment/deployment-linux-nginx.md
@@ -0,0 +1,110 @@
+---
+layout: post
+title: Deploy a Blazor Web App to Linux with NGINX | Syncfusion
+description: Learn here all about deploying the Blazor Web App with Syncfusion Blazor Components to Linux server using NGINX.
+platform: Blazor
+component: Common
+documentation: ug
+---
+
+# Deploy Blazor Web App to Linux with NGINX
+
+This section provides information about deploying a Blazor Web applications with the Syncfusion Blazor components to Linux server using NGINX as a reverse proxy.
+
+Refer to [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0&tabs=linux-ubuntu) topic for more information.
+
+## Prerequisites
+
+* Linux Server – Ubuntu 20.04, Red Hat Enterprise (RHEL) 8.0 and SUSE Linux Enterprise Server 12.
+* [.NET runtime](https://blazor.syncfusion.com/documentation/system-requirements#net-sdk) installed on the server.
+* An existing Blazor Web App with Syncfusion components or create a new one.
+
+## Install and Start NGINX
+
+Install NGINX on your Linux system and enable it to start automatically:
+
+```bash
+sudo dnf install nginx
+sudo systemctl start nginx
+sudo systemctl enable nginx
+sudo systemctl status nginx
+```
+
+**Verification**: Open `http://your-server-ip` in a browser — you should see the NGINX welcome page.
+
+## Create and publish Your Blazor Web App with Syncfusion Components
+
+* You can create a Blazor Web App using the .NET CLI commands with Syncfusion components by referring [here](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli).
+
+* Publish your Blazor Web application in Release configuration using the following command and run it:
+
+```bash
+dotnet publish -c Release -o publish
+cd publish
+dotnet SfBlazorApp.dll --urls "http://0.0.0.0:5000"
+```
+
+
+
+## Configure NGINX to Proxy Requests
+
+Create a new NGINX configuration file for your Blazor application:
+
+```bash
+sudo nano /etc/nginx/conf.d/blazorapp.conf
+```
+
+Add the following configuration to enable NGINX to act as a reverse proxy:
+
+```nginx
+server {
+ listen 80;
+ server_name _;
+ location / {
+ proxy_pass http://localhost:5000;
+ proxy_http_version 1.1;
+ proxy_set_header Host $host;
+ proxy_set_header X-Real-IP $remote_addr;
+ proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+ proxy_set_header X-Forwarded-Proto $scheme;
+ proxy_set_header Upgrade $http_upgrade;
+ proxy_set_header Connection "upgrade";
+ }
+}
+```
+
+Save and exit the file (Ctrl+O, Enter, then Ctrl+X).
+
+## Validate and Restart NGINX
+
+Test the NGINX configuration and restart the service:
+
+```bash
+sudo nginx -t
+sudo systemctl restart nginx
+```
+
+## Configure SELinux (For Red Hat-based Systems)
+
+On Red Hat-based systems, SELinux may block NGINX from accessing your Blazor app. Allow NGINX to connect to network services:
+
+```bash
+sudo setsebool -P httpd_can_network_connect 1
+```
+
+## Access the Application
+
+From your Windows machine or any other device, open a browser and navigate to:
+
+```
+http:///
+```
+
+You should now see your Blazor Web app running successfully with Syncfusion components!
+
+
+
+## See also
+
+* [Host ASP.NET Core on Linux with NGINX](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0)
+* [Configure NGINX for ASP.NET Core](https://learn.microsoft.com/en-us/aspnet/core/host-and-deploy/linux-nginx?view=aspnetcore-9.0#configure-nginx)
diff --git a/blazor/common/images/output-linux.png b/blazor/common/images/output-linux.png
new file mode 100644
index 0000000000..4064e734d1
Binary files /dev/null and b/blazor/common/images/output-linux.png differ
diff --git a/blazor/common/images/publish-blazor-app.jpg b/blazor/common/images/publish-blazor-app.jpg
new file mode 100644
index 0000000000..9c3ee9997a
Binary files /dev/null and b/blazor/common/images/publish-blazor-app.jpg differ
diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md
index 0691049aa7..0cadf2f9d6 100644
--- a/blazor/datagrid/clipboard.md
+++ b/blazor/datagrid/clipboard.md
@@ -1,31 +1,30 @@
---
layout: post
title: Clipboard in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Clipboard in the Syncfusion Blazor DataGrid component and much more.
+description: Learn how to copy, paste, and autofill data in the Syncfusion Blazor DataGrid using keyboard shortcuts, buttons, and batch editing.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Clipboard in Blazor DataGrid
+# Clipboard in Syncfusion Blazor DataGrid
-The clipboard feature in the Syncfusion® Blazor DataGrid provides an easy way to copy selected rows or cells data into the clipboard. You can use keyboard shortcuts to perform the copy operation. The following list of keyboard shortcuts is supported in the Grid to copy selected rows or cells data into clipboard.
+The **clipboard** feature in the Syncfusion® Blazor DataGrid allows copying selected rows or cells using keyboard shortcuts or programmatic methods. This helps transfer data to external applications such as spreadsheets or text editors.
+To use keyboard shortcuts, selection must be enabled and the grid must be focused.
-Interaction keys |Description
------|-----
-Ctrl + C |Copy selected rows or cells data into clipboard.
-Ctrl + Shift + H |Copy selected rows or cells data with header into clipboard.
+| Windows | Mac | Actions |
+|---------|-----|---------|
+| Ctrl + C | Command + C | Copy selected rows or cells to the clipboard |
+| Ctrl + Shift + H | Command + Shift + H | Copy selected rows or cells with headers to the clipboard |
-By using these keyboard shortcuts, you can quickly copy data from the Grid to the clipboard, making it easy to paste the data into other applications or documents.
-
-To enable the clipboard feature, you can use the Grid with your data source and selection property.
+To enable clipboard functionality, configure the DataGrid with the required [GridSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html). If the selection mode is **Row**, entire rows are copied. If it is **Cell**, only the highlighted cells are copied.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -36,7 +35,7 @@ To enable the clipboard feature, you can use the Grid with your data source and
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -48,40 +47,40 @@ To enable the clipboard feature, you can use the Grid with your data source and
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ internal OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -93,14 +92,16 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNVlTrSTfkKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLosNWcpKkBYKnF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## Copy to clipboard using external buttons
-## Copy to clipboard by external buttons
+Clipboard actions can be triggered using external buttons when using UI controls is preferred over shortcut keys.
-Copying data to the clipboard by using external buttons in the Syncfusion® Blazor DataGrid allows you to programmatically trigger the copy operation, making it more friendly, especially for those who may not be familiar with keyboard shortcuts or manual copying.
+The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method programmatically copies selected rows or cells:
-To copy selected rows or cells data into the clipboard with the help of external buttons, you can utilize the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method available in the Grid. This is demonstrated in the following example,
+- Pass **true** to include column headers in the copied content.
+- Pass **false** or omit the parameter to copy without headers.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -123,19 +124,19 @@ To copy selected rows or cells data into the clipboard with the help of external
@code {
private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public async Task Copy()
+ private async Task Copy()
{
await Grid.CopyAsync();
}
- public async Task CopyHeader()
+ private async Task CopyHeader()
{
await Grid.CopyAsync(true);
}
@@ -145,40 +146,40 @@ To copy selected rows or cells data into the clipboard with the help of external
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ internal OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -190,32 +191,27 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSDfMKeTVVoBtf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSsjCcfTtZWPnL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## AutoFill
-The AutoFill feature in the Syncfusion® Blazor DataGrid allows you to copy the data of selected cells and paste it into other cells by simply dragging the autofill icon of the selected cells to the desired cells. This feature provides a convenient way to quickly populate data in a grid.
-
-**how to use the autofill feature**
+The AutoFill feature in the Syncfusion® Blazor DataGrid allows quick data entry by copying values from selected cells and filling them into adjacent cells using a drag handle.
-1. Select the cells from which you want to copy data.
+**Steps to use AutoFill feature**
-2. Hover over the bottom-right corner of the selection to reveal the autofill icon.
+1. Select the desired cells to copy.
+2. Hover over the bottom-right corner of the selection to display the autofill handle.
+3. Drag the handle to the target cells.
+4. Release the mouse to populate the target cells with the copied data.
-3. Click and hold the autofill icon, then drag it to the target cells where you want to paste the copied data.
-
-4. Release the mouse to complete the autofill action, and the data from the source cells will be copied and pasted into the target cells.
-
-This feature is enabled by defining [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property as **true**.
-
-The following example demonstrates how to enable the autofill feature in the Grid.
+To enable AutoFill, set the [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) property to **true** and use [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing) to allow copying values across multiple cells.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -227,7 +223,7 @@ The following example demonstrates how to enable the autofill feature in the Gri
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -239,40 +235,40 @@ The following example demonstrates how to enable the autofill feature in the Gri
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -284,46 +280,39 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLojTCUezbECphd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-> * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, then the autofill icon will be displayed on cell selection to copy cells.
-> * It requires the selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to be **Box** and also [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) to be **Batch**.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIsNicJTjOUEma?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+> * When [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, the autofill handle appears on cell selection.
+> * AutoFill requires selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) set to **Cell**, [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) set to **Box**, and [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) set to `Batch`.
### Limitations
-* AutoFill does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using autofill to avoid unexpected results.
-
-* The AutoFill feature does not support generating non-linear series or sequential data automatically. Cannot create complex series or patterns by simply dragging cells with non-sequential data. The autofill feature is designed for copying and pasting data from a selected range of cells.
-
-* The AutoFill feature does not support virtual scrolling or column virtualization in the Grid.
-
-* The Auto Fill feature can only be applied to the viewport cell when enabling the features of infinite scrolling in the Grid.
+- **Data Type Conversion**: AutoFill does not convert string values to numeric or date types. Copying strings into numeric cells results in **NaN**, and copying strings into date cells results in an **empty cell**.
+- **Value Copying**: AutoFill copies values directly from the source range without generating non-linear or sequential series.
+- **Virtualization**: AutoFill is not supported with virtual scrolling or column virtualization.
+- **Infinite Scrolling**: With infinite scrolling, AutoFill applies only to cells within the current viewport.
## Paste
-The Syncfusion® Blazor DataGrid provides a paste feature that allows you to copy the content of a cell or a group of cells and paste it into another set of cells. This feature allows you to quickly copy and paste content within the grid, making it convenient for data entry and manipulation.
-
-Follow the steps below to use the Paste feature in the grid:
+The Paste feature in the Syncfusion® Blazor DataGrid allows copying content from selected cells and pasting it into another range using Ctrl + C and Ctrl + V.
-1. Select the cells from which you want to copy the content.
+**To paste data within the grid:**
-2. Press the Ctrl + C shortcut key to copy the selected cells' content to the clipboard.
-
-3. Select the target cells where you want to paste the copied content.
-
-4. Press the Ctrl + V shortcut key to paste the copied content into the target cells.
+1. Select the cells to copy.
+2. Press Ctrl + C to copy the content.
+3. Select the target cells.
+4. Press Ctrl + V to paste the copied content.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
@@ -331,7 +320,7 @@ Follow the steps below to use the Paste feature in the grid:
@code {
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -343,40 +332,40 @@ Follow the steps below to use the Paste feature in the grid:
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new List();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -388,11 +377,10 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyNzsUeyrJRGbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBoWNsGJziFNQMu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> To perform paste functionality, it requires the selection **mode** to be **Cell**, **cellSelectionMode** to be **Box** and also Batch Editing should be enabled.
+> To paste content, set selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to **Cell**, set [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to **Box**, and enable [Batch editing](https://blazor.syncfusion.com/documentation/datagrid/batch-editing).
### Limitations
-* The Paste feature does not automatically convert string values to number or date types. If the selected cells contain string data and are dragged to number-type cells, the target cells will display **NaN**. Similarly, when dragging string-type cells to date-type cells, the target cells will display as an **empty cell**. It is important to ensure data types are compatible before using AutoFill to avoid unexpected results.
\ No newline at end of file
+- **Data Type Conversion**: Pasting does not convert string values to numeric or date types. Pasting strings into numeric cells results in **NaN**, and pasting strings into date cells results in an **empty cell**. Ensure that the pasted values are compatible with the target column's data type.
\ No newline at end of file
diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md
index 3f5adcc36a..7ff8c0d564 100644
--- a/blazor/datagrid/context-menu.md
+++ b/blazor/datagrid/context-menu.md
@@ -7,18 +7,20 @@ control: DataGrid
documentation: ug
---
-# Context menu in Syncfusion® Blazor DataGrid
+# Context menu in Syncfusion Blazor DataGrid
-The Syncfusion® Blazor DataGrid comes equipped with a context menu feature, which is triggered when a user right-clicks anywhere within the Grid. This feature serves to enrich the user experience by offering immediate access to a variety of supplementary actions and operations that can be executed on the data displayed in the Grid.
+The Syncfusion® Blazor DataGrid supports a context menu that appears when right-clicking anywhere within the grid. This menu provides quick access to actions related to the grid’s data and layout, enhancing interactivity and usability.
-To activate the context menu within the Grid, you have an option to configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. You can set this property to either include the default context menu items or define your own custom context menu items, tailoring the menu options to suit your specific needs. This customization allows you to enhance the Grid's functionality by providing context-sensitive actions for interacting with your data.
-
-The context menu is triggered when you right-click on different areas of the Grid, including:
- * Header: When you right-click on the Grid's header section.
- * Content: When you right-click on the Grid's main content area.
- * Pager: When you right-click on the pager section.
+To enable the context menu, configure the Grid's [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property. Use default items for built-in menu options or add custom items for tailored functionality. This feature improves interactivity by offering context-sensitive actions.
-The default context menu items in the header area of the Grid are as follows:
+The context menu appears when right-clicking in these Grid areas:
+* **Header:** Displays column-specific actions.
+* **Content:** Shows row-related options.
+* **Pager:** Offers navigation controls.
+
+The default context menu items include:
+
+**Header**
| Items | Description |
| ---------------- | ------------------------------------------------------------ |
@@ -29,7 +31,7 @@ The default context menu items in the header area of the Grid are as follows:
| `SortAscending` | Sort the current column in ascending order. |
| `SortDescending` | Sort the current column in descending order. |
-The default context menu items in the content area of the Grid are as follows:
+**Content**
| Items | Description |
| ------------- | ------------------------------------------------------------------- |
@@ -42,7 +44,7 @@ The default context menu items in the content area of the Grid are as follows:
| `ExcelExport` | Export the Grid data as an Excel document. |
| `CsvExport` | Export the Grid data as a CSV document. |
-The default context menu items in the pager area of the Grid are as follows:
+**Pager**
| Items | Description |
| ----------- | ------------------------------------------ |
@@ -51,7 +53,6 @@ The default context menu items in the pager area of the Grid are as follows:
| `LastPage` | Navigate to the last page of the Grid. |
| `NextPage` | Navigate to the next page of the Grid. |
-The following example demonstrates how to enable context menu feature in the Grid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -69,36 +70,19 @@ The following example demonstrates how to enable context menu feature in the Gri
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
- public List
@code {
- private SfGrid Grid;
- public List Employees { get; set; }
+ private SfGrid? Grid;
+ private List? Employees { get; set; }
protected override void OnInitialized()
{
Employees = EmployeeData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await this.Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
-
}
{% endhighlight %}
@@ -203,15 +187,14 @@ The following example demonstrates how to add custom context menu items in the G
public class EmployeeData
{
-
- public static List Employees = new List();
+ private static readonly List Employees = new();
public EmployeeData(int employeeID, string firstName, string lastName, string city)
{
- this.EmployeeID = employeeID;
- this.FirstName = firstName;
- this.LastName = lastName;
- this.City = city;
+ EmployeeID = employeeID;
+ FirstName = firstName;
+ LastName = lastName;
+ City = city;
}
public static List GetAllRecords()
@@ -247,46 +230,50 @@ public class EmployeeData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyDfNYsPWaHXLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBoMjLaVOKOJFCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Built-in and Custom context menu items
-The Syncfusion® Blazor DataGrid provides the flexibility to use both built-in and custom context menu items simultaneously. This is useful when you want to extend the default functionalities (like copy, delete, or edit) with your own custom actions, such as Copy with headers, Export row, or other application-specific commands.
+The Syncfusion® Blazor DataGrid supports using both built-in and custom context menu items together. This is helpful when extending default actions such as **Copy**, **Delete**, or **Edit** with application-specific commands like **Copy with headers** or **Export row**.
+
+To configure **built-in** and **custom** context menu items:
-You can achieve this by defining a list containing both built-in menu item strings and custom context menu items using the [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property of the Grid. The actions for custom context menu items can be handled using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
+1. Define both built-in item strings and custom [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects in the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property.
+2. For custom items, specify properties such as **Text**, **Target**, and **Id**.
+3. Handle custom actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
-The following example demonstrates how to define both built-in and custom context menu items, and how to handle the custom item action in the `ContextMenuItemClicked` event. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method is used to copy the selected rows or cells data to the clipboard, including headers.
+The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method copies selected rows or cells, including headers, to the clipboard.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -297,14 +284,14 @@ The following example demonstrates how to define both built-in and custom contex
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -340,29 +327,26 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBSNftEhBsXumEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLSiXBaVEwxOsiX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Sub context menu items in DataGrid
-The Syncfusion® Blazor DataGrid supports hierarchical context menu structures, allowing you to define sub-context menu items that appear as child options under a parent item in the context menu. This feature is useful when organizing multiple related actions under a single top-level context menu item.
-
-To define sub-context menu items in the Blazor Grid, do follow the steps given below:
-
-1. Use the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property to define a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects.
-
-2. The sub context menu items can be added by defining the collection of `MenuItems` for `Items` Property in `ContextMenuItemModel`.
+The Syncfusion® Blazor DataGrid supports hierarchical context menus, allowing sub-items to be grouped under a parent menu item. This structure helps organize related actions and improves interface usability.
-3. Use the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event to handle actions for each menu item.
+To configure sub-context menu items:
+1. Define the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property with a list of [ContextMenuItemModel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) objects.
+2. Add sub-items by specifying the collection for the Items property in `ContextMenuItemModel`.
+3. Handle actions using the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event.
-The following example demonstrates how to create a sub context menu titled **Clipboard**, with sub-items **Copy** and **Copy With Header**. The corresponding actions are triggered when the `ContextMenuItemClicked` event is fired and [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) action is carried out with and without headers.
+This example creates a sub-context menu titled **Clipboard**, which includes the sub-items **Copy** and **Copy With Header**. When the `ContextMenuItemClicked` event is triggered, the [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method runs to copy data with or without headers.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -374,9 +358,9 @@ The following example demonstrates how to create a sub context menu titled **Cli
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
- public List ContextMenuItems = new()
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
+ private List ContextMenuItems = new()
{
new ContextMenuItemModel
{
@@ -396,15 +380,15 @@ The following example demonstrates how to create a sub context menu titled **Cli
Orders = OrderData.GetAllRecords();
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copy")
{
- await Grid.CopyAsync(false);
+ await Grid!.CopyAsync(false);
}
else if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -415,14 +399,14 @@ The following example demonstrates how to create a sub context menu titled **Cli
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -458,21 +442,23 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVyjfjkrhfaJLAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLIiNhEqQfJGczz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Disable the context menu for specific columns in DataGrid
-In certain scenarios, you may want to restrict the context menu from appearing on specific columns within the Syncfusion® Blazor DataGrid. This can be helpful to prevent actions like copying or editing on columns that contain sensitive or read-only data.
+The Syncfusion® Blazor DataGrid allows restricting the context menu for individual columns, which is useful when dealing with **sensitive** or **read-only** data.
-You can achieve this by using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to cancel it conditionally.
+This behavior is controlled using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu appears and provides access to column details. By checking the column's **Field** property, the context menu can be conditionally disabled.
-To prevent the context menu from opening on a specific column:
+To disable the context menu for a specific column:
-1. Handle the `ContextMenuOpen` event of the Grid and use the `Column.Field` property within the event handler to identify the target column.
+1. Handle the [ContextMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ContextMenuOpen) event of the Grid.
+2. Use the **args.Column.Field** property to identify the target column.
+3. Set **args.Cancel = true** to prevent the context menu from opening for that column.
-2. Set `Args.Cancel` as **true** to prevent the menu from opening on that column.
-
-The following example demonstrates how to prevent the context menu from opening when right-clicking on the **Freight** column. The [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event is used to handle actions triggered by context menu item clicks. The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method will be executed for all columns except **Freight** column, where the context menu is disabled.
+In this example:
+- The context menu is disabled for the **Freight** column.
+- The [CopyAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_CopyAsync_System_Nullable_System_Boolean__) method executes for all other columns when the **Copy with headers** option is selected.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -491,28 +477,27 @@ The following example demonstrates how to prevent the context menu from opening
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
+ public void OnContextMenuOpen(ContextMenuOpenEventArgs args)
{
- if (Args.Column.Field == "Freight")
+ if (args.Column.Field == "Freight")
{
- Args.Cancel = true; // To prevent the context menu from opening.
+ args.Cancel = true;
}
}
- public async Task OnContextMenuClick(ContextMenuClickEventArgs args)
+ private async Task OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "copywithheader")
{
- await Grid.CopyAsync(true);
+ await Grid!.CopyAsync(true);
}
}
}
@@ -521,17 +506,16 @@ The following example demonstrates how to prevent the context menu from opening
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -567,28 +551,26 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeNTjaVhQWEiHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBSCNrOqOXtBomQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Enable or disable context menu items
-The Syncfusion® Blazor DataGrid allows you to dynamically enable or disable specific context menu items using [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is particularly useful in scenarios where certain actions, such as **Edit** or **Delete**, should be restricted based on the column, the data in the row, or other custom logic.
+The Syncfusion® Blazor DataGrid allows dynamic control over the availability of context menu items using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Disabled) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
-To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened, allowing you to enable or disable the desired menu items dynamically.
+To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows enabling or disabling menu items dynamically based on conditions.
-To enable or disable context menu items dynamically, follow the steps below:
+1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid.
+2. Use the **args.ContextMenu.Items** collection to access the menu items.
+3. Set the **Disabled** property of the required item(s) to **true** or **false** based on the defined logic.
-1. Handle the `ContextMenuOpen` event of the DataGrid and use the `Args.ContextMenuObj.Items` collection within the handler to access the context menu items.
-
-2. Set the `Disabled` property of the desired item(s) to `true` or `false` based on your logic.
-
-The following example demonstrates how to dynamically enable or disable **Copy** context menu items in the Grid using the `ContextMenuOpen` event. The **Copy** item is disabled for the **ShipCity** column and enabled for other columns.
+The **Copy** menu item is disabled for the **ShipCity** column and remains enabled for all other columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
@@ -601,42 +583,39 @@ The following example demonstrates how to dynamically enable or disable **Copy**
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
- {
- if (Args.Column.Field == "ShipCity") // You can check condition based on your requirement.
- {
- Args.ContextMenu.Items[0].Disabled = true; // To disable edit context menu item.
- }
- else
+ private void OnContextMenuOpen(ContextMenuOpenEventArgs args)
+ {
+ foreach (var item in args.ContextMenu.Items)
{
- Args.ContextMenu.Items[0].Disabled = false; // To enable edit context menu item.
+ if (item.Text == "Copy" && args.Column.Field == nameof(OrderData.ShipCity))
+ {
+ item.Disabled = true;
+ }
}
}
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -672,21 +651,21 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryDfXEqqyMSDPD?appbar=false&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrIiiZySUQfOieR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Show or hide context menu
-The Syncfusion® Blazor DataGrid provides the flexibility to show or hide both default and custom context menu items. This feature allows you to customize the context menu items based on various conditions or individuals interactions.
-
-This can be achieved using the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. This event is triggered before the context menu is opened , allowing you to customize context menu items visibility dynamically.
+The Syncfusion® Blazor DataGrid allows dynamically showing or hiding specific context menu items using the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property. This feature is useful for conditionally restricting actions such as **Edit** or **Delete**, based on the column, row data, or custom logic.
-To control the visibility of context menu items, follow the steps below:
+To achieve this, handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event. The event is triggered before the context menu is displayed and allows dynamic modification of menu item visibility based on defined conditions.
-1. Handle the `ContextMenuOpen` event of the Grid and access the `Args.ContextMenu.Items` collection within the event handler to modify the visibility of specific menu items.
+To control the visibility of context menu items:
-2. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of `MenuItems` to **true** or **false**, based on your conditions
+1. Handle the [ContextMenuOpen](https://blazor.syncfusion.com/documentation/datagrid/events#contextmenuopen) event of the grid.
+2. Use the **args.ContextMenu.Items** collection to access the menu items.
+3. Set the [Hidden](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.MenuItem.html#Syncfusion_Blazor_Navigations_MenuItem_Hidden) property of the required item(s) to **true** or **false** based on the defined logic.
-The following example demonstrates how to dynamically show or hide **Edit** context menu items in the Grid using the `ContextMenuOpen` event. The **Edit** item is disabled for the **CustomerID** column and enabled for other columns.
+The **Edit** menu item is hidden for the **CustomerID** column and remains visible for all other columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -706,23 +685,21 @@ The following example demonstrates how to dynamically show or hide **Edit** cont
@code {
- public List Orders { get; set; }
-
+ private List Orders { get; set; } = new List();
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuOpen(ContextMenuOpenEventArgs Args)
+ private void OnContextMenuOpen(ContextMenuOpenEventArgs args)
{
- if (Args.Column.Field == "CustomerID")
- {
- Args.ContextMenu.Items[1].Hidden = true;
- }
- else
+ foreach (var item in args.ContextMenu.Items)
{
- Args.ContextMenu.Items[1].Hidden = false;
+ if (item.Text == "Edit Record" && args.Column.Field == nameof(OrderData.CustomerID))
+ {
+ item.Hidden = true;
+ }
}
}
}
@@ -731,17 +708,16 @@ The following example demonstrates how to dynamically show or hide **Edit** cont
{% highlight c# tabtitle="OrderData.cs" %}
-
public class OrderData
{
- public static List Orders = new List();
+ private static readonly List Orders = new();
public OrderData(int orderID, string customerID, double freight, string shipCity)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.ShipCity = shipCity;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipCity = shipCity;
}
public static List GetAllRecords()
@@ -777,38 +753,36 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBIMWXIIKutSiPz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
### Access specific row details on context menu click
-The Syncfusion® Blazor DataGrid allows you to interact with specific row data when a context menu item is clicked. This feature is useful when you want to perform actions like viewing, editing, or processing data from the selected row.
+The Syncfusion® Blazor DataGrid allows retrieving details of a specific row when a context menu item is clicked. This feature is useful for displaying or processing the selected row’s data.
-You can achieve this by handling the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. This event provides access to the clicked menu item and the associated row data, enabling you to fetch and display specific details dynamically.
+To achieve this, handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event. The event is triggered when a context menu item is clicked and provides access to the selected row details.
-Steps to access row data on context menu click:
+To access row data on context menu click:
1. Define a custom context menu item using the [ContextMenuItems](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuItemModel.html) property.
-2. Handle the `ContextMenuItemClicked` event to capture the selected row's data.
-3. Use the `RowInfo.RowData` property from the event arguments to access the full row details.
-
-The following example demonstrates how to fetch specific row details when a context menu item is clicked in the Grid using the `ContextMenuItemClicked` event. The fetch data item retrieves the row information and displays it below the Grid:
+2. Handle the [ContextMenuItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContextMenuClickEventArgs-1.html) event of the grid.
+3. Use the **args.RowInfo.RowData** property from the event arguments to access the full details of the selected row.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
-
+
@if (rowData != null)
{
@@ -821,24 +795,22 @@ The following example demonstrates how to fetch specific row details when a cont
}
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
- private OrderData rowData { get; set; }
+ private SfGrid? Grid;
+ private List Orders { get; set; } = new List();
+ private OrderData? rowData;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
- public void OnContextMenuClick(ContextMenuClickEventArgs args)
+ private void OnContextMenuClick(ContextMenuClickEventArgs args)
{
if (args.Item.Id == "fetch data")
{
rowData = args.RowInfo.RowData;
}
}
-
}
{% endhighlight %}
@@ -847,36 +819,40 @@ The following example demonstrates how to fetch specific row details when a cont
public class OrderData
{
- public static List order = new List();
- public OrderData(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ private static readonly List Orders = new();
+
+ public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerId;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
}
+
public static List GetAllRecords()
{
- if (order.Count == 0)
+ if (Orders.Count == 0)
{
- order.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- order.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- order.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- order.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- order.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- order.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- order.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- order.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- order.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora"));
- order.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
- order.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- order.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
- order.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- order.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
- order.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora"));
+ Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
+ Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return order;
+
+ return Orders;
}
+
public int OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
@@ -886,6 +862,6 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBSMXVazHjnCzPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a detailed overview of available capabilities. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
\ No newline at end of file
diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md
index ac90524b35..3cf87076cd 100644
--- a/blazor/datagrid/data-annotation.md
+++ b/blazor/datagrid/data-annotation.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data Annotation in Blazor DataGrid | Syncfusion
-description: Learn how to achieve data validation with data annotations in the Syncfusion Blazor DataGrid component.
+description: Learn how to use Data Annotations for validation and column metadata in Syncfusion Blazor DataGrid, including enum display and CRUD form validation.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,35 +9,71 @@ documentation: ug
# Data Annotation in Blazor DataGrid
-Data Annotations are used to define validation rules for model classes or properties, ensuring that data entered into an application conforms to the expected format and meets specific criteria. They also enable the display of appropriate error messages to end users.
+Data annotations define validation and display rules for model classes or properties in the Syncfusion® Blazor DataGrid. These attributes ensure that input values follow specific formats and constraints while providing clear error messages during editing operations.
-In the Syncfusion® Blazor DataGrid, Data Annotations are leveraged to automatically map these validation rules to the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) properties. This integration provides seamless data validation during editing operations within the Grid.
+When the DataGrid is bound to a model, data annotations automatically map to corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) settings. This enables built-in validation and metadata display during CRUD operations.
-To enable Data Annotations for validation in a Grid, you need to refer the **System.ComponentModel.DataAnnotations** namespace in your Blazor application. Once enabled, the Grid automatically uses the data annotations applied to your model class properties to perform data validation.
+To enable data annotation in the Blazor DataGrid:
-The following table lists the data annotation attributes supported in the Grid:
+1. Add the **System.ComponentModel.DataAnnotations** namespace in the Blazor application.
+2. Bind the DataGrid to a model using `TValue` and [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource).
+3. Apply annotation attributes to model properties to enforce validation and display rules during CRUD operations.
+
+### Supported Data Annotation Attributes
+
+The tables categorize supported attributes by display, formatting, metadata, and validation functionality.
+
+### Display Attributes
+
+Use **Display** attributes to control how column headers, ordering, and metadata appear in the grid interface.
+
+| Attribute Name | Properties | Functionality |
+|----------------|------------|---------------|
+| Display | Name | Sets the header text for the DataGrid column |
+| Display | ShortName | Sets a shorter version of the header text |
+| Display | AutoGenerateField | Prevents the column from being auto-generated |
+| Display | AutoGenerateFilter | Disables filtering for the column |
+| Display | Description | Sets tooltip text shown on column ellipsis hover |
+| Display | Order | Defines the display order of the column |
+
+### DisplayFormat Attributes
+
+Apply **DisplayFormat** attributes when column values require specific formatting or null-handling behavior.
| Attribute Name | Properties | Functionality |
-|---------------|------------|--------------|
-| Display | Name | Sets the header text for the Grid column |
-| Display | ShortName | Sets a shorter version of the header text for the Grid column |
-| Display | AutoGenerateField | Prevents the column from being auto-generated in the Grid |
-| Display | AutoGenerateFilter | Specifies whether filtering should be disabled for the column |
-| Display | Description | Sets the tooltip text displayed when hovering over the column ellipsis |
-| Display | Order | Defines the display order priority of the Grid column |
-| DisplayFormat | FormatString | Sets the format for displaying data in the column |
-| DisplayFormat | ApplyFormatInEditMode | Determines whether the format should be applied during edit mode |
-| DisplayFormat | NullDisplayText | Sets the text to be displayed when the value of the property is null |
-| DisplayFormat | ConvertEmptyStringToNull | Determines whether empty string values should be converted to null in the user interface |
-| DisplayFormat | NeedsHtmlEncode | Sets whether HTML encoding should be disabled for a particular column |
-| ScaffoldColumnAttribute | Scaffold | Sets whether the column is visible in the user interface |
-| EditableAttribute | ReadOnly | Sets whether the column allows editing |
-| Key | Key | Marks a column as the primary key in the Grid |
-| Validation Attributes:
1. RequiredAttribute 2. StringLengthAttribute 3. RangeAttribute 4. RegularExpressionAttribute 5. MinLengthAttribute 6. MaxLengthAttribute 7. EmailAddressAttribute 8. CompareAttribute | | These validation attributes are used as `validation rules` in Grid CRUD operations |
-
-> The Syncfusion® Blazor DataGrid property takes precedence over data annotation attributes. For example, when both the DisplayName attribute and `HeaderText` are assigned to a field in the Grid model class for a specific column, the `HeaderText` value will be prioritized and displayed in the Grid header.
-
-The following sample code demonstrates how to use data annotations in the Grid:
+|----------------|------------|---------------|
+| DisplayFormat | FormatString | Sets the display format for column data |
+| DisplayFormat | ApplyFormatInEditMode | Applies format during edit mode |
+| DisplayFormat | NullDisplayText | Displays custom text when the value is null |
+| DisplayFormat | ConvertEmptyStringToNull | Converts empty strings to null in the UI |
+| DisplayFormat | HtmlEncode | Enables or disables HTML encoding for display |
+
+### Other Metadata Attributes
+
+Use these attributes to manage column visibility, editing behavior, and key definitions.
+
+| Attribute Name | Properties | Functionality |
+|----------------|------------|---------------|
+| ScaffoldColumnAttribute | Scaffold | Controls column visibility in the UI |
+| ReadOnlyAttribute | IsReadOnly | Prevents editing of the column |
+| Key | Key | Marks the column as the primary key |
+
+### Validation Attributes
+
+Add validation attributes to enforce rules that display inline Blazor DataGrid validation messages during CRUD operations.
+
+- RequiredAttribute
+- StringLengthAttribute
+- RangeAttribute
+- RegularExpressionAttribute
+- MinLengthAttribute
+- MaxLengthAttribute
+- EmailAddressAttribute
+- CompareAttribute
+
+> When both the `Display` attribute’s `Name` and the column’s `HeaderText` property are defined, the `HeaderText` value takes precedence and is shown in the column header.
+
+The `Display` attribute can be used to show user-friendly labels for enum values. This improves readability by replacing raw enum values with descriptive names.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -45,12 +81,12 @@ The following sample code demonstrates how to use data annotations in the Grid:
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using System.Reflection
-@using System.ComponentModel.DataAnnotations;
+@using System.ComponentModel.DataAnnotations
-
+
@@ -58,9 +94,8 @@ The following sample code demonstrates how to use data annotations in the Grid:
@{
- var Order = (context as Order);
-
-
+ var CurrentOrder = (context as Order);
+
}
@@ -70,56 +105,60 @@ The following sample code demonstrates how to use data annotations in the Grid:
@code {
- public List Orders { get; set; }
- public List DropDownData = new List();
+ private List Orders { get; set; }
+ private List DropDownData { get; } = new();
protected override void OnInitialized()
{
- Random rnd = new Random();
- var values = Enum.GetValues(typeof(Status));
- foreach (Status item in Enum.GetValues(typeof(Status)))
+ var Rnd = new Random();
+ var Values = Enum.GetValues(typeof(Status));
+
+ foreach (Status Item in Values)
{
- DropDownData.Add(new Data { Type = GetDisplayName(item), Value = item });
+ DropDownData.Add(new Data { Type = GetDisplayName(Item), Value = Item });
}
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
+
+ Orders = Enumerable.Range(1, 75).Select(x => new Order
{
OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[new Random().Next(5)],
+ CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", string.Empty, null })[Rnd.Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
- ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[new Random().Next(5)],
- Verified = (Status)(values.GetValue(rnd.Next(values.Length))),
+ ShipCity = (new string[] { "Berlin", "Madrid", "Cholchester", "Marseille", "Tsawassen" })[Rnd.Next(5)],
+ Verified = (Status)Values.GetValue(Rnd.Next(Values.Length)),
}).ToList();
}
- public static string GetDisplayName(Enum enumValue)
+ private static string GetDisplayName(Enum EnumValue)
{
- string displayName;
- displayName = enumValue.GetType()
- .GetMember(enumValue.ToString())
+ var DisplayName = EnumValue.GetType()
+ .GetMember(EnumValue.ToString())
.FirstOrDefault()
.GetCustomAttribute()?
.GetName();
- if (String.IsNullOrEmpty(displayName))
+
+ if (string.IsNullOrEmpty(DisplayName))
{
- displayName = enumValue.ToString();
+ DisplayName = EnumValue.ToString();
}
- return displayName;
+ return DisplayName;
}
- public enum Status
+
+ internal enum Status
{
[Display(Name = "Yeah")]
Yes = 0,
[Display(Name = "Nope")]
No = 1
}
- public class Data
+
+ internal sealed class Data
{
public string Type { get; set; }
public Status Value { get; set; }
}
- public class Order
+ internal sealed class Order
{
// Sets column as primary key.
[Key]
@@ -128,21 +167,26 @@ The following sample code demonstrates how to use data annotations in the Grid:
// Sets header text to the column.
[Display(ShortName = "ID")]
public int OrderID { get; set; }
+
[Display(Name = "CustomerID", Description ="List of Customers")]
// Sets column as required and error message to be displayed when empty.
[Required(ErrorMessage = "Field should not be empty")]
[DisplayFormat(NullDisplayText = "Empty", ConvertEmptyStringToNull = true)]
- public string? CustomerID { get; set; }
+ public string CustomerID { get; set; }
+
// Sets data type of column as Date.
[DataType(DataType.Date)]
[Display(Name = "Order Date")]
// Sets column as read only.
[Editable(false)]
public DateTime? OrderDate { get; set; }
+
[Display(Name = "Freight", AutoGenerateFilter = false)]
public double? Freight { get; set; }
- [ScaffoldColumn(scaffold:false)]
+
+ [ScaffoldColumn(false)]
public string ShipCity { get; set; }
+
public Status Verified { get; set; }
}
}
@@ -150,12 +194,8 @@ The following sample code demonstrates how to use data annotations in the Grid:
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-The following image shows how Data Annotations are applied to Grid columns in a Blazor application:
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijigsHQsZoWd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The **Verified** column displays the `Enum` member using the `Display` attribute name, enhancing user experience by rendering a human-readable label instead of the raw enum value.
+
-> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its features. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+N> Refer to the [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for an overview of available features. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to see how data is presented and managed within an application.
\ No newline at end of file
diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md
index 1645ff1236..a76f127b80 100644
--- a/blazor/datagrid/sorting.md
+++ b/blazor/datagrid/sorting.md
@@ -1,7 +1,7 @@
---
layout: post
title: Sorting in Blazor DataGrid | Syncfusion
-description: Learn all about sorting data-bound columns, single and multiple, in Syncfusion Blazor DataGrid component.
+description: Explore sorting in Syncfusion Blazor DataGrid including single/multi-column sort, initial sort, custom icons, foreign key sorting, and sorting events.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,97 +9,107 @@ documentation: ug
# Sorting in Blazor DataGrid
-The Syncfusion® Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**.
+The Syncfusion® Blazor DataGrid includes a built-in sorting feature that helps organize information within columns. This makes it easier to locate and analyze data efficiently. To turn on sorting, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true** in the Grid component.
-To know about how to **Sorting** in Grid, you can check this video.
+Sorting can be applied in two ways:
+- **Ascending Order**: Arranges values from smallest to largest (e.g., A to Z or 1 to 100). An upward arrow (↑) appears next to the header.
+- **Descending Order**: Arranges values from largest to smallest (e.g., Z to A or 100 to 1). A downward arrow (↓) appears next to the header.
{% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %}
-To sort a particular column in the Grid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**.
+## Sort via UI
+
+Interact with column headers to sort data directly. Clicking a column header toggles the sort order between **Ascending** and **Descending**. By default, the first click sorts ascending.
+
+
+|Action | Result |
+|------------------------------|--------------------------------------------------|
+| Click header once | Sorts in ascending order (↑ icon appears) |
+| Click header again | Sorts in descending order (↓ icon appears) |
+| Click header a third time | Clears sorting for that column(no icon) |
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
+
@using Syncfusion.Blazor.Grids
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
- }
+ }
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public static List GetAllRecords()
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhoMjBsUXCtbeqV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * Grid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction.
-> * You can apply and clear sorting by using the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) methods.
-> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
+
## Initial sorting
-By default, the Grid does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). This feature is helpful when you want to display your data in a specific order when the Grid is first loaded.
+By default, the Syncfusion® Blazor DataGrid renders without any sorting applied. To arrange records in a desired order right from the initial load, configure initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) (the column's data field name) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) properties (either **SortDirection.Ascending** for smallest to largest or **SortDirection.Descending** for largest to smallest) in the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) collection of [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
-The following example demonstrates how to set the **GridSortSettings** of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`.
+In this configuration, initial sorting is applied to the **OrderID** and **ShipCity** columns using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
+
@using Syncfusion.Blazor.Grids
@@ -110,84 +120,78 @@ The following example demonstrates how to set the **GridSortSettings** of the `
-
-
-
-
+
+
+
+
-
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
- }
+ }
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
+public class OrderData
+{
+ private static readonly List Orders = new List();
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public static List GetAllRecords()
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
{% endhighlight %}
{% endtabs %}
-
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The initial sorting defined in the `GridSortSettings` of the `Columns` will override any sorting applied through user interaction.
+> Initial sorting defined in the `GridSortSettings` of the Columns is applied on first render and overrides any sorting applied through interaction.
## Multi-column sorting
-The Syncfusion® Blazor DataGrid allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.
+The Syncfusion® Blazor DataGrid supports sorting multiple columns simultaneously. To enable this feature, set both [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) and [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) to **true**.
-To clear multi-column sorting for a particular column, press the "Shift + mouse left click".
+**How Multi-Column Sorting Works**
-> * The `AllowSorting` must be **true** while enabling multi-column sort.
-> * Set `AllowMultiSorting` property as **false** to disable multi-column sorting.
+When multi-sorting is enabled:
+- Click a column header to apply sorting to that column.
+- Hold Ctrl (or Command on macOS) and click additional column headers to include them in the sort sequence.
+- Press Shift and click a column header to remove it from the multi-column sort configuration.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -195,158 +199,140 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
- }
+ }
}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public class OrderData
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
{
- public static List Orders = new List();
-
- public OrderData()
- {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
+ return Orders;
+ }
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
- }
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
- }
{% endhighlight %}
{% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhAWCDhqqMpzrfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Prevent sorting for particular column
+## Disabling sorting for specific column
-The Syncfusion® Blazor DataGrid provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process.
+The Syncfusion® Blazor DataGrid provides the option to disable sorting for individual columns. This is useful for fields where sorting is not meaningful or should be restricted.
-It can be achieved by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the particular column to **false**.
+To disable sorting for a specific column, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of that [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
-The following example demonstrates, how to disable sorting for **CustomerID** column.
+In this configuration, sorting is disabled for the **CustomerID** column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
- }
-}
+ }
+}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
+public class OrderData
+{
+ private static readonly List Orders = new List();
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public static List GetAllRecords()
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing sorting functionality with the AllowUnsort property
+## Controlling Unsort behavior in Blazor DataGrid
-When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to **false** in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html), the Grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the Grid to its original unsorted layout through column header clicks.
-
-In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**.
+The Syncfusion® Blazor DataGrid provides control over whether a column can return to an unsorted state after sorting. This behavior is managed using the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html).
+When [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) is set to **false**, clicking a sorted column header does not revert the Grid to its original unsorted layout. Instead, the column remains sorted until a different sort action is applied. This ensures a consistent sorting state and prevents accidental removal of sorting.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -355,84 +341,68 @@ In the following example, this is demonstrated by preventing the Grid from enter
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
-
}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
+public class OrderData
+{
+ private static readonly List Orders = new List();
- }
- public OrderData(int? OrderID, string CustomerID, string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public static List GetAllRecords()
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVUMsiJfaBVSChx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Sort order
-
-By default, the sorting order will be as **Ascending -> Descending -> None**.
-
-When you click on a column header for the first time, it sorts the column in ascending order. Clicking the same column header again will sort the column in descending order. A repetitive third click on the same column header will clear the sorting.
-
## Custom sorting
-The Syncfusion® Blazor DataGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5).
-
+The Syncfusion® Blazor DataGrid allows customizing the default sort logic for a column by setting the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of a column. This property accepts an IComparer
@code {
- public List GridData { get; set; }
+ public List GridData { get; set; } = new List();
protected override void OnInitialized()
{
@@ -717,64 +665,63 @@ In the below sample, Grid is rendered with a customized sort icon.
}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
+public class OrderData
+{
+ private static readonly List Orders = new List();
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public static List GetAllRecords()
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
- {% endhighlight %}
-{% endtabs %}
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhKCWZqBWwrwhml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryiZBieWXbgwvN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Sort columns externally
+## Sort via programmatically
-The Syncfusion® Blazor DataGrid allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click.
+The Syncfusion® Blazor DataGrid supports sorting operations through built-in methods. These methods allow sorting to be added, removed, or cleared programmatically without relying on the grid’s UI. Sorting actions can be triggered externally—such as via dropdown menus, buttons, or other UI elements—allowing for flexible and dynamic control over data presentation.
### Add sort columns
-To sort a column externally, you can utilize the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the Grid. This method allows you to programmatically sort a specific column based on your requirements.
+The DataGrid provides method overloads for programmatic sorting, offering flexibility based on different use cases. These overloads support sorting a single column, multiple columns, or multiple columns while resetting any previous sort settings.
-The following example demonstrates how to add sort columns to a Grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters.
+**Sorting a Single Column**
+
+Use [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) method to sort a single column by specifying its name and sort direction. This method also supports multi-column sorting when enabled in the grid, allowing it to add the new sort condition alongside existing ones.
+
+| Parameter | Type | Description |
+|----------------|-------------------|-----------------------------------------------------------------------------|
+| fieldName | string | Specifies the column name to be sorted. If the column name is invalid or misspelled, the sort will fail silently without throwing error. |
+| direction | SortDirection | Defines the sort direction. Possible values: **Ascending, Descending**. |
+| isMultiSort | bool? (optional) | Enables multi-column sorting when true; replaces existing sort when false. |
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -783,31 +730,27 @@ The following example demonstrates how to add sort columns to a Grid. It utilize
@using Syncfusion.Blazor.DropDowns
-
-
+
+
-
-
+
+
+
- ADD SORT COLUMN
+ ADD SORT COLUMN
-
-
-
-
-
-
+
-
+
@@ -815,127 +758,292 @@ The following example demonstrates how to add sort columns to a Grid. It utilize
@code {
- public List GridData { get; set; }
+ private List gridData { get; set; }
+ private SfGrid? grid { get; set; }
+ private string dropDownValue { get; set; } = "OrderID";
+ private string[] enumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection));
+ private SortDirection dropDownDirection { get; set; } = SortDirection.Ascending;
+
+ protected override void OnInitialized()
+ {
+ gridData = OrderData.GetAllRecords();
+ }
+
+ private List ColumnList = new List
+ {
+ new ColumnItem { ID = "OrderID", Value = "OrderID" },
+ new ColumnItem { ID = "CustomerID", Value = "CustomerID" },
+ new ColumnItem { ID = "Freight", Value = "Freight" }
+ };
+
+ private async Task AddSortColumn()
+ {
+ await grid.SortColumnAsync(dropDownValue, dropDownDirection);
+ }
+
+ private class ColumnItem
+ {
+ public string ID { get; set; }
+ public string Value { get; set; }
+ }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ private static readonly List Orders = new List();
+
+ public OrderData(int? orderID, string customerID, double? freight, string shipName)
+ {
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import"));
+ }
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhIijrBrMZftWiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
- public SfGrid? Grid { get; set; }
+**Sort Multiple Columns**
- public string DropDownValue { get; set; } = "OrderID";
+The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method is used to sort multiple columns simultaneously. It accepts a list of [SortColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortColumn.html#Syncfusion_Blazor_Grids_SortColumn_Field) objects, each specifying the column name and sort direction.
- public string[] EnumValues = Enum.GetNames(typeof(Syncfusion.Blazor.Grids.SortDirection));
+| Parameter | Type | Description |
+|------------------|-------------------------|--------------------------------------------------------------|
+| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. |
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+Add Sort Column
+
+
+
+
+
+
+
+
+
- public Syncfusion.Blazor.Grids.SortDirection DropDownDirection { get; set; } = SortDirection.Ascending;
+@code {
+ public List GridData { get; set; } = new List();
+ private SfGrid? grid { get; set; }
+ private List sortColumns { get; set; } = new List();
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
- List LocalData = new List
+ private async Task ApplyMultiColumnSort()
{
- new Columns() { ID= "OrderID", Value= "OrderID" },
- new Columns() { ID= "CustomerID", Value= "CustomerID" },
- new Columns() { ID= "Freight", Value= "Freight" },
- };
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = SortDirection.Descending });
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = SortDirection.Ascending });
+ await grid!.SortColumnsAsync(sortColumns);
+ }
+}
- List LocalData1 = new List
- {
- new Direction() { ID= "Ascending", Value= "Ascending" },
- new Direction() { ID= "Descending", Value= "Descending" },
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ private static readonly List Orders = new List();
- };
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public class Columns
+ public static List GetAllRecords()
{
- public string ID { get; set; }
- public string Value { get; set; }
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ }
+
+ return Orders;
}
- public class Direction
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVIWWNyHeMxowAh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+> When sorting is applied again using `SortColumnsAsync`, the new sort settings are added to the existing ones. This means previously sorted columns will remain sorted unless explicitly removed or overridden.
+
+**Sort Multiple Columns and Clear Previous Sort**
+
+The [SortColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnsAsync_System_Collections_Generic_List_Syncfusion_Blazor_Grids_SortColumn__) method also provides an overload that allows clearing existing sort settings before applying new ones. This is useful when replacing current sort configurations with a new set of sorted columns.
+
+| Parameter | Type | Description |
+|---------------------|-------------------------|-----------------------------------------------------------------------------|
+| columns | List | A collection of sorting instructions. Each `SortColumn` in the list defines a specific column to sort and the direction of sorting (**Ascending** or **Descending**). This allows multiple columns to be sorted at the same time, based on the order they appear in the list. |
+| clearPreviousSort | bool | To apply a new sort and remove any existing sort settings, enable the option to clear previous sorting. When this option is set to true, all current sort conditions will be removed before applying the new ones. This ensures that only the specified columns are sorted, rather than combining with any existing sort configuration. |
+
+In this example, the grid is initially configured to sort the **OrderID** column. By setting the `clearPreviousSort` parameter to true in the `SortColumnsAsync` method, the existing sort on the **OrderID** column is removed before applying the new sort. This ensures that only the newly specified columns are sorted, replacing any previous sort settings.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+Apply New Sort
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; } = new List();
+ private SfGrid? Grid { get; set; }
+ public List sortColumns { get; set; } = new List();
+
+ protected override void OnInitialized()
{
- public string ID { get; set; }
- public string Value { get; set; }
+ GridData = OrderData.GetAllRecords();
}
- public async Task AddsortColumn()
+ private async Task ApplyNewSort()
{
- await Grid.SortColumnAsync(DropDownValue, DropDownDirection, true);
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipCity), Direction = Syncfusion.Blazor.Grids.SortDirection.Descending });
+ sortColumns.Add(new() { Field = nameof(OrderData.ShipName), Direction = Syncfusion.Blazor.Grids.SortDirection.Ascending });
+ await Grid!.SortColumnsAsync(sortColumns, true);
}
}
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
- }
- public OrderData(int? OrderID,string CustomerID, double? Freight, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.Freight = Freight;
- this.ShipName = ShipName;
- }
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public static List GetAllRecords()
- {
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", 3.25, "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", 22.98, "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", 140.51, "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", 65.83, "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", 58.17, "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", 81.91, "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", 3.05, "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", 55.09, "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", 48.29, "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipName { get; set; }
- public double? Freight { get; set; }
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ }
+
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBgsWDKBXuYpcUi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBeCWtoRymxjAYV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-### Remove sort columns
+### Clear sorting
+The Blazor DataGrid component provides flexible options to remove sorting from columns. Sorting can be cleared either for specific column or for all columns at once, depending on the requirement.
-To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid. This method allows you to remove the sorting applied to a specific column.
+**Clear sorting for specific Column**
-The following example demonstrates how to remove sort columns. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column.
+The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method removes sorting from specific columns. It accepts a list of column field names and clears their sort settings.
+
+| Parameter | Type | Description |
+|---------------|-------------------|--------------------------------------------------------------|
+| columnNames | List | A list of column field names whose sorting should be removed. |
+
+In the following example, the grid is initially sorted by **CustomerID** and **ShipName**. A dropdown allows selecting a column name, and clicking the **Remove Sort Column** button removes sorting from the selected column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
+
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.DropDowns
-
-
-
+
+
+
- REMOVE SORT COLUMN
+ Remove Sort Column
-
+
@@ -943,110 +1051,95 @@ The following example demonstrates how to remove sort columns. It utilizes the [
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public SfGrid? Grid { get; set; }
-
- public string DropDownValue { get; set; } = "OrderID";
+ private List GridData { get; set; } = new();
+ private SfGrid? grid { get; set; }
+ private string dropDownValue { get; set; } = "OrderID";
+ private List columns { get; set; } = new()
+ {
+ new ColumnMetaData { Id = "OrderID", Value = "Order ID" },
+ new ColumnMetaData { Id = "CustomerID", Value = "Customer ID" },
+ new ColumnMetaData { Id = "ShipCity", Value = "Ship City" },
+ new ColumnMetaData { Id = "ShipName", Value = "Ship Name" },
+ };
protected override void OnInitialized()
{
GridData = OrderData.GetAllRecords();
}
- List LocalData = new List
+ private async Task RemoveSortColumn()
{
- new Columns() { ID= "OrderID", Value= "OrderID" },
- new Columns() { ID= "CustomerID", Value= "CustomerID" },
- new Columns() { ID= "ShipCity", Value= "ShipCity" },
- new Columns() { ID= "ShipName", Value= "ShipName" },
- };
-
- public class Columns
- {
- public string ID { get; set; }
- public string Value { get; set; }
+ if (grid != null)
+ {
+ var ColumnNames = new List { dropDownValue };
+ await grid.ClearSortingAsync(ColumnNames);
+ }
}
- public class Direction
+ private class ColumnMetaData
{
- public string ID { get; set; }
- public string Value { get; set; }
+ public string Id { get; set; } = string.Empty;
+ public string Value { get; set; } = string.Empty;
}
- List listItems = new List();
- public async Task RemoveSortColumn()
- {
- listItems.Add(DropDownValue);
- await Grid.ClearSortingAsync(listItems);
- listItems.Clear();
-
- }
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+public class OrderData
+{
+ private static readonly List Orders = new List();
- public static List GetAllRecords()
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJXWtlsYHkfUrY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSWsNSxHIlXqJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+**Clear sorting for all columns**
-### Clear sorting
+The [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method removes sorting from all columns in the grid. This is useful when resetting the grid to its default unsorted state.
-To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the Grid. This method clears the sorting applied to all columns in the Grid.
-
-The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click.
+In this example, the grid is initially sorted by **CustomerID** and **ShipName**. Clicking the **Clear Sorting** button removes sorting from all columns.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1054,10 +1147,10 @@ The following example demonstrates how to clear the sorting using `ClearSortingA
@using Syncfusion.Blazor.Buttons
- Clear Sorting
+ Clear Sorting
-
+
@@ -1065,186 +1158,273 @@ The following example demonstrates how to clear the sorting using `ClearSortingA
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public SfGrid? Grid { get; set; }
+ private List gridData { get; set; } = new();
+ private SfGrid? grid { get; set; }
protected override void OnInitialized()
{
- GridData = OrderData.GetAllRecords();
- }
+ gridData = OrderData.GetAllRecords();
+ }
- private async Task onExternalSort()
+ private async Task ClearAllSorting()
{
- await Grid.ClearSortingAsync();
+ if (grid != null)
+ {
+ await grid.ClearSortingAsync();
+ }
}
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
+
+public class OrderData
+{
+ private static readonly List Orders = new List();
+
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
{
- public static List Orders = new List();
-
- public OrderData()
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
+ }
+
+ return Orders;
+ }
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLesWjoncQhUnwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Sorting events
+
+The Syncfusion® Blazor DataGrid provides events that are triggered during sorting operations, such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events enable the execution of custom actions before and after a column is sorted, allowing for validation, customization, and response handling.
+
+1. `Sorting`: Triggered before a column is sorted.
+
+2. `Sorted`: Triggered after a column has been sorted.
+
+### Sorting
+
+The `Sorting` event is triggered before a column is sorted. This event provides an opportunity to inspect, modify, or cancel the sorting process based on custom logic or validation requirements.
+
+**Event Arguments**
+
+The event uses the [SortingEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortingEventArgs.html) class, which includes the following properties:
+
+| Event Argument | Description |
+|---------------|-------------|
+| ColumnName | Represents the name of the column being sorted. |
+| Direction | Indicates the sorting direction (**Ascending** or **Descending**). |
+| Cancel | Determines whether the sorting operation should be aborted. Setting this property to true prevents the sorting from being applied. |
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public List GridData { get; set; } = new List();
+
+ protected override void OnInitialized()
+ {
+ GridData = OrderData.GetAllRecords();
+ }
+
+ private Task Sorting(SortingEventArgs args)
+ {
+ // Prevent sorting on OrderID column
+ if (args.ColumnName == "OrderID")
+ {
+ args.Cancel = true;
}
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
+
+ // Change sort direction dynamically
+ if (args.ColumnName == "CustomerID" && args.Direction == SortDirection.Ascending)
{
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
+ args.Direction = SortDirection.Descending;
}
- public static List GetAllRecords()
+ return Task.CompletedTask;
+ }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ private static readonly List Orders = new List();
+
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUWWjKiFKHdJVl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLeCCXSmsecZFpA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Sorting events
+### Sorted
-The Syncfusion® Blazor DataGrid provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed.
+The `Sorted` event is triggered after a column has been successfully sorted. It provides details about the sorted column and direction, enabling actions such as updating UI, logging, or showing notifications.
-1. **Sorting**: `Sorting` event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action.
+**Event Arguments**
-2. **Sorted**: `Sorted` event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action.
+The event uses the [SortedEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SortedEventArgs.html) class, which includes the following properties:
-The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message.
+| Event Argument | Description |
+|---------------|-------------|
+| ColumnName | Represents the name of the column that was sorted. |
+| Direction | Indicates the sorting direction (**Ascending** or **Descending**). |
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@if (show == true)
+@if (showNotification)
{
-
- Sort action completed for @columnName column
+
+ Sorting completed for @lastSortedColumn column
}
-
-
+
+
-
-
-
-
+
+
+
+
@code {
- public List GridData { get; set; }
-
- public string columnName { get; set; }
- public bool show { get; set; } = false;
+ private List gridData { get; set; } = new List();
+ private string lastSortedColumn { get; set; } = string.Empty;
+ private bool showNotification { get; set; }
protected override void OnInitialized()
{
- GridData = OrderData.GetAllRecords();
- }
-
- public async Task SortingHandler(SortingEventArgs args)
- {
- if (args.ColumnName == "OrderID")
- {
- args.Cancel = true;
- }
+ gridData = OrderData.GetAllRecords();
}
- public async Task SortedHandler(SortedEventArgs args)
+ private Task Sorted(SortedEventArgs args)
{
- columnName = args.ColumnName;
- show = true;
+ lastSortedColumn = args.ColumnName;
+ showNotification = true;
+ return Task.CompletedTask;
}
}
+
{% endhighlight %}
{% highlight c# tabtitle="OrderData.cs" %}
- public class OrderData
- {
- public static List Orders = new List();
-
- public OrderData()
- {
+public class OrderData
+{
+ private static readonly List Orders = new List();
- }
- public OrderData(int? OrderID,string CustomerID,string ShipCity, string ShipName)
- {
- this.OrderID = OrderID;
- this.CustomerID = CustomerID;
- this.ShipCity = ShipCity;
- this.ShipName = ShipName;
- }
+ public OrderData(int? orderId, string customerId, string shipCity, string shipName)
+ {
+ OrderID = orderId;
+ CustomerID = customerId;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ }
- public static List GetAllRecords()
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
{
- if (Orders.Count() == 0)
- {
- int code = 10;
- for (int i = 1; i < 2; i++)
- {
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
- code += 5;
- }
- }
- return Orders;
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevali"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", "Lyon", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Rio de Janeiro", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", "Münster", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", "Reims", "Wellington Import"));
}
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ return Orders;
}
+
+ public int? OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
{% endhighlight %}
{% endtabs %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSsiZewifHMFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzNWNzLolkmHqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
\ No newline at end of file
+N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md
index 1b2c078616..11221918a4 100644
--- a/blazor/datagrid/style-and-appearance/aggregate.md
+++ b/blazor/datagrid/style-and-appearance/aggregate.md
@@ -1,19 +1,21 @@
---
layout: post
-title: Aggregate customization in Blazor DataGrid | Syncfusion
-description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more.
+title: Customize aggregates in Blazor DataGrid | Syncfusion
+description: Learn how to customize aggregate rows in the Syncfusion Blazor DataGrid using CSS, including footer containers and summary cells.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Aggregate in Syncfusion® Blazor DataGrid
+# Aggregate customization in Syncfusion Blazor DataGrid
-You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements.
+Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the grid. Styling options are available for:
-## Customizing the aggregate root element
+- **Aggregate root container:** The outer wrapper of the footer row.
+- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result.
-To customize the appearance of the Grid's aggregate root elements, you can use the following CSS code:
+## Customize the aggregate root element
+The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance:
```css
.e-grid .e-gridfooter {
@@ -21,13 +23,13 @@ To customize the appearance of the Grid's aggregate root elements, you can use t
}
```
-In this example, the **e-gridfooter** class represents the root element of the aggregate row in the Grid footer. You can modify the `font-family` property to change the font of the aggregate root element.
+Properties like **font-family**, **font-size**, and **padding** can be changed to fit the grid layout design.
-
+
-## Customizing the aggregate cell elements
+## Customize the aggregate cell elements
-To customize the appearance of the Grid's aggregate cell elements (summary row cell elements), you can use the following CSS code:
+The **.e-summaryrow** and **.e-summarycell** classes define the appearance of the summary row and its individual cells in the Blazor DataGrid. Apply CSS to modify their look:
```css
.e-grid .e-summaryrow .e-summarycell {
@@ -35,27 +37,25 @@ To customize the appearance of the Grid's aggregate cell elements (summary row c
}
```
-In this example, the **e-summaryrow** class represents the summary row containing aggregate cells, and the **e-summarycell** class targets individual aggregate cells within the summary row. You can modify the `background-color` property to change the `color` of the aggregate cell elements.
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to improve clarity and interaction.
-
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
@{
var aggregate = (context as AggregateTemplateContext);
-
-
Sum: @aggregate.Sum
-
+
Sum: @aggregate.Sum
}
@@ -67,9 +67,7 @@ In this example, the **e-summaryrow** class represents the summary row containin
@{
var aggregate = (context as AggregateTemplateContext);
-
-
Max: @aggregate.Max
-
+
Max: @aggregate.Max
}
@@ -77,26 +75,22 @@ In this example, the **e-summaryrow** class represents the summary row containin
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -107,44 +101,43 @@ In this example, the **e-summaryrow** class represents the summary row containin
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
+ Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
+ Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
+ Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
+ Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
+ Data.Add(new OrderData(10252, "SUPRD", 51.30, new DateTime(2024, 1, 14)));
+ Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
+ Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
+ Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
+ Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
+ Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public DateTime OrderDate { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public double Freight { get; }
+ public DateTime OrderDate { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/BNLoXStLKgmIIyaI" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNMcivWmiUmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md
index 2d39078f61..b0f0d2222a 100644
--- a/blazor/datagrid/style-and-appearance/editing.md
+++ b/blazor/datagrid/style-and-appearance/editing.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Editing customization in DataGrid | Syncfusion
-description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details.
+title: Customize editing in Blazor DataGrid | Syncfusion
+description: Learn how to style and customize edited and added rows, input fields, the edit dialog header, and command buttons in the Syncfusion Blazor DataGrid using CSS.
platform: Blazor
control: DataGrid
documentation: ug
@@ -9,25 +9,31 @@ documentation: ug
# Editing customization in Syncfusion Blazor DataGrid
-You can customize the appearance of editing-related elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements.
+The appearance of editing elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the editing interface:
-## Customizing the edited and added row element
+- **Edited and newly added rows:** Highlights rows that are being modified or newly inserted.
+- **Edit form input fields:** Displays text boxes used to enter or update values during editing.
+- **Edit dialog header:** Shows the title or context of the current editing operation.
+- **Command column buttons:** Displays action buttons such as Edit, Delete, Update, and Cancel.
-To customize the appearance of edited and added row table elements in the Grid, you can use the following CSS code:
+## Customize edited and added row elements
+
+The **.e-editedrow** and **.e-addedrow** classes style edited and newly added rows. Apply CSS to make these rows stand out:
```css
.e-grid .e-editedrow table, .e-grid .e-addedrow table {
background-color: #62b2eb;
}
```
-In this example, the .**e-editedrow** class represents the edited row element, and the **.e-addedrow** class represents the added row element. You can modify the `background-color` property to change the color of these row table elements.
-
-
+Adjust properties such as **background-color** or **border** styles to highlight rows that are in edit mode.
+
+
+
-## Customizing the edited row input element
+## Customize edited row input elements
-To customize the appearance of edited row input elements in the Grid, you can use the following CSS code:
+The **.e-gridform** and **.e-input** classes style inputs inside the inline edit form in the Blazor DataGrid. Use CSS to adjust their appearance:
```css
@@ -37,40 +43,37 @@ To customize the appearance of edited row input elements in the Grid, you can us
}
```
-In this example, the **.e-gridform** class represents the editing form, and the **.e-input** class represents the input elements within the form. You can modify the `font-family` property to change the font and `color` property to change text color of the input elements.
-
+Modify properties such as **font-family**, **color**, or **padding** to improve readability.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
+ private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" };
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -81,56 +84,59 @@ In this example, the **.e-gridform** class represents the editing form, and the
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ Freight = freight;
+ ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWNCxTcuUSDfi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the edit dialog header element
+## Customize the edit dialog header
-To customize the appearance of the edit dialog header element in the Grid, you can use the following CSS code:
+The **.e-edit-dialog** and **.e-dlg-header-content** classes style the dialog header when dialog editing is enabled. Apply CSS to differentiate the header:
```css
@@ -139,35 +145,34 @@ To customize the appearance of the edit dialog header element in the Grid, you c
}
```
-In this example, the **.e-edit-dialog** class represents the edit dialog, and the **.e-dlg-header-content** class targets the header content within the dialog. You can modify the `background-color` property to change the color of the header element.
-
+Change properties such as **background-color** to visually separate the header from the rest of the dialog content.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
+ private readonly List ToolbarItems = new() { "Add", "Edit", "Delete", "Update", "Cancel" };
protected override void OnInitialized()
{
@@ -179,56 +184,59 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, string shipCity, string shipName)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.ShipCity = shipCity;
- this.ShipName = shipName;
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ Freight = freight;
+ ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
- Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
- Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
- Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
- Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
- Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
- Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
- Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
- Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
- Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
- Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
- Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
- Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
- Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCity { get; set; }
- public string ShipName { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLSMjiRTFXgRbNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the command column buttons
+## Customize command column buttons
-To customize the appearance of command column buttons such as edit, delete, update, and cancel, you can use the following CSS code:
+The **.e-edit**, **.e-delete**, **.e-update**, and **.e-cancel-icon** classes style the command column buttons in the Blazor DataGrid. Use CSS to adjust their appearance:
```css
@@ -240,35 +248,35 @@ To customize the appearance of command column buttons such as edit, delete, upda
}
```
-In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** classes represent the respective command column buttons. You can modify the `color` property to change the color of these buttons.
-
-
+Style properties like **color**, **font-size**, and **font-weight** can be adjusted to differentiate action icons and enhance visibility during interaction.
+
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
-
+
+
+
-
-
-
-
+
+
+
+
-
+
-
-
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -292,49 +297,52 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
- public OrderData(int orderID, string customerID, double freight, string shipCountry)
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, double freight, string shipCountry)
{
OrderID = orderID;
CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
Freight = freight;
ShipCountry = shipCountry;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, "France"));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Germany"));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, "Brazil"));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, "France"));
- Orders.Add(new OrderData(10252, "SUPRD", 51.30, "Belgium"));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, "Brazil"));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Switzerland"));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, "Switzerland"));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, "Brazil"));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, "Venezuela"));
- Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Austria"));
- Orders.Add(new OrderData(10259, "CENTC", 3.25, "Mexico"));
- Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Germany"));
- Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Brazil"));
- Orders.Add(new OrderData(10262, "RATTC", 48.29, "USA"));
+ Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", 32.38, "France"));
+ Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", 11.61, "Germany"));
+ Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", 65.83, "Brazil"));
+ Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", 41.34, "France"));
+ Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", 51.30, "Belgium"));
+ Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", 58.17, "Brazil"));
+ Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", 22.98, "Switzerland"));
+ Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", 148.33, "Switzerland"));
+ Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export", 13.97, "Brazil"));
+ Data.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos", 81.91, "Venezuela"));
+ Data.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel", 140.51, "Austria"));
+ Data.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial", 3.25, "Mexico"));
+ Data.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen", 55.09, "Germany"));
+ Data.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia", 3.05, "Brazil"));
+ Data.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery", 48.29, "USA"));
}
-
- return Orders;
+ return Data;
}
- public int OrderID { get; set; }
- public string CustomerID { get; set; }
- public double Freight { get; set; }
- public string ShipCountry { get; set; }
+ public int OrderID { get; }
+ public string CustomerID { get; }
+ public string ShipCity { get; }
+ public string ShipName { get; }
+ public double Freight { get; }
+ public string ShipCountry { get; }
}
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVSMNiHTPsZJUUc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md
index d9c71f66f2..89b38585b1 100644
--- a/blazor/datagrid/style-and-appearance/filtering.md
+++ b/blazor/datagrid/style-and-appearance/filtering.md
@@ -1,110 +1,126 @@
---
layout: post
-title: Filtering customization in Blazor DataGrid | Syncfusion
-description: Learn here all about filtering in Syncfusion Blazor DataGrid and more.
+title: Customize filtering in Blazor DataGrid | Syncfusion
+description: Learn how to style and customize the Syncfusion Blazor DataGrid filter UI using CSS—filter bar, dialog, icons, buttons, and menus.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Filtering in Syncfusion® Blazor DataGrid
+# Filtering customization in Syncfusion Blazor DataGrid
-You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters.
+The appearance of filtering elements in the Syncfusion® Blazor DataGrid can be customized using CSS. Styling options are available for different parts of the filtering interface:
-## Customizing the filter bar cell element
+- **Filter bar cell and input elements:** Used to enter filter values directly in the header row.
+- **Input focus styles:** Visual highlight applied when the filter input field is focused.
+- **Clear and filter icons:** Icons for clearing filter values and indicating active filters in column headers.
+- **Filter dialog content and footer:** Sections of the filter popup used for entering filter criteria and confirming actions.
+- **Input fields and buttons within the filter dialog:** Controls used to specify filter values and apply or cancel filtering.
+- **Excel-style number filter visuals:** Menu-style interface for selecting numeric filter conditions in Excel-like filtering mode.
-To customize the appearance of the filter bar cell element in the Grid header, you can use the following CSS code:
+## Customize the filter bar cell element
-```css
+The **.e-filterbarcell** class styles the filter bar cells in the header row. Use CSS to adjust its appearance:
+```css
.e-grid .e-filterbarcell {
background-color: #045fb4;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element in the Grid header. You can modify the `background-color` property to change the color of the filter bar cell element.
-
+Properties like **background-color**, **padding**, and **border** can be changed to visually distinguish the filter row from header cells.
-## Customizing the filter bar input element
+
-To customize the appearance of the filter bar input element in the Grid header, you can use the following CSS code:
+## Customize the filter bar input element
+The **.e-input** class inside **.e-filterbarcell** styles the input field in the filter bar. Apply CSS to modify its look:
```css
-
-.e-grid .e-filterbarcell .e-input-group input.e-input{
+.e-grid .e-filterbarcell .e-input-group input.e-input {
font-family: cursive;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input** class targets the input element within the cell. You can modify the `font-family` property to change the font of the filter bar input element.
-
+Adjust properties such as **font-family**, **font-size**, and **border** can be adjusted to improve readability and match the grid design.
-## Customizing the filter bar input focus
+
-To customize the appearance of the filter bar input element's focus highlight, you can use the following CSS code:
+## Customize the input focus
-```css
+The **.e-input-focus** class styles the filter bar input group when focused. Apply CSS to change its appearance:
-.e-grid .e-filterbarcell .e-input-group.e-input-focus{
+```css
+.e-grid .e-filterbarcell .e-input-group.e-input-focus {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filterbarcell** class targets the filter bar cell element, and the **.e-input-group.e-input-focus** class targets the focused input element. You can modify the `background-color` property to change the color of the focus highlight.
+
+Change properties like **background-color** and **border** to enhance focus visibility and support keyboard navigation.
-## Customizing the filter bar input clear icon
+## Customize the filter bar input clear icon
-To customize the appearance of the filter bar input element's clear icon, you can use the following CSS code:
+The **.e-clear-icon::before** class defines the clear icon in the filter bar input. Apply CSS to change its appearance:
```css
-
.e-grid .e-filterbarcell .e-input-group .e-clear-icon::before {
content: '\e72c';
}
-
```
-In this example, the **.e-clear-icon** class targets the clear icon element within the input group. You can modify the `content` property to change the icon displayed.
-
+The `content` property can be updated to use a different glyph from the icon set.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
+
+ private List Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
@@ -115,35 +131,35 @@ In this example, the **.e-clear-icon** class targets the clear icon element with
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List GetAllRecords()
+ internal static List GetAllRecords()
{
- if (Orders.Count == 0)
+ if (Data.Count == 0)
{
- Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
- Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
- Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
- Orders.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
- Orders.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
- Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
- Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
- Orders.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
- Orders.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
- Orders.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
+ Data.Add(new OrderData(10248, "VINET", 32.38, new DateTime(2024, 1, 10)));
+ Data.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(2024, 1, 11)));
+ Data.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(2024, 1, 12)));
+ Data.Add(new OrderData(10251, "VICTE", 41.34, new DateTime(2024, 1, 13)));
+ Data.Add(new OrderData(10252, "SUPRD", 51.3, new DateTime(2024, 1, 14)));
+ Data.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(2024, 1, 15)));
+ Data.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(2024, 1, 16)));
+ Data.Add(new OrderData(10255, "RICSU", 148.33, new DateTime(2024, 1, 17)));
+ Data.Add(new OrderData(10256, "WELLI", 13.97, new DateTime(2024, 1, 18)));
+ Data.Add(new OrderData(10257, "HILAA", 81.91, new DateTime(2024, 1, 19)));
}
- return Orders;
+ return Data;
}
public int OrderID { get; set; }
@@ -155,138 +171,139 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryXIXVUYyWnGdg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDryMjMRrYykDUIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the Blazor DataGrid filtering icon
+## Customize the filtering icon in the header
-To customize the appearance of the Grid's filtering icon in the Grid header, you can use the following CSS code:
+The **.e-icon-filter::before** class styles the filter icon in column headers. Apply CSS to modify its look:
```css
-
-.e-grid .e-icon-filter::before{
+.e-grid .e-icon-filter::before {
content: '\e81e';
}
-
```
-In this example, the **.e-icon-filter** class targets the filtering icon element. You can modify the `content` property to change the icon displayed.
-
+Update the `content` value to match the desired icon glyph.
-## Customizing the filter dialog content
+
-To customize the appearance of the filter dialog's content element, you can use the following CSS code:
+## Customize the filter dialog content
-```css
+The **.e-filter-popup .e-dlg-content** class styles the content area of the filter dialog. Apply CSS to change its appearance:
+```css
.e-grid .e-filter-popup .e-dlg-content {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-dlg-content** classes target the content element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's content.
+
+Modify properties such as **background-color**, **padding**, and **border** to match the application theme.
-## Customizing the filter dialog footer
+## Customize the filter dialog footer
-To customize the appearance of the filter dialog's footer element, you can use the following CSS code:
+The **.e-filter-popup .e-footer-content** class styles the footer section of the filter dialog. Apply CSS to adjust its appearance:
```css
-
.e-grid .e-filter-popup .e-footer-content {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-footer-content** classes target the footer element within the filter dialog. You can modify the `background-color` property to change the color of the dialog's footer.
+
+Properties like **background-color**, **text-align**, and **border** can be changed to align with the layout design.
-## Customizing the filter dialog input element
+## Customize the filter dialog input field
-To customize the appearance of the filter dialog's input elements, you can use the following CSS code:
+The **.e-input** class inside **.e-filter-popup** targets input fields in the filter dialog. Use CSS to adjust its appearance:
```css
-
-.e-grid .e-filter-popup .e-input-group input.e-input{
+.e-grid .e-filter-popup .e-input-group input.e-input {
font-family: cursive;
}
-
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-input** class targets the input elements within the dialog. You can modify the `font-family` property to change the font of the input elements.
-
+Adjust properties such as **font-family**, **color**, and **border** to improve clarity and consistency.
-## Customizing the filter dialog button element
+
-To customize the appearance of the filter dialog's button elements, you can use the following CSS code:
+## Customize the filter dialog button element
-```css
+The **.e-filter-popup .e-btn** class styles buttons inside the filter dialog. Apply CSS to modify their appearance:
-.e-grid .e-filter-popup .e-btn{
+```css
+.e-grid .e-filter-popup .e-btn {
font-family: cursive;
}
-
```
-In this example, the **.e-filter-popup** class targets the filter dialog, and the **.e-btn** class targets the button elements within the dialog. You can modify the `font-family` property to change the font of the button elements.
-
+Change properties like **font-family**, **background-color**, and **border** to match the design.
-## Customizing the excel filter dialog number filters element
+
-To customize the appearance of the excel filter dialog's number filters, you can use the following CSS code:
+## Customize the Excel-style number filter menu
-```css
+The **.e-contextmenu-container ul** class inside **.e-filter-popup** styles the number filter list in the Excel-style filter dialog. Apply CSS to change its appearance:
-.e-grid .e-filter-popup .e-contextmenu-container ul{
+```css
+.e-grid .e-filter-popup .e-contextmenu-container ul {
background-color: #deecf9;
}
-
```
-In this example, the **.e-filter-popup .e-contextmenu-container** ul classes target the number filter elements within the excel filter dialog. You can modify the `background-color` property to change the color of these elements.
-
+Properties such as **background-color**, **color**, and **text-align** can be adjusted to match the required design.
+
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
+
-
+
-
+
-
-
+
+
@code {
- private SfGrid Grid;
- public List Orders { get; set; }
+ private List Orders { get; set; }
protected override void OnInitialized()
{
@@ -298,35 +315,35 @@ In this example, the **.e-filter-popup .e-contextmenu-container** ul classes tar
{% highlight c# tabtitle="OrderData.cs" %}
-public class OrderData
+internal sealed class OrderData
{
- public static List Orders = new List();
+ private static readonly List Data = new();
public OrderData(int orderID, string customerID, double freight, DateTime orderDate)
{
- this.OrderID = orderID;
- this.CustomerID = customerID;
- this.Freight = freight;
- this.OrderDate = orderDate;
+ OrderID = orderID;
+ CustomerID = customerID;
+ Freight = freight;
+ OrderDate = orderDate;
}
- public static List