diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md
index 9388d4c41e..35c50d2413 100644
--- a/blazor/color-picker/how-to/customize-color-picker.md
+++ b/blazor/color-picker/how-to/customize-color-picker.md
@@ -76,9 +76,7 @@ By default, the Palette will be rendered with default colors. To load custom col
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)" %}
## Hide input area from picker
@@ -92,9 +90,7 @@ In the following sample, the Color Picker is rendered without input area.
Choose a color
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)" %}
## Custom handle
@@ -126,6 +122,4 @@ The following sample shows the customized Color Picker handle.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %}
\ No newline at end of file
diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md
index c582a73b22..bef5800132 100644
--- a/blazor/color-picker/how-to/disable-color-picker.md
+++ b/blazor/color-picker/how-to/disable-color-picker.md
@@ -19,6 +19,4 @@ The following example shows the `Disabled` state of Color Picker component.
Choose a color
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %}
\ No newline at end of file
diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md
index 6551caf8aa..6ae424d0dd 100644
--- a/blazor/color-picker/how-to/hide-control-buttons.md
+++ b/blazor/color-picker/how-to/hide-control-buttons.md
@@ -17,6 +17,4 @@ Color Picker can be rendered without control buttons (Apply/Cancel). In this cas
Choose a color
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %}
\ No newline at end of file
diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md
index 045bfe7b00..eaab09d506 100644
--- a/blazor/color-picker/how-to/no-color-support.md
+++ b/blazor/color-picker/how-to/no-color-support.md
@@ -40,9 +40,7 @@ To achieve this, set [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)" %}
>If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property.
@@ -130,6 +128,4 @@ The following sample shows the color palette with custom no color option.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)" %}
diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md
index cdf7b06096..aaff123198 100644
--- a/blazor/color-picker/how-to/render-palette-alone.md
+++ b/blazor/color-picker/how-to/render-palette-alone.md
@@ -19,8 +19,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor
Choose a color
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)" %}
N> To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'.
diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md
index 37e53eff28..595e3c2b5b 100644
--- a/blazor/color-picker/how-to/show-recent-color.md
+++ b/blazor/color-picker/how-to/show-recent-color.md
@@ -21,6 +21,4 @@ In the following sample, the [`ShowRecentColors`](https://help.syncfusion.com/cr
Choose a color
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %}
\ No newline at end of file
diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md
index 3b47afdca5..21cd3e68e6 100644
--- a/blazor/color-picker/inline-rendering.md
+++ b/blazor/color-picker/inline-rendering.md
@@ -20,8 +20,6 @@ The following sample shows the inline type rendering of ColorPicker.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)" %}
N> The `ShowButtons` property is disabled in this sample because the control buttons are not needed for inline type. To know about the control buttons functionality, refer to the [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons).
diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md
index adfc4f3824..ac9f6c95b2 100644
--- a/blazor/color-picker/localization.md
+++ b/blazor/color-picker/localization.md
@@ -29,9 +29,7 @@ You can modify the default value in `.res` file added to Resource folder. Enter
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)" %}
## RTL
@@ -46,6 +44,4 @@ In the following example, Color Picker component is rendered in RTL mode with `a
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %}
\ No newline at end of file
diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md
index 0a3c389f66..df826521e9 100644
--- a/blazor/color-picker/mode-and-value.md
+++ b/blazor/color-picker/mode-and-value.md
@@ -22,9 +22,7 @@ In the following sample, it will render the `Palette` at initial load.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)" %}
## Color value
@@ -39,8 +37,6 @@ In the following sample, the color value is set as `four` digit hex code, the la
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)" %}
N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex code with or without `#` prefix.
diff --git a/blazor/combobox/cascading.md b/blazor/combobox/cascading.md
index 1ea58cd309..85b939ce9c 100644
--- a/blazor/combobox/cascading.md
+++ b/blazor/combobox/cascading.md
@@ -25,9 +25,7 @@ In the following example, when a country is selected in the first ComboBox, the
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLUsVBmKweKQSWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading in Blazor ComboBox](./images/cascading/blazor_combobox_cascading.gif)" %}
## Cascading with other form field
@@ -41,8 +39,6 @@ In the following example, the ComboBox displays a list of countries, and the tex
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthKWhhGKcenJwTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cascading with other form field in Blazor ComboBox](./images/cascading/blazor_combobox_cascading-with-other-form-field.png)" %}
N> [View Sample in Demo](https://blazor.syncfusion.com/demos/combobox/cascading?theme=bootstrap5).
\ No newline at end of file
diff --git a/blazor/combobox/custom-value.md b/blazor/combobox/custom-value.md
index 8db6912063..5b4aeac34d 100644
--- a/blazor/combobox/custom-value.md
+++ b/blazor/combobox/custom-value.md
@@ -11,6 +11,4 @@ documentation: ug
You can add custom value to the ComboBox component. When the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character(s) get added to the existing list as a new item. Default value of [AllowCustom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfComboBox-2.html#Syncfusion_Blazor_DropDowns_SfComboBox_2_AllowCustom) is `true`.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBACVLQKFyiyoKz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with custom value](./images/blazor-combobox-custom-value.png)" %}
\ No newline at end of file
diff --git a/blazor/combobox/data-source.md b/blazor/combobox/data-source.md
index 33f63ac18c..8f8ae07f93 100644
--- a/blazor/combobox/data-source.md
+++ b/blazor/combobox/data-source.md
@@ -72,9 +72,7 @@ In the following example, `Name` column from complex data has been mapped to the
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBKsLLcKnxcdvLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBKsLLcKnxcdvLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor ComboBox Items](./images/blazor-combobox-binding-items.png)" %}
### Array of complex data
@@ -121,9 +119,7 @@ public IEnumerable LocalData { get; set; } = new Complex().GetData();
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqiLVwKHwhTfxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqiLVwKHwhTfxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Complex Items with Blazor ComboBox](./images/blazor-combobox-complex-data.png)" %}
## Binding remote data
@@ -159,9 +155,7 @@ In the following sample, First 6 contacts are displayed from the **Customers** t
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthUChrmAnbDTsys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthUChrmAnbDTsys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Data Binding](./images/blazor-combobox-binding-data.png)" %}
### Web API Adaptor
@@ -188,9 +182,7 @@ Use the `WebApiAdaptor` to bind ComboBox with Web API created using OData.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgiVLwKnloDWBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgiVLwKnloDWBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Web API Data](./images/blazor-combobox-web-api-data.png)" %}
### Custom adaptor
@@ -302,9 +294,7 @@ The following example for remote data binding and enabled offline mode,
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBACrBQKGCrmiJb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBACrBQKGCrmiJb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox in Offline Mode](./images/blazor-combobox-web-api-data.png)" %}
### ValueTuple data binding
@@ -320,9 +310,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrKihrcgcMdJUXG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrKihrcgcMdJUXG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox ValueTuple Data](./images/blazor_combobox_valuetuple.png)" %}
## Binding ExpandoObject
@@ -448,10 +436,7 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBgCBVcAmhLLFOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBgCBVcAmhLLFOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with observable collection data binding](./images/blazor_combobox_observable-collection.png)" %}
## Entity Framework
diff --git a/blazor/combobox/form-validation.md b/blazor/combobox/form-validation.md
index abe30cfd3c..b82824ab2d 100644
--- a/blazor/combobox/form-validation.md
+++ b/blazor/combobox/form-validation.md
@@ -29,6 +29,4 @@ When the ComboBox input is valid, the form is ready to be submitted. If the inpu
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrKWVrGUcRBhJQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox inside editform](./images/form-validation/blazor_combobox_inside-editform.png)" %}
\ No newline at end of file
diff --git a/blazor/combobox/grouping.md b/blazor/combobox/grouping.md
index 61b9ff9d7f..5101ed8d24 100644
--- a/blazor/combobox/grouping.md
+++ b/blazor/combobox/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/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor ComboBox](./images/blazor-combobox-grouping.png)" %}
## Fixed group header
diff --git a/blazor/combobox/how-to/tooltip.md b/blazor/combobox/how-to/tooltip.md
index 268dd29ea1..70245ebd57 100644
--- a/blazor/combobox/how-to/tooltip.md
+++ b/blazor/combobox/how-to/tooltip.md
@@ -64,6 +64,4 @@ The following code demonstrates how to display a tooltip when hovering over the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrqMBVwKYqDMxaA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Combobox displays Tooltip for Dropdown Items](../images/blazor-combobox-tooltip.png)" %}
\ No newline at end of file
diff --git a/blazor/combobox/style.md b/blazor/combobox/style.md
index 7ff0e9e5d1..04131eee28 100644
--- a/blazor/combobox/style.md
+++ b/blazor/combobox/style.md
@@ -21,9 +21,7 @@ Specify the boolean value to the [Readonly](https://help.syncfusion.com/cr/blazo
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVAiBLQUvNGLyuy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVAiBLQUvNGLyuy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Readonly mode](./images/style/blazor_combobox_readonly-mode.png)" %}
## Disabled state
@@ -67,9 +65,7 @@ You can customize the text color of a disabled component by targeting its CSS cl
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Disabled component text color](./images/style/blazor_combobox_disabled-text-color.png)" %}
## Customizing the appearance of container element
@@ -81,9 +77,7 @@ You can customize the appearance of the container element within the ComboBox co
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhqirLQUlXaeBFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhqirLQUlXaeBFy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox container element customization](./images/style/blazor_combobox_appearance-of-container.png)" %}
## Customizing the dropdown icon’s color
@@ -95,9 +89,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrqMBVQKbirhlfh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrqMBVQKbirhlfh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox icon color](./images/style/blazor_combobox_icon-color.png)" %}
## Customizing the focus color
@@ -109,9 +101,7 @@ You can customize the component color when it is focused by targeting its CSS cl
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLUsVhGUFizesmJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLUsVhGUFizesmJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox focus color](./images/style/blazor_combobox_focus-color.png)" %}
## Customizing the outline theme's focus color
@@ -123,9 +113,7 @@ You can customize the color of the combobox component when it is in a focused st
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhqsVBQKFiQpUgc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhqsVBQKFiQpUgc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox focusing color outline theme](./images/style/blazor_combobox_outline-focus-color.png)" %}
## Customizing the background color of focus, hover, and active items
@@ -137,9 +125,7 @@ You can customize the background color and text color of list items within the c
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhKWhLwgPKXzzDZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhKWhLwgPKXzzDZ?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_combobox_background-color.png)" %}
## Customizing the appearance of pop-up element
@@ -151,9 +137,7 @@ You can customize the appearance of the popup element within the combobox compon
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhqiBVmUPKLSlDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhqiBVmUPKLSlDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing popup color](./images/style/blazor_combobox_appearance-of-popup.png)" %}
## Change the HTML attributes
@@ -225,9 +209,7 @@ You can change the text color of the floating label when it is focused by target
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUsLhGgPhWFokH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUsLhGgPhWFokH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with float label focusing color](./images/style/blazor_combobox_floatlabel-focus-color.png)" %}
## Customizing the color of the placeholder text
@@ -239,9 +221,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKMrVQqbhTKwJQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKMrVQqbhTKwJQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with color placeholder](./images/style/blazor_combobox_placeholder-color.png)" %}
## Customizing the placeholder to add mandatory indicator(*)
@@ -253,9 +233,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAsVhmKPrHruAI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAsVhmKPrHruAI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with mandatory indicator placeholder](./images/style/blazor_combobox_placeholder-with-mandatory.png)" %}
## Customizing the text selection color
@@ -267,6 +245,4 @@ The appearance of a selected item within a combobox component can be customized
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKCVBGgPVvrliw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKCVBGgPVvrliw?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_combobox_text-selection-color.png)" %}
\ No newline at end of file
diff --git a/blazor/combobox/templates.md b/blazor/combobox/templates.md
index d89b53bd35..a892086086 100644
--- a/blazor/combobox/templates.md
+++ b/blazor/combobox/templates.md
@@ -27,9 +27,7 @@ In the following sample, each list item is split into two columns to display rel
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVAWhhQgcQzSVPf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVAWhhQgcQzSVPf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with ItemTemplate](./images/blazor-combobox-item-template.png)" %}
## Group template
@@ -43,9 +41,7 @@ In the following sample, employees are grouped according to their country.
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKWBVmqQwncaKF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKWBVmqQwncaKF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with GroupTemplate](./images/blazor-combobox-group-template.png)" %}
## Header template
@@ -59,9 +55,7 @@ In the following sample, the list items and its headers are designed and display
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUsLhwAcwvaAlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUsLhwAcwvaAlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with HeaderTemplate](./images/blazor-combobox-header-template.png)" %}
## Footer template
@@ -75,9 +69,7 @@ In the following sample, footer element displays the total number of list items
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBKWVVwAcviULco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBKWVVwAcviULco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with FooterTemplate](./images/blazor-combobox-footer-template.png)" %}
## No records template
@@ -91,9 +83,7 @@ In the following sample, popup list content displays the notification of no data
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVgWBrwUQlgRDZE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVgWBrwUQlgRDZE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox without Data](./images/blazor-combobox-without-data.png)" %}
## Action failure template
@@ -107,9 +97,7 @@ In the following sample, when the data fetch request fails, the ComboBox display
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUMrrcqQlwxTci?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUMrrcqQlwxTci?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with Action Failure Template](./images/blazor-combobox-action-failure-template.png)" %}
## Combine two fields without Templates
@@ -125,6 +113,4 @@ In the `GameFields` class, the `Name` property is defined with the `get` and `se
{% endhighlight %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLKMLBwAQaWEhfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLKMLBwAQaWEhfL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text with firstName and lastName](./images/templates/blazor_combobox_firstname-lastname.png)" %}
\ No newline at end of file
diff --git a/blazor/combobox/virtualization.md b/blazor/combobox/virtualization.md
index d5b1e302d8..669d677bfd 100644
--- a/blazor/combobox/virtualization.md
+++ b/blazor/combobox/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/rXBgCVBQqlgGofzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBgCVBQqlgGofzc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with virtualization](./images/blazor_combobox_virtualization.gif)" %}
## Remote data
diff --git a/blazor/context-menu/customizing-and-multilevel-nesting.md b/blazor/context-menu/customizing-and-multilevel-nesting.md
index 0e5a41f2ae..ca25ae26f5 100644
--- a/blazor/context-menu/customizing-and-multilevel-nesting.md
+++ b/blazor/context-menu/customizing-and-multilevel-nesting.md
@@ -55,9 +55,7 @@ To customize [Blazor Context Menu](https://www.syncfusion.com/blazor-components/
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVACVVcUYeycxMc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVACVVcUYeycxMc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-items.png)" %}
### Customizing Context Menu items using CssClass
@@ -95,9 +93,7 @@ The Context Menu items can be customized by using the `CssClass` property. In th
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhqMLhwAOylWmij?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhqMLhwAOylWmij?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ContextMenu Items](./images/blazor-contextmenu-item-customization.png)" %}
## Multilevel nesting
@@ -138,6 +134,4 @@ The Multiple level nesting supports in Context Menu. It can be achieved by mappi
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgsrhQganDCPmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgsrhQganDCPmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multilevel Nesting in Blazor ContextMenu](./images/blazor-contextmenu-with-multilevel.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/bind-menu-events.md b/blazor/context-menu/how-to/bind-menu-events.md
index b22179468c..4900c5cd8d 100644
--- a/blazor/context-menu/how-to/bind-menu-events.md
+++ b/blazor/context-menu/how-to/bind-menu-events.md
@@ -48,6 +48,4 @@ To bind the menu event in the context menu [ItemSelected](https://help.syncfusio
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhUCBBcgOQARqgw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhUCBBcgOQARqgw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor ContextMenu Events](./../images/blazor-contextmenu-component.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/change-animation-settings.md b/blazor/context-menu/how-to/change-animation-settings.md
index d41ec5fed8..57d38ccd27 100644
--- a/blazor/context-menu/how-to/change-animation-settings.md
+++ b/blazor/context-menu/how-to/change-animation-settings.md
@@ -48,6 +48,4 @@ The following sample illustrates how to open Context Menu with `FadeIn` effect w
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLAirrwgacxYkyN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLAirrwgacxYkyN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Animation](./../images/blazor-contextmenu-component.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/data-binding.md b/blazor/context-menu/how-to/data-binding.md
index 78d74bbae5..83f135bc72 100644
--- a/blazor/context-menu/how-to/data-binding.md
+++ b/blazor/context-menu/how-to/data-binding.md
@@ -51,6 +51,4 @@ To bind local data source to the Context Menu, menu items are populated from dat
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLAWhrcKOGPagPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLAWhrcKOGPagPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor ContextMenu](./../images/blazor-contextmenu-databinding.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
index 261a670044..aaa83ff52a 100644
--- a/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
+++ b/blazor/context-menu/how-to/enable-or-disable-context-menu-items.md
@@ -63,8 +63,6 @@ In the following example, the **Display Settings** in parent items is disabled d
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUiVVGAalMSCbE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUiVVGAalMSCbE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Items in Blazor ContextMenu](./../images/blazor-contextmenu-enable-disable-item.png)" %}
N> To disable sub menu items, use the `OnOpen` event.
diff --git a/blazor/context-menu/how-to/open-and-close-context-menu.md b/blazor/context-menu/how-to/open-and-close-context-menu.md
index 82c8e246da..79394579b4 100644
--- a/blazor/context-menu/how-to/open-and-close-context-menu.md
+++ b/blazor/context-menu/how-to/open-and-close-context-menu.md
@@ -38,6 +38,4 @@ To manually close the Context Menu, [Close](https://help.syncfusion.com/cr/blazo
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrUMLrGUuEEhxVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrUMLrGUuEEhxVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu displays Dialog Menu](./../images/blazor-contextmenu-dialog.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/open-context-menu-click.md b/blazor/context-menu/how-to/open-context-menu-click.md
index b654a6968a..62a89bd576 100644
--- a/blazor/context-menu/how-to/open-context-menu-click.md
+++ b/blazor/context-menu/how-to/open-context-menu-click.md
@@ -48,6 +48,4 @@ In the following sample, Sub Menu will open while clicking `Save` item.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBUiLLwAuYIrlKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBUiLLwAuYIrlKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/contextmenu-submenu.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/how-to/open-dialog.md b/blazor/context-menu/how-to/open-dialog.md
index f87ab0df50..dc0f293b7d 100644
--- a/blazor/context-menu/how-to/open-dialog.md
+++ b/blazor/context-menu/how-to/open-dialog.md
@@ -65,6 +65,4 @@ In the following sample, Dialog will open while clicking `Save As...` item.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LthUWrrGqYuNWlPV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthUWrrGqYuNWlPV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu](./../images/blazor-contextmenu.png)" %}
\ No newline at end of file
diff --git a/blazor/context-menu/icons-and-navigations.md b/blazor/context-menu/icons-and-navigations.md
index a92784f554..983001b789 100644
--- a/blazor/context-menu/icons-and-navigations.md
+++ b/blazor/context-menu/icons-and-navigations.md
@@ -48,9 +48,7 @@ The [Blazor Context Menu](https://www.syncfusion.com/blazor-components/blazor-co
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUsBrmqknfsARd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUsBrmqknfsARd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ContextMenu with Icon](./images/blazor-contextmenu-icon.png)" %}
N> The Context Menu provides a set of [icons](https://blazor.syncfusion.com/documentation/appearance/icons) that can be loaded by applying `e-icons` class name to the element.
You can also use third party icons on the Context Menu using the `IconCss`property.
@@ -85,6 +83,4 @@ Navigation in Context Menu is used to navigate to the other web page when menu i
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVACrLGKuddWNNk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVACrLGKuddWNNk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Navigation in Blazor ContextMenu](./images/blazor-contextmenu-navigation.png)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
index d556f12fde..f250668821 100644
--- a/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md
@@ -44,13 +44,12 @@ N> By default, the entire panel acts as the draggable handle, meaning a dragging
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
The sample above demonstrates both dragging and the automatic pushing of panels. For instance, when panel 0 is dragged over panel 1, they collide, and panel 1 is pushed to a feasible direction, allowing panel 0 to occupy its new position.
The following output illustrates the dragging functionality of the dashboard component:
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMsigAIcgTaPQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-and-drop.gif)" %}
## Customizing the Drag Handle
@@ -89,8 +88,7 @@ The draggable handle for panels can be customized using the [`DraggableHandle`](
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVyjoVZzbiwbNQP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section.
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLyiMsUAeyvtIeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5 backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.gif)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
index 2555246dfd..b9d3c785a2 100644
--- a/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md
@@ -41,6 +41,4 @@ The DashboardLayout component includes a panel floating functionality controlled
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUCVrcTKrdWwSb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBUCVrcTKrdWwSb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
index 979d433ff4..9847d99668 100644
--- a/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
+++ b/blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md
@@ -41,8 +41,6 @@ The Dashboard Layout component provides panel resizing functionality, which can
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVAsBVwTABPvxgH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
N> Initially, the panels can be resized only in south-east direction. However, panels can also be resized in east, west, north, south, and south-west directions by defining the required directions with the [`ResizableHandles`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_ResizableHandles) property.
\ No newline at end of file
diff --git a/blazor/dashboard-layout/panels/position-sizing-of-panels.md b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
index 3e4cc1a07a..c89fac426a 100644
--- a/blazor/dashboard-layout/panels/position-sizing-of-panels.md
+++ b/blazor/dashboard-layout/panels/position-sizing-of-panels.md
@@ -68,11 +68,9 @@ Panels within the layout can be precisely positioned and ordered using the [`Row
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
The following screenshot illustrates panel positioning within the Dashboard Layout, utilizing the `Row` and `Column` properties:
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgMhrwzVWhKSrw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.png)" %}
## Sizing of Panels
@@ -119,8 +117,6 @@ These properties are invaluable when designing dashboards where the content and
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties:
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLhcprCIqVxL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.png)" %}
\ No newline at end of file
diff --git a/blazor/dashboard-layout/panels/setting-header-of-panels.md b/blazor/dashboard-layout/panels/setting-header-of-panels.md
index ecf319681d..255134dea5 100644
--- a/blazor/dashboard-layout/panels/setting-header-of-panels.md
+++ b/blazor/dashboard-layout/panels/setting-header-of-panels.md
@@ -51,8 +51,6 @@ The Blazor Dashboard Layout component utilizes two primary templates for renderi
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels:
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLAMVLGpBoyKHBy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Header.](images/blazor-admin-template-layout-with-header.png)" %}
diff --git a/blazor/dashboard-layout/responsive-adaptive.md b/blazor/dashboard-layout/responsive-adaptive.md
index 508afe4d70..94c95b122d 100644
--- a/blazor/dashboard-layout/responsive-adaptive.md
+++ b/blazor/dashboard-layout/responsive-adaptive.md
@@ -43,8 +43,6 @@ The Dashboard Layout is designed to adapt to lower resolutions by transforming i
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsLBmpAKBpXmY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsLBmpAKBpXmY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.png)" %}
The sample above demonstrates the usage of the `MediaQuery` property to transform the layout into a stacked view at a user-defined resolution. Here, when the window size reaches 700px or less, the layout automatically switches to a stacked arrangement.
\ No newline at end of file
diff --git a/blazor/dashboard-layout/setting-size-of-cells.md b/blazor/dashboard-layout/setting-size-of-cells.md
index 6cce416db6..f3fa10d498 100644
--- a/blazor/dashboard-layout/setting-size-of-cells.md
+++ b/blazor/dashboard-layout/setting-size-of-cells.md
@@ -50,13 +50,11 @@ The size of individual grid cells can be modified to suit your design requiremen
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrUMrBmpWKQAbtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
In the sample above, the width of the parent element is divided into five equal cells based on the [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) property value. The `CellAspectRatio` is set to `2`, meaning for every 100px of cell width, the height will be 50px (width / height = 2).
The following output demonstrates the effect of setting [`CellAspectRatio`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_CellAspectRatio) and [`Columns`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Layouts.SfDashboardLayout.html#Syncfusion_Blazor_Layouts_SfDashboardLayout_Columns) properties in the Dashboard Layout:
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrUMrBmpWKQAbtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.png)" %}
## Setting Cell Spacing
@@ -92,11 +90,9 @@ The spacing between individual panels in both rows and columns can be defined us
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLKMBhQpMKkevti?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
The following output demonstrates the clear representation of data achieved by setting the `CellSpacing` property in the Dashboard Layout component:
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLKMBhQpMKkevti?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.png)" %}
## Graphical Representation of Grid Layout
@@ -132,8 +128,6 @@ The underlying grid structure of the Dashboard Layout is initially hidden. This
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKMhBQzsTMyoHg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
The following output illustrates the visible gridlines, indicating the cell division of the layout, with data containers (panels) placed over these cells:
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKMhBQzsTMyoHg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.png)" %}
\ No newline at end of file
diff --git a/blazor/datagrid/column-chooser.md b/blazor/datagrid/column-chooser.md
index 3c88e61ce4..a69500a479 100644
--- a/blazor/datagrid/column-chooser.md
+++ b/blazor/datagrid/column-chooser.md
@@ -615,9 +615,7 @@ namespace Model
> * You can build reusable custom component based on your customization need as like above code example.
> * In the above example, [ListView](https://blazor.syncfusion.com/documentation/listview/getting-started) is used as custom component in the content template to show/hide columns.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLJiLVTWKyyPjml?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column chooser content template in Blazor DataGrid.](images/blazor-datagrid-column-chooser-content-template.png)" %}
### Customize the footer of column chooser
diff --git a/blazor/datagrid/data-annotation.md b/blazor/datagrid/data-annotation.md
index ac90524b35..c71723351a 100644
--- a/blazor/datagrid/data-annotation.md
+++ b/blazor/datagrid/data-annotation.md
@@ -150,11 +150,9 @@ 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/LthIZotuimdZMRyd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Annotation in Grid](./images/blazor-datagrid-data-annotation.png)" %}
> 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.
diff --git a/blazor/datagrid/data-binding/local-data.md b/blazor/datagrid/data-binding/local-data.md
index 365a0e1e1e..396a18f8e9 100644
--- a/blazor/datagrid/data-binding/local-data.md
+++ b/blazor/datagrid/data-binding/local-data.md
@@ -1210,9 +1210,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Datasource Dynamically in Blazor DataGrid](../images/blazor-datagrid-dynamic-datasource.gif)" %}
## Data binding with SignalR
diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md
index 828ef4c7cf..e17e07fb61 100644
--- a/blazor/datagrid/editing.md
+++ b/blazor/datagrid/editing.md
@@ -1344,9 +1344,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBytoiqfIIReUci?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBytoiqfIIReUci?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Using external form](./images/blazor-datagrid-editing-form.gif)" %}
## Troubleshoot editing works only for first row
diff --git a/blazor/datagrid/excel-like-filter.md b/blazor/datagrid/excel-like-filter.md
index 4a824f61eb..19ee8f4719 100644
--- a/blazor/datagrid/excel-like-filter.md
+++ b/blazor/datagrid/excel-like-filter.md
@@ -840,8 +840,6 @@ By default, the CheckBox/Excel filter can only filter the selected items. If fil
The following image describes the above mentioned behavior.
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNLDBsuTLPqvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Add current selection to filter in Blazor DataGrid.](./images/blazor-datagrid-add-current-selection-to-filter.png)" %}
N> 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=bootstrap4) to understand how to present and manipulate data.
\ No newline at end of file
diff --git a/blazor/datagrid/filter-menu.md b/blazor/datagrid/filter-menu.md
index 0d6d6d5c38..ab4cc7d45d 100644
--- a/blazor/datagrid/filter-menu.md
+++ b/blazor/datagrid/filter-menu.md
@@ -187,7 +187,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrTDsVFcbVkxSol?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
**Default filter input for OrderID column**
@@ -195,7 +195,7 @@ public class OrderData
**Custom dropdown filter for OrderID column**
-
+backgroundimage "[Custom dropdown filter for OrderID column.](images/blazor-custom-dropdown-filter-datagrid.gif)
## Show 24 hours time format in filter dialog
diff --git a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
index 6032961283..1b07f16036 100644
--- a/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
+++ b/blazor/datagrid/how-to/blazor-webassembly-data-grid-using-cli.md
@@ -200,9 +200,7 @@ dotnet run
Once the app starts, navigate to `http://localhost:` in your browser to view the Grid.
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](../images/blazor-datagrid-component.png)" %}
### Defining row data
@@ -664,9 +662,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoZosUMRYBBVqA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoZosUMRYBBVqA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](../images/blazor-datagrid.gif)" %}
> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/How-to-Getting-Started-Blazor-DataGrid-Samples/tree/master/BlazorApp).
diff --git a/blazor/datagrid/how-to/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md
index f8441cd612..df373c813d 100644
--- a/blazor/datagrid/how-to/server-side-using-cli.md
+++ b/blazor/datagrid/how-to/server-side-using-cli.md
@@ -183,9 +183,7 @@ dotnet run
{% endhighlight %}
{% endtabs %}
-
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](../images/blazor-datagrid-component.png)" %}
### Defining row data
@@ -648,9 +646,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoZosUMRYBBVqA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoZosUMRYBBVqA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](../images/blazor-datagrid.gif)" %}
> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/How-to-Getting-Started-Blazor-DataGrid-Samples/tree/master/BlazorServerApp).
diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md
index bb484afd09..410baf7d7f 100644
--- a/blazor/datagrid/template-pdf-export.md
+++ b/blazor/datagrid/template-pdf-export.md
@@ -132,9 +132,7 @@ public class EmployeeData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVItzhpzpJHfBYo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVItzhpzpJHfBYo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with column template](./images/exporting-pdf-column-template.gif)" %}
## Exporting with group caption template
@@ -242,9 +240,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVyjfMHqkQMUKqH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVyjfMHqkQMUKqH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with group caption template](./images/exporting-pdf-group-caption-template.gif)" %}
## Exporting with detail template
@@ -533,9 +529,7 @@ public class ProductData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVSNTCGsQlftohG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVSNTCGsQlftohG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with detail template](./images/exporting-pdf-detail-template.gif)" %}
> If [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_ColumnCount) is not provided or is less than the number of cells in the first row of Headers/Rows, the columns in the detail row of the PDF Grid will be generated based on the count of cells in the first row of Headers/Rows.
@@ -815,6 +809,4 @@ public class OrderDetails
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtByZTscrNDihvvB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtByZTscrNDihvvB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting hierarchical Grid using detail template](./images/exporting-pdf-hierachy-grid.gif)" %}
\ No newline at end of file
diff --git a/blazor/datagrid/templates-excel-export.md b/blazor/datagrid/templates-excel-export.md
index e37324b3b7..94fd4e3a65 100644
--- a/blazor/datagrid/templates-excel-export.md
+++ b/blazor/datagrid/templates-excel-export.md
@@ -130,9 +130,7 @@ public class EmployeeData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVeZpinSuMCxdjJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVeZpinSuMCxdjJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with column template](./images/column-template.gif)" %}
## Exporting with group caption template
@@ -242,9 +240,7 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVejJMmrqlNTnoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVejJMmrqlNTnoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with group caption template](./images/group-caption.gif)" %}
## Exporting with detail template
@@ -572,9 +568,7 @@ public class ProductData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSNfWcLSCKHChU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSNfWcLSCKHChU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting with detail template](./images/detail-template.gif)" %}
## Exporting hierarchical Grid using detail template
@@ -864,6 +858,4 @@ public class OrderDetails
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBytpWQhgOCVmqd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBytpWQhgOCVmqd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Exporting hierarchical Grid using detail template](./images/hierarchical-detail-template.gif)" %}
\ No newline at end of file