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
diff --git a/blazor/diagram/connectors/connectors.md b/blazor/diagram/connectors/connectors.md
index cc25d3dfbe..b0939a0f2b 100644
--- a/blazor/diagram/connectors/connectors.md
+++ b/blazor/diagram/connectors/connectors.md
@@ -53,11 +53,9 @@ The following code example illustrates how to add a connector through the connec
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoMNtRKRqMWtbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/AddConnectorThroughConnectorCollection).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoMNtRKRqMWtbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Connector](../images/blazor-diagram-connector.png)" %}
>**Note:**
> * The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) of each connector should be unique so it is further used to find the connector at runtime and perform any customization.
@@ -153,10 +151,10 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVSCZtHgnwMnRkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/CloneConnector)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVSCZtHgnwMnRkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Cloning a connector in Blazor Diagram](../images/CloneConnector.gif)" %}
+
## How to Add a Connector with Annotations at Runtime
Add a connector with annotations at runtime in the diagram component by using the [AddDiagramElementsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_AddDiagramElementsAsync_Syncfusion_Blazor_Diagram_DiagramObjectCollection_Syncfusion_Blazor_Diagram_NodeBase__) method.
@@ -293,11 +291,9 @@ Connectors can be predefined and added to the symbol palette. Then, drag and dro
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSijDHAnuQEcxN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/ConnectorFromPalette)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSijDHAnuQEcxN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Dragging connectors from the symbol palette into the diagram in Blazor](../images/blazor-diagram-connector-from-palette.gif)" %}
## How to Draw Connectors Using the Drawing Object
@@ -491,11 +487,9 @@ The following code example illustrates how to connect two nodes.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIsZZHKcMbFFXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/ConnectWithNode).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIsZZHKcMbFFXS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Connection between Nodes in Blazor Diagram](../images/blazor-diagram-node-to-node-connection.png)" %}
* Removing [NodeConstraints.InConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_InConnect) from Default, the node accepts only an outgoing connection to dock in it. Similarly, when you remove [NodeConstraints.OutConnect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeConstraints.html#Syncfusion_Blazor_Diagram_NodeConstraints_OutConnect) from Default, the node accepts only an incoming connection to dock in it.
@@ -597,11 +591,9 @@ The following code example illustrates how to create port to port connections.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htByCjDRKwBxkAkt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/ActionofConnectors/ConnectWithPort).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htByCjDRKwBxkAkt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connecting two nodes using specific ports in Blazor Diagram](../images/blazor-diagram-port-to-port-connection.png)" %}
* Set [PortConstraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.PortConstraints.html) to **InConnect**, to accept only incoming connection to dock in it. Similarly, Set PortConstraints to **OutConnect**, to accept only an outgoing connection to dock in it.
* Setting **None**, the port restricts connectors from establishing a connection to the port.
diff --git a/blazor/diagram/connectors/customization.md b/blazor/diagram/connectors/customization.md
index af810e6c2a..9a45c47a92 100644
--- a/blazor/diagram/connectors/customization.md
+++ b/blazor/diagram/connectors/customization.md
@@ -141,11 +141,9 @@ The following code example illustrates how to customize the decorator appearance
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiZNHqcgvBDIK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/DecoratorAppearance)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiZNHqcgvBDIK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with customized decorators in Blazor Diagram](../images/blazor-diagram-decorator.png)" %}
## How to Set Padding for Connector
@@ -219,11 +217,9 @@ Padding adds space between the connector’s end point and the object to where i
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVeWZtdqQzoBYft?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Padding)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVeWZtdqQzoBYft?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector demonstrating source and target padding in Blazor Diagram](../images/blazor-diagram-connector-padding.png)" %}
## How to Enable Bridging
@@ -316,8 +312,6 @@ The following code example illustrates how to enable line bridging.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLoiDNdqGSjrURl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/Bridging)
>**Note:** Bridging support is not applicable for layout.
@@ -326,7 +320,7 @@ The [BridgeSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support bridging.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLoiDNdqGSjrURl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Connector with Line Bridge](../images/blazor-diagram-connector-with-bridging.png)" %}
## How to Update Corner Radius for Connector
@@ -381,13 +375,11 @@ Corner radius rounds the corners of connectors. Set the radius using the [Corner
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoCjXHAGooRosb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/CornerRadius)
Limitation: [BezierSegment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html) does not support corner radius.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoCjXHAGooRosb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Connector with Corner Radius](../images/blazor-diagram-connector-with-corner-radious.png)" %}
## How to Customize Connector Appearance
@@ -839,11 +831,9 @@ The following code illustrates how to enable connector splitting and create conn
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSsNXnqvDymRvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Interaction)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVSsNXnqvDymRvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ConnectorSplitting](../images/ConnectorSplitDemo.gif)" %}
>**Note:** Enable [AllowDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_AllowDrop) in the connector constraints to allow dropping a node.
@@ -899,11 +889,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSMXDnAFShGTba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Customization/MaxSegmentThumb).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSMXDnAFShGTba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[MaxSegmentThumbs](../images/MaxSegmentThumb.png)" %}
The following example demonstrates how to update the `MaxSegmentThumbs` value at runtime for both selected connectors and all connectors in the diagram.
diff --git a/blazor/diagram/connectors/interactions.md b/blazor/diagram/connectors/interactions.md
index 6fd3a86313..b2562b6ead 100644
--- a/blazor/diagram/connectors/interactions.md
+++ b/blazor/diagram/connectors/interactions.md
@@ -152,8 +152,6 @@ A connector can be programmatically moved at runtime by using the [Drag](https:/
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyCDNdJVFmTCOP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/Drag)
Connectors can also be dragged through user interaction:
@@ -161,7 +159,7 @@ Connectors can also be dragged through user interaction:
* Drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements move all the selected elements.
* While dragging, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events are triggered and allow customization in these events.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyCDNdJVFmTCOP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Dragging Connector in Blazor Diagram](../images/blazor-diagram-drag-connector.gif)" %}
## How to Drag Connector Endpoints
@@ -217,11 +215,9 @@ The connector can be selected by clicking it. When the connector is selected, ci
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhyWjXRfLkUypIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/EndPointDragging)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhyWjXRfLkUypIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Dragging Connector End Point in Blazor Diagram](../images/blazor-diagram-drag-connector-end-point.gif)" %}
## How to Route the Connectors
@@ -262,11 +258,9 @@ Routing is the process of adjusting the geometry of connectors to prevent them f
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIsXtHpUjXzHNh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/DefaultRouting).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLIsXtHpUjXzHNh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Connector Routing](../images/blazor-diagram-connector-routing.gif)" %}
**Note:** Routing is applicable only for orthogonal connectors.
@@ -424,11 +418,9 @@ By default, connectors treat all nodes as obstacles, causing connections to navi
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBostDnzqiRDGEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/NodeRoutingObstable).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBostDnzqiRDGEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram RoutingObstacle for Node](../images/NodeRoutingObstable.png)" %}
### How to Enable or Disable Connector Routing
@@ -500,11 +492,9 @@ By default, connector routing behavior is inherited based on the value of the di
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeCtZRJgLXPLPR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Interaction/RoutingConstraints).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeCtZRJgLXPLPR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Routing for Connector](../images/ConnectorRoutingConstraints.png)" %}
### How to Define Distance Between Nodes and Connectors
diff --git a/blazor/diagram/connectors/segments/bezier/bezier.md b/blazor/diagram/connectors/segments/bezier/bezier.md
index 1c5b351beb..f698e1a77f 100644
--- a/blazor/diagram/connectors/segments/bezier/bezier.md
+++ b/blazor/diagram/connectors/segments/bezier/bezier.md
@@ -53,11 +53,9 @@ Bezier segments are used to create curved connectors. The curve can be configure
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreiNjHgpdAoFCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNreiNjHgpdAoFCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment in Blazor Diagram](../../../images/blazor-diagram-connector-with-bezier.png)" %}
[Point1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html#Syncfusion_Blazor_Diagram_BezierSegment_Point1) and [Point2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html#Syncfusion_Blazor_Diagram_BezierSegment_Point2) configure the control points of the Bezier connector.
The [vector1](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html#Syncfusion_Blazor_Diagram_BezierSegment_Vector1) and [Vector2](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.BezierSegment.html#Syncfusion_Blazor_Diagram_BezierSegment_Vector2) properties define the length and angle between the source point and target point, respectively. The following code example illustrates how to use these properties.
@@ -265,11 +263,9 @@ Also, if you provide segments during the initial rendering, the segment collecti
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBSCDNnASCfNrtt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBSCDNnASCfNrtt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Avoid overlapping with bezier](../../../images/bezierOverlap.png)" %}
## How to Customize Bezier Segment Thumb Shape
@@ -334,11 +330,9 @@ The following code example illustrates how to create a customized bezier segment
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXryMtZnKysOPiqb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/BezierSegmentShape).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXryMtZnKysOPiqb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape.png)" %}
The following code example illustrates how to create a customized bezier segment thumb shape without using the `InheritSegmentThumbShape` constraints.
@@ -376,11 +370,9 @@ The following code example illustrates how to create a customized bezier segment
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSMZtdUyrTVzDj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Bezier/SegmentShape).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSMZtdUyrTVzDj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Bezier Segment Shape and Style in Blazor Diagram](../../../images/BezierSegmentShape1.png)" %}
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the `InheritSegmentThumbShape` constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.
\ No newline at end of file
diff --git a/blazor/diagram/connectors/segments/multiplesegments.md b/blazor/diagram/connectors/segments/multiplesegments.md
index 4458c608af..f39dedfb87 100644
--- a/blazor/diagram/connectors/segments/multiplesegments.md
+++ b/blazor/diagram/connectors/segments/multiplesegments.md
@@ -58,11 +58,9 @@ Connectors can include a sequence of segment objects. To create a connector with
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMXDnKoKLrXqe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/MultipleSegments)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMXDnKoKLrXqe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram with Multiple Segment](../../images/blazor-diagram-multiple-segment.png)" %}
* Similarly, you can create multiple segments for all the connector type.
diff --git a/blazor/diagram/connectors/segments/orthogonal.md b/blazor/diagram/connectors/segments/orthogonal.md
index 0b1f4881dd..c2863cf1ae 100644
--- a/blazor/diagram/connectors/segments/orthogonal.md
+++ b/blazor/diagram/connectors/segments/orthogonal.md
@@ -53,11 +53,9 @@ documentation: ug
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZroijZnUeUFxqCq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Orthogonal)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZroijZnUeUFxqCq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Orthogonal Segment in Blazor Diagram](../../images/blazor-diagram-connector-with-orthogonal.png)" %}
The [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Length) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.OrthogonalSegment.html#Syncfusion_Blazor_Diagram_OrthogonalSegment_Direction) properties allow you to define the flow and length of the segment. The following code example illustrates how to create customized orthogonal segments.
@@ -156,11 +154,9 @@ N> Ensure the connector type and each segment type are both set to **Orthogonal*
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijXxgIHDFceR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalSegmentEditing)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLIijXxgIHDFceR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal connector segment in Blazor Diagram](../../images/blazor-diagram-edit-orthogonal-segment.gif)" %}
## How to Customize Orthogonal Segment Thumb Shape
@@ -212,11 +208,9 @@ The following code example illustrates how to customize the orthogonal segment t
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSMNXRqeQwfDfv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbShape).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhSMNXRqeQwfDfv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings.png)" %}
When the `InheritSegmentThumbShape` constraint is enabled in the connector, the shape specified at the diagram level will be applied to the connector's segment thumb. This allows for consistent segment thumb shapes across the diagram.
@@ -245,11 +239,9 @@ The following code example illustrates how to customize the orthogonal segment t
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVoMjNdUevUbNDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/OrthogonalThumbSetting)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVoMjNdUevUbNDK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Orthogonal Segment in Blazor Diagram](../../images/OrthogonalThumbSettings1.png)" %}
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the `InheritSegmentThumbShape` constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.
diff --git a/blazor/diagram/connectors/segments/straight.md b/blazor/diagram/connectors/segments/straight.md
index 951dea63f9..9237457372 100644
--- a/blazor/diagram/connectors/segments/straight.md
+++ b/blazor/diagram/connectors/segments/straight.md
@@ -98,11 +98,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyiXjRAxXrpBqh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/StraightSegmentEditing)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyiXjRAxXrpBqh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Editing Straight Segment in Blazor Diagram](../../images/blazor-diagram-edit-straight-segment.gif)" %}
## How to Customize Straight Segment Thumb Shape
@@ -164,11 +162,9 @@ The following code example illustrates how to create a customized straight segme
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryWNXdAHtbHWYN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Straight/StraightSegmentShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryWNXdAHtbHWYN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with straight segment thumb shape and style in Blazor Diagram](../../images/StraightSegmentShape.png)" %}
The following code example illustrates how to create a customized straight segment thumb shape without using the `InheritSegmentThumbShape` constraints.
@@ -205,11 +201,9 @@ The following code example illustrates how to create a customized straight segme
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhoiNtnUHWzxrCh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Connectors/Segments/Straight/SegmentShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhoiNtnUHWzxrCh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector with Straight Segment Shape and Style in Blazor Diagram](../../images/StraightSegmentShape1.png)" %}
>Note: This feature ensures that the shape is updated regardless of whether the [InheritSegmentThumbShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_InheritSegmentThumbShape) enum value is added to the [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Connector.html#Syncfusion_Blazor_Diagram_Connector_Constraints) property of the diagram. If you apply the `InheritSegmentThumbShape` constraints, the shape will be updated at the diagram level. Without these constraints, the shape will be updated at the connector level.
To make the shapes visible, ensure that the [DragSegmentThumb](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ConnectorConstraints.html#Syncfusion_Blazor_Diagram_ConnectorConstraints_DragSegmentThumb) enum is added to the connector's constraints.
diff --git a/blazor/diagram/flip.md b/blazor/diagram/flip.md
index 4913df6b7a..b38c7d0b97 100644
--- a/blazor/diagram/flip.md
+++ b/blazor/diagram/flip.md
@@ -556,7 +556,6 @@ The following code example shows how to flip the connector.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiDXPgupyReCL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
| FlipDirection | Output|
| -------- | -------- |
@@ -564,6 +563,6 @@ The following code example shows how to flip the connector.
|Vertical||
|Both||
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiDXPgupyReCL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Flip Connector](./images/blazor-diagram-connector-flip-direction.gif)" %}
For more information about node interaction, refer to [Connector Interaction](./connectors/interactions).
diff --git a/blazor/diagram/grid-lines.md b/blazor/diagram/grid-lines.md
index 8eff476a12..267a6dd9bc 100644
--- a/blazor/diagram/grid-lines.md
+++ b/blazor/diagram/grid-lines.md
@@ -51,11 +51,9 @@ The [Constraints](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VthoitNvgOEsjvmF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomGridline)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VthoitNvgOEsjvmF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[GridLines in Blazor Diagram](images/blazor-diagram-gridlines.png)" %}
To show only horizontal or vertical gridlines, or to hide gridlines, refer to [SnapConstraints](constraints#snap-constraints).
@@ -114,12 +112,10 @@ The appearance of the grid lines can be changed into dots by using the [GridType
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeCjDFUEuuwDSA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/CustomizeGridline)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLeCjDFUEuuwDSA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Dot Grid in Blazor Diagram](images/blazor-diagram-dot-grid.png)" %}
-
## How to Customize Line Intervals
@@ -149,12 +145,10 @@ The following code example illustrates how to customize the thickness of lines a
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDByMjjlTDjqLjhz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/LineInterval)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDByMjjlTDjqLjhz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram with Custom Thickness of GridLines](images/blazor-diagram-custom-gridlines-thickness.png)" %}
## Snapping
@@ -191,12 +185,10 @@ Snapping to gridlines can be enabled or disabled with the [SnapConstraints](http
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIsZtFpZDwzFgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapToLines)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLIsZtFpZDwzFgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Snapping to GridLines in Blazor Diagram](images/blazor-diagram-snap-to-gridlines.gif)" %}
### How to Customize Snap Intervals
@@ -292,12 +284,10 @@ The snap to object provides visual cues to assist with aligning and spacing diag
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeWZtPJtixDcGj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapToObject)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeWZtPJtixDcGj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[GuideLines in Blazor Diagram](images/blazor-diagram-guidelines.gif)" %}
### How to Customize Snap Line Style
@@ -341,9 +331,7 @@ The following code example illustrates how to customize the snap line style.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSiXZbfDrShrCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Gridlines/SnapLineStyle)
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVSiXZbfDrShrCg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[GuideLines in Blazor Diagram](images/SnapLineStyle.png)" %}
\ No newline at end of file
diff --git a/blazor/diagram/group.md b/blazor/diagram/group.md
index 31a79ed893..f12a748a05 100644
--- a/blazor/diagram/group.md
+++ b/blazor/diagram/group.md
@@ -100,10 +100,9 @@ To create a group using Nodes and Connectors in the Blazor Diagram, refer to the
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeWZjlTtUfyBOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CreateGroup)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLeWZjlTtUfyBOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Diagram](images/blazor-diagram-grouping.png)" %}
The following code illustrates how to ungroup at runtime.
@@ -259,11 +258,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVeCDNPfjyioMFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CloneNodeGroup)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVeCDNPfjyioMFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Diagram](images/CloneGroup.gif)" %}
### How to Add Padding to a Node Group
@@ -324,11 +321,9 @@ The following code illustrates how to add padding to a node group.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryCDZlzjyxnaIR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Group/CreateGroup)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjryCDZlzjyxnaIR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Padding in Blazor Diagram](images/GroupPadding.png)" %}
## How to Add a Node Group at Runtime
diff --git a/blazor/diagram/layout/automatic-layout.md b/blazor/diagram/layout/automatic-layout.md
index c171a38a47..70f6137c19 100644
--- a/blazor/diagram/layout/automatic-layout.md
+++ b/blazor/diagram/layout/automatic-layout.md
@@ -86,11 +86,9 @@ The following code illustrates how to configure an automatic layout:
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLyCtNnJqIyRajV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/BasicLayout)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLyCtNnJqIyRajV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram hierarchical layout example](../images/BasicLayout.png)" %}
## How to Update Layout
diff --git a/blazor/diagram/layout/complex-hierarchical-layout.md b/blazor/diagram/layout/complex-hierarchical-layout.md
index b43adff391..b031599463 100644
--- a/blazor/diagram/layout/complex-hierarchical-layout.md
+++ b/blazor/diagram/layout/complex-hierarchical-layout.md
@@ -73,11 +73,9 @@ The complex hierarchical tree layout arranges nodes in a tree-like structure in
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheCZtRzgdyOSbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/ComplexHierarchicalTree)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheCZtRzgdyOSbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor complex hierarchical layout with multi-parent support](../images/blazor-diagram-complex.png)" %}
### How to Enable or Disable Line Distribution
@@ -148,11 +146,9 @@ The following code example shows how to create a complex hierarchical tree with
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIWNtHfKwJNZDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/LineDistribution)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIWNtHfKwJNZDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor complex hierarchical layout with SamePoint disabled](../images/blazor-diagram-samepoint.png) %}
>**Note:** In `DataSourceSettings`, the type of the `ID` and `ParentID` properties are **string**. The provided `DataSource` should have a parent-child relationship. It is necessary for at least one node to have an empty `ParentID`.
@@ -221,11 +217,9 @@ The following code illustrates how to arrange the nodes in a non linear manner.
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrSCXNxzKPCTjys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/LinearArrangementNonLinear)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrSCXNxzKPCTjys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor complex hierarchical layout with nonlinear child arrangemen](../images/blazor-diagram-non-linear.png)" %}
The following code illustrates how to arrange the nodes in linear manner by enabling linear arrangement.
@@ -289,8 +283,6 @@ The following code illustrates how to arrange the nodes in linear manner by ena
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBICjjHfqEiCuMb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/LinearArrangementLinear)
-
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBICjjHfqEiCuMb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor complex hierarchical layout with linear child arrangement](../images/blazor-diagram-lineararrangement.png)" %}
\ No newline at end of file
diff --git a/blazor/diagram/layout/flowchart-layout.md b/blazor/diagram/layout/flowchart-layout.md
index cf2ca92092..b896583abe 100644
--- a/blazor/diagram/layout/flowchart-layout.md
+++ b/blazor/diagram/layout/flowchart-layout.md
@@ -206,11 +206,9 @@ Different flowchart symbols have different meanings that are used to represent v
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVeWjNHTJDuhNZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
>**Note:** When rendering a flowchart layout using a data source, connector labels must be applied manually in the [DataLoaded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_DataLoaded) event.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVeWjNHTJDuhNZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor flowchart layout rendered from data source](../images/Flowchart_Layout.png)" %}
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/FlowchartLayout).
@@ -420,11 +418,9 @@ Any text value can be given as a connector text to describe the flow. Also, any
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDroWjZHzziHpvRD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/FlowchartLayout/CustomYesOrNoBranch).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDroWjZHzziHpvRD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor flowchart layout with custom Yes/No branch values](../images/Flowchart_CustomYesOrNoBranches.png)" %}
## How to Update Spacing Between Nodes
diff --git a/blazor/diagram/layout/hierarchical-layout.md b/blazor/diagram/layout/hierarchical-layout.md
index f3ec7631c0..475f39d5d9 100644
--- a/blazor/diagram/layout/hierarchical-layout.md
+++ b/blazor/diagram/layout/hierarchical-layout.md
@@ -75,11 +75,9 @@ The hierarchical tree layout arranges nodes in a tree-like structure, where the
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBICjDdzpLQdEPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/HeirarchicalLayout)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBICjDdzpLQdEPv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor hierarchical layout with manually defined nodes and connectors](../images/blazor-hierarchical-diagram.png)" %}
A hierarchical layout can also be created from a data source. The following example demonstrates how to render a hierarchical layout using DataSource.
diff --git a/blazor/diagram/layout/mind-map.md b/blazor/diagram/layout/mind-map.md
index 0b422e3ad2..6a1ff25fb7 100644
--- a/blazor/diagram/layout/mind-map.md
+++ b/blazor/diagram/layout/mind-map.md
@@ -77,11 +77,9 @@ The following code example illustrates how to create a mind map layout using a d
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSiDNxJQsQKecM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample1)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSiDNxJQsQKecM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mind Map Diagram](../images/blazor-mind-map-diagram.png)" %}
You can also control the branch for a mind map using the [GetBranch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetBranch) method. The following example demonstrates how to configure all branches to appear on the right side using this method.
@@ -162,11 +160,9 @@ You can also control the branch for a mind map using the [GetBranch](https://hel
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIiDXHJGLCZNgi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapSample2)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIiDXHJGLCZNgi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Mind Map Diagram with Branches](../images/blazor-mind-map-diagram-with-branches.png)" %}
>**Note:** In `DataSourceSettings`, the `ID` and `ParentID` properties are string, and the provided `DataSource` should have a parent-child relationship. At least one node must have an empty `ParentID` to act as the root.
@@ -527,11 +523,9 @@ The following example demonstrates configuring the mind map layout with a vertic
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeWNXxpmANjEaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/MindmapOrientation).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeWNXxpmANjEaW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor mind map with vertical orientation](../images/blazor-mind-map-diagram-with-orientation.png)" %}
The following example demonstrates how to update the layout orientation dynamically at runtime using both data binding and direct method calls.
diff --git a/blazor/diagram/layout/organizational-chart.md b/blazor/diagram/layout/organizational-chart.md
index 8bf47a687b..606d70937a 100644
--- a/blazor/diagram/layout/organizational-chart.md
+++ b/blazor/diagram/layout/organizational-chart.md
@@ -101,11 +101,9 @@ The following code example illustrates how to create an organizational chart.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVIstZxJweMEFvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout1)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVIstZxJweMEFvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Chart example](../images/blazor-organization-chart.png)" %}
Organizational chart layout starts parsing from the root and iterates through all its child elements. The [GetLayoutInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Layout.html#Syncfusion_Blazor_Diagram_Layout_GetLayoutInfo) event callback method provides information about a node’s children and the way to arrange them (direction, orientation, offsets, etc.). The arrangements can be customized by overriding this function as explained below.
@@ -225,11 +223,9 @@ The following code example illustrates how to set the vertical right arrangement
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrIsNDxzGyEpDVX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/OrganizationLayout2)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrIsNDxzGyEpDVX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Organization Diagram ChildNode in Vertical Right](../images/blazor-diagram-childnode-at-vertical-right.png)" %}
### How to Update Layout Spacing
diff --git a/blazor/diagram/layout/radial-tree.md b/blazor/diagram/layout/radial-tree.md
index 8d2c420c42..f84e856d06 100644
--- a/blazor/diagram/layout/radial-tree.md
+++ b/blazor/diagram/layout/radial-tree.md
@@ -141,11 +141,9 @@ Create a radial tree layout with a `DataSource`. The following code example illu
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSMjjRTccRZEwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Layout/RadialTreeWithDataSource).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhSMjjRTccRZEwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radial Tree Diagram](../images/RadialTreeUG.png)" %}
>**Note:** In `DataSourceSettings`, the `ID` and `ParentID` properties are string. The provided `DataSource` should have a parent-child relationship. It is necessary for at least one node to have an empty `ParentID`.
diff --git a/blazor/diagram/nodes/customization.md b/blazor/diagram/nodes/customization.md
index dcf3feef2a..cb68c88cc1 100644
--- a/blazor/diagram/nodes/customization.md
+++ b/blazor/diagram/nodes/customization.md
@@ -47,11 +47,9 @@ The following code shows how to customize the appearance of a shape.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreCDNdTPXnzIxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeAppearance)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtreCDNdTPXnzIxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node appearance in Blazor Diagram](../images/blazor-diagram-node-appearance.png)" %}
N> The [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.NodeBase.html#Syncfusion_Blazor_Diagram_NodeBase_ID) for each node must be unique. `ID` property is used to find nodes at runtime for further customization.
@@ -190,13 +188,11 @@ Define node style using a template in [NodeTemplate](https://help.syncfusion.com
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLyCXjxTbrhOftv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeTemplate)
N> In this example, the node's background color is updated using the click event of the button defined in the template.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLyCXjxTbrhOftv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram with Node Template](../images/blazor-diagram-node-template.gif)" %}
## How to Update Common Node Styles
@@ -309,11 +305,9 @@ The diagram's [SetNodeTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIWZZRJvqiUhpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/SetTemplate)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhIWZZRJvqiUhpz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram with SetNodeTemplate](../images/blazor-diagram-set-node-template.png)" %}
## How to change the border color of a node
@@ -348,11 +342,9 @@ The diagram provides the ability to customize the border color of a node using t
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhosNjHfPAnHiMw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](hhttps://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/BorderColor)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhosNjHfPAnHiMw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Border Color for Node](../images/BorderColor.png)" %}
## How to change the border width of a node
@@ -431,11 +423,9 @@ Diagram supports adding a [Shadow](https://help.syncfusion.com/cr/blazor/Syncfus
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSWNXHzlpHUmqs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/NodeShadow)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSWNXHzlpHUmqs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with shadow](../images/blazor-diagram-node-shadow.png)" %}
### How to Customize Node Shadow
@@ -481,11 +471,9 @@ The [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Shad
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyiZjdpFIWLXYh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/CustomShadow)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyiZjdpFIWLXYh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with Custom Shadow](../images/blazor-diagram-node-custom-shadow.png)" %}
## How to Apply Gradient Style
@@ -545,11 +533,9 @@ There are two types of gradients:
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLIWjNRpFSnUxQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/LinearGradientStyle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLIWjNRpFSnUxQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with LinearGradient](../images/blazor-diagram-node-linear-gradient.png)" %}
### How to Apply Radial Gradient Brush
@@ -605,11 +591,9 @@ A complete working sample can be downloaded from [GitHub](https://github.com/Syn
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBosNDdJlxWJNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Appearance/RadientGradientStyle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBosNDdJlxWJNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with RadialGradient](../images/blazor-diagram-node-radial-gradient.png)" %}
## How to Add Additional Information for a Node
diff --git a/blazor/diagram/nodes/expand-and-collapse.md b/blazor/diagram/nodes/expand-and-collapse.md
index a5a4aca0fe..d6035f3df3 100644
--- a/blazor/diagram/nodes/expand-and-collapse.md
+++ b/blazor/diagram/nodes/expand-and-collapse.md
@@ -107,11 +107,9 @@ The following code example illustrates how to create icons of various shapes on
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLSMZtQVZKXIhdQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Icon)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLSMZtQVZKXIhdQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram](../images/blazor-diagram-ExpandCollapse.gif)" %}
The following code example illustrates how to create an icon of various shapes in a layout.
```csharp
@@ -245,11 +243,9 @@ The following code example illustrates how to create an icon of various shapes i
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIMDZQhtJNQiMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapsewithLayout)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrIMDZQhtJNQiMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Layout.gif)" %}
## How to Customize Expand and Collapse Icon
Diagram allows customization of the node’s expand and collapse icons. For available properties, refer to [DiagramExpandIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramExpandIcon.html) and [DiagramCollapseIcon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramCollapseIcon.html).
@@ -346,11 +342,9 @@ The following code explains how to initialize the icon with a path shape.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBoiNXwVtpmyxMJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/IconWithPathShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBoiNXwVtpmyxMJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram](../images/blazor-diagram-ExpandCollapse-Shape.png)" %}
### How to Customize Expand and Collapse Icon Appearance
@@ -453,11 +447,9 @@ The following code explains how to change the appearance of the Icon using `Fill
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyWDDwhXSUaIpc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/Appearance)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyWDDwhXSUaIpc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-DiagramIcon1.png)" %}
The following code explains how to change the icon appearance using the `CornerRadius` property.
@@ -551,11 +543,9 @@ The following code explains how to change the icon appearance using the `CornerR
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhoMDNGVDxWXOkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/CornerRadius)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhoMDNGVDxWXOkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram layout](../images/blazor-diagram-ExpandCollapse-Shape-CornerRadius.png)" %}
### How to Position and Align Expand and Collapse Icon
@@ -799,11 +789,9 @@ To implement a custom template for expand and collapse icons, please refer to th
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXreMXDQLNQrOfwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ExpandAndCollapse/ExpandCollapseIconTemplate)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXreMXDQLNQrOfwS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying DiagramIcon in Blazor Diagram layout](../images/ExpandCollapseIconTemplate.png)" %}
### How to Set Padding for the Expand/Collapse Icon
diff --git a/blazor/diagram/nodes/interaction.md b/blazor/diagram/nodes/interaction.md
index 7c6edbb117..3a01d927a5 100644
--- a/blazor/diagram/nodes/interaction.md
+++ b/blazor/diagram/nodes/interaction.md
@@ -63,8 +63,6 @@ A node can be selected at runtime by using the [Select](https://help.syncfusion.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htVysXNchsTmFbDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Select)
Selection is also available during interaction:
@@ -73,7 +71,7 @@ Selection is also available during interaction:
* When elements are selected, the [SelectionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanging) and [SelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SelectionChanged) events are triggered and do customization on those events.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVysXNchsTmFbDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node Selection in Blazor Diagram](../images/blazor-diagram-node-selection.png)" %}
## How to Drag a Node
@@ -119,8 +117,6 @@ A node can be dragged at runtime by using the [Drag](https://help.syncfusion.com
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVIsjtwBioTisdy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Drag)
Dragging is also supported during interaction:
@@ -128,7 +124,7 @@ Dragging is also supported during interaction:
* Drag an object by clicking and dragging it. When multiple elements are selected, dragging any one of the selected elements moves all the selected elements.
* During dragging, the [PositionChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanging) and [PositionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_PositionChanged) events are triggered and do customization on those events.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVIsjtwBioTisdy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Dragging a node at runtime in Blazor Diagram](../images/blazor-diagram-drag-node.gif)" %}
## How to Resize a Node
@@ -174,8 +170,6 @@ A node can be resized at runtime by using the [Scale](https://help.syncfusion.co
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoCtjmBWRAMAXB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Resize)
Resizing is also supported during interaction:
@@ -184,7 +178,7 @@ Resizing is also supported during interaction:
* When one corner of the selector is dragged, the opposite corner will be in a static position.
* When a node is resized, the [SizeChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanging) and [SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_SizeChanged) events get triggered.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoCtjmBWRAMAXB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Resizing a node using the selection handles in Blazor Diagram](../images/blazor-diagram-node-resizing.gif)" %}
## How to Rotate a Node
@@ -230,8 +224,6 @@ A node can be rotated at runtime by using the [Rotate](https://help.syncfusion.c
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBSMZXcVsHwXFqk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/Rotate)
Rotation is also supported during interaction:
@@ -241,7 +233,7 @@ Rotation is also supported during interaction:
* The rotate thumb (thumb at the middle of the node) appears when rotating the node to represent the static point.
* When a node is rotated, the [RotationChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanging) and [RotationChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.SfDiagramComponent.html#Syncfusion_Blazor_Diagram_SfDiagramComponent_RotationChanged) events are triggered.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBSMZXcVsHwXFqk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rotating a node using the rotation handle in Blazor Diagram](../images/blazor-diagram-node-rotation.gif)" %}
## How to rotate a node using the RotationAngle property
@@ -270,11 +262,9 @@ Use this property when you want to specify the node’s rotation at the time of
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSittQVMwKuLcJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Interaction/RotateAngleProperty)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSittQVMwKuLcJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node rotated by a fixed angle using the RotationAngle property](../images/NodeRotation.png)" %}
## How to Flip a Node
diff --git a/blazor/diagram/nodes/nodes.md b/blazor/diagram/nodes/nodes.md
index 4e661c66d0..f452609cca 100644
--- a/blazor/diagram/nodes/nodes.md
+++ b/blazor/diagram/nodes/nodes.md
@@ -55,11 +55,9 @@ To create a node, define the [Node](https://help.syncfusion.com/cr/blazor/Syncfu
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVeCXZGVWckeFbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/ActionsofNodes/AddNode)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVeCXZGVWckeFbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding a node from the nodes collection in Blazor Diagram](../images/blazor-diagram-add-node-from-collection.png)" %}
>**Note:** Node ID should not start with numbers or special characters and should not contain special characters such as underscore(_) or space.
@@ -321,10 +319,10 @@ public void RemoveNodes()
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyWXZchiOJEKsq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/CloneNode)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLyWXZchiOJEKsq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Clonning Node](../images/CloneNode.gif)" %}
+
## How to Update Nodes at Runtime
Node properties can be changed at runtime.
diff --git a/blazor/diagram/nodes/positioning.md b/blazor/diagram/nodes/positioning.md
index 14a5d38b8a..5b5d6d99ce 100644
--- a/blazor/diagram/nodes/positioning.md
+++ b/blazor/diagram/nodes/positioning.md
@@ -73,11 +73,9 @@ The following code shows how to change the pivot value.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWDXwLVtSsRsA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/Positioning)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhIWDXwLVtSsRsA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Positioning a node using pivot and offsets in Blazor Diagram](../images/blazor-diagram-node-position.png)" %}
Rotation of a node is controlled by the [RotationAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_RotationAngle) property. The following code shows how to change the `RotationAngle` value.
@@ -116,11 +114,9 @@ Rotation of a node is controlled by the [RotationAngle](https://help.syncfusion.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVoiNDchBsisDsF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/NodeRotateAngle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVoiNDchBsisDsF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing a nodes rotation angle in Blazor Diagram](../images/blazor-diagram-node-rotation-angle.png)" %}
## How to Set Minimum and Maximum Node Size
@@ -165,11 +161,9 @@ The [MinWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.N
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNreCZZcBrsHVKLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Nodes/Position/MinMaxSize)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNreCZZcBrsHVKLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Maximum and Minimum Size of Blazor Diagram Node](../images/blazor-diagram-show-max-min-size-node.gif)" %}
## See also
diff --git a/blazor/diagram/page-settings.md b/blazor/diagram/page-settings.md
index ae6e1babc2..afb3585553 100644
--- a/blazor/diagram/page-settings.md
+++ b/blazor/diagram/page-settings.md
@@ -114,11 +114,9 @@ Based on the diagramming element position, the size of the page dynamically incr
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjheCNNvpCCugjmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/MultiplePage)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjheCNNvpCCugjmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multiple Page](./images/MultiplePage.png)" %}
## How to Customize Page Appearance
@@ -171,11 +169,9 @@ Customize page appearance using the `PageSettings` properties:
public PageOrientation orientation = PageOrientation.Landscape;
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSCXXlzWrgqfQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/PageAppearance)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSCXXlzWrgqfQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[PageBackground Color](./images/PageBackground.png)" %}
### How to Customize Page Break Appearance
@@ -206,11 +202,9 @@ Refer to the following code example on how to change the stroke, stroke-dasharra
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSMtXvJMhbUAKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/PageSettings/PageBreak)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthSMtXvJMhbUAKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Pagebreak Color](./images/Pagebreak.png)" %}
## How to Change Page Margins
diff --git a/blazor/diagram/ports/appearance.md b/blazor/diagram/ports/appearance.md
index 3d2ea09069..671a0bc7bf 100644
--- a/blazor/diagram/ports/appearance.md
+++ b/blazor/diagram/ports/appearance.md
@@ -69,11 +69,9 @@ The following code shows how to change the appearance of the port.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBesjXcLLVeqypd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/Appearance)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBesjXcLLVeqypd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing port appearance in Blazor Diagram](../images/blazor-diagram-port-appearance.png)" %}
## How to Control the Port Visibility
@@ -144,11 +142,9 @@ We have provided some basic built-in [PortShapes](https://help.syncfusion.com/cr
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVyMXtmLrqCMsyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Appearance/CustomShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVyMXtmLrqCMsyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Port rendered with a custom path shape in Blazor Diagram](../images/blazor-diagram-port-custom-shape.png)" %}
## How to Enable or Disable Port Behaviors Using Constraints
diff --git a/blazor/diagram/ports/interaction.md b/blazor/diagram/ports/interaction.md
index 4daf798015..4ab65f975f 100644
--- a/blazor/diagram/ports/interaction.md
+++ b/blazor/diagram/ports/interaction.md
@@ -65,11 +65,9 @@ The following code explains how to draw a connector by using port constraints.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLICXZwLBSpDDeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraints)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLICXZwLBSpDDeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drawing a connector from a node port in Blazor Diagram](../images/blazor-diagram-draw-port-connection.gif)" %}
## How to Draw Connector from Connector Port
Draw connectors from a connector port by enabling the **Draw** constraint on the port’s `Constraints` property. By default, the connector segment type is **Orthogonal**.
@@ -114,11 +112,9 @@ The following code explains how to draw a connector by using port constraints.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyMZtwBrIugdQz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/ConnectorPortDraw)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLyMZtwBrIugdQz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drawing a connector from a connector port in Blazor Diagram](../images/ConnectorPort/ConnectorPortDraw.gif)" %}
## How to Draw Different Connector Types from Port
@@ -208,11 +204,10 @@ The following code explains how to draw the connector by using port constraints.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSMjZcVLxvdKSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Interaction/DrawConstraintsWithDrawingObject).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSMjZcVLxvdKSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drawing a Bezier connector from a port in Blazor Diagram](../images/blazor-diagram-draw-port-connection-bezier.gif)" %}
+
## See also
* [How to create a node](../nodes/nodes)
diff --git a/blazor/diagram/ports/ports.md b/blazor/diagram/ports/ports.md
index 207a9518db..4b313608a1 100644
--- a/blazor/diagram/ports/ports.md
+++ b/blazor/diagram/ports/ports.md
@@ -71,11 +71,9 @@ To learn more about creating and customizing ports in the Blazor Diagram, watch
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBSijXcVpWKTOyP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/CreatePorts)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBSijXcVpWKTOyP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Creating a port on a node in Blazor Diagram](../images/blazor-diagram-create-port.png)" %}
>**Note:** Port ID should not start with numbers or special characters and should not contain special characters such as underscores(_) or spaces.
@@ -430,11 +428,9 @@ The port [ID](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Po
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoCjDmhJcOloQL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/AddMultiplePorts)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLoCjDmhJcOloQL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding multiple ports to a node in Blazor Diagram](../images/blazor-diagram-add-multiple-ports.png)" %}
## How to Remove Port at Runtime
@@ -642,11 +638,9 @@ The following code example shows how to set the connection direction for a port.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLoWXZcrTaRefIs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/PortDirection)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLoWXZcrTaRefIs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Port Connection Direction](../images/PortDirection.gif)" %}
## How to Get InEdges and OutEdges of Ports
diff --git a/blazor/diagram/ports/positioning.md b/blazor/diagram/ports/positioning.md
index fb14a3a9ba..477d24dc20 100644
--- a/blazor/diagram/ports/positioning.md
+++ b/blazor/diagram/ports/positioning.md
@@ -64,11 +64,9 @@ Use [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Poi
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVoiDXGrosCrFqt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortOffset)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVoiDXGrosCrFqt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Port positioned using Offset values in Blazor Diagram](../images/blazor-diagram-port-offset.png)" %}
The following table shows the relationship between the shape port position and path port offset (fraction values).
@@ -208,11 +206,9 @@ The following code shows how to align ports.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXryMDDQBerYgNVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortHorizontalVerticalAlignment)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXryMDDQBerYgNVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing port alignment relative to offset in Blazor Diagram](../images/blazor-diagram-port-position.png)" %}
N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Center`. Alignment is positioned based on the offset value.
@@ -267,11 +263,9 @@ N> The default values for `HorizontalAlignment` and `VerticalAlignment` are `Cen
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhIWtXQhIAzipUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/Positioning/PortMargin)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhIWtXQhIAzipUo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Port with Margin](../images/blazor-diagram-port-margin.png)" %}
## See also
diff --git a/blazor/diagram/rulers.md b/blazor/diagram/rulers.md
index 01c18e5832..e9d6d4670a 100644
--- a/blazor/diagram/rulers.md
+++ b/blazor/diagram/rulers.md
@@ -30,9 +30,7 @@ The following code demonstrates how to add a ruler to the diagram.
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoiXXlTWQuPiRI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVoiXXlTWQuPiRI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ruler](images/Ruler.png)" %}
## How to Customize the Ruler
diff --git a/blazor/diagram/scroll-settings.md b/blazor/diagram/scroll-settings.md
index ba9a1799a0..7e622f41cd 100644
--- a/blazor/diagram/scroll-settings.md
+++ b/blazor/diagram/scroll-settings.md
@@ -308,11 +308,9 @@ The following example illustrates how to sets scroll padding.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSCZDFJpkPdyYI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/ScrollSettings/ScrollPadding)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVSCZDFJpkPdyYI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Scroll Padding support for node](images/ScrollPadding.png)" %}
## How to Restrict Scrollable Area
Scrolling beyond any particular rectangular area can be restricted using the [ScrollableArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollableArea) property of scroll settings. To restrict scrolling beyond any custom region, set [ScrollLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.ScrollSettings.html#Syncfusion_Blazor_Diagram_ScrollSettings_ScrollLimit) as “limited.” The following code example illustrates how to customize the scrollable area.
diff --git a/blazor/diagram/shapes.md b/blazor/diagram/shapes.md
index e9d15dd4fe..7e98e617d3 100644
--- a/blazor/diagram/shapes.md
+++ b/blazor/diagram/shapes.md
@@ -58,11 +58,9 @@ The following code illustrates how to create a text node.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVeMjjvpHHwFbIZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/TextNode)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVeMjjvpHHwFbIZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Node in Blazor Diagram](images/blazor-diagram-TextNode.png)" %}
## How to Create a Image Node
@@ -103,11 +101,9 @@ The following code illustrates how an image node is created.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByCDZOBKhUldMd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/ImageShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByCDZOBKhUldMd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Image Node in Blazor Diagram](images/blazor-diagram-image-node.png)" %}
### How to Add a Base64 Encoded Image to an Image Node
@@ -147,11 +143,9 @@ The following code illustrates how to add a Base64 image to the image node.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBICDtlzdkNlPxo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/Base64image)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBICDtlzdkNlPxo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Base64 Image Node in Blazor Diagram](images/blazor-diagram-base64-image-node.png)" %}
N> Deploy your HTML file in the web application and export the diagram (image node) or else the image node will not be exported in the Chrome and Firefox due to security issues.
@@ -302,11 +296,9 @@ HTML elements can be embedded in the diagram by setting the node Shape type to [
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheMZZvpQZVXgoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/HTMLShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXheMZZvpQZVXgoy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[HTML Node Template in Blazor Diagram](images/blazor-diagram-html-node-template.png)" %}
N> HTML nodes cannot be exported to image format, like JPEG and PNG. It is by design, while exporting the diagram is drawn in a canvas. Further, this canvas is exported into image formats. Currently, drawing in a canvas equivalent from all possible HTML is not feasible. Hence, this limitation. Also , HTML node always appears as topmost layer ( whose index is the higher index, even though it is defined at the last).
@@ -352,8 +344,6 @@ The following code example illustrates how to create a basic shape.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrosZDvfQBMblZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BasicShape)
N> By default, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Node.html#Syncfusion_Blazor_Diagram_Node_Shape) property of the node is set as **Basic**. Default property for `Shape` is **Rectangle**.
@@ -361,7 +351,7 @@ N> By default, the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
The `CornerRadius` property applies only to basic shapes.
The list of basic shapes are as follows.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrosZDvfQBMblZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[BasicShape Node in Blazor Diagram](images/blazor-diagram-basic-shape-node.png)" %}
## How to Create a Path Shape Node
@@ -405,11 +395,9 @@ To create a path node, set the shape as **Path**. The [Data](https://help.syncfu
};
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSiXNFzQVQgiZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/PathShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSiXNFzQVQgiZR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Path Shape Node in Blazor Diagram](images/blazor-diagram-path-shape-node.png)" %}
## How to Create a Flow Shape Node
@@ -448,13 +436,11 @@ The [Flow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.FlowS
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSitZPfwqrXoFd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/FlowShape)
The list of flow shapes are as follows.
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrSitZPfwqrXoFd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[FlowShape Node in Blazor Diagram](images/blazor-diagram-flow-shapes-node.png)" %}
## How to Create a SVG Template Shape
@@ -507,11 +493,9 @@ The diagram provides support to embed SVG element into a node. The Shape propert
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBeWXXlpcUFFGvt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/SVGShape)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBeWXXlpcUFFGvt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[SVG Node in Blazor Diagram](images/blazor-diagram-svg-node.png)" %}
N> Similar to HTML node, SVG nodes cannot be exported to image format. The fill color of an SVG node can be overridden by inline style or fill of the SVG element specified in the template.
@@ -555,14 +539,12 @@ The following code example illustrates how to create a BPMN shape.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryCXjbzmprSCAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes)
For more information about node constraints, refer to the [BPMN Shapes](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Shapes/BPMNShape).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtryCXjbzmprSCAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[BPMN Node in Blazor Diagram](images/BPMNShape.png)" %}
## See also
diff --git a/blazor/diagram/swimlane/lane/lane.md b/blazor/diagram/swimlane/lane/lane.md
index bc392ebdbe..d82ef45061 100644
--- a/blazor/diagram/swimlane/lane/lane.md
+++ b/blazor/diagram/swimlane/lane/lane.md
@@ -75,11 +75,9 @@ The following code example explains how to define a swimlane with lane.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoCNNwLozzxYUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneCreation).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoCNNwLozzxYUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane](../Swimlane-images/Swimlane_Lane.PNG)" %}
## How to Create and Customize Lane Header
@@ -146,11 +144,9 @@ The following code example shows how to define and customize a lane header.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoCjjQVyzOTpIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeader).
-.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBoCjjQVyzOTpIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane Header](../Swimlane-images/Swimlane_Lane_Header.PNG)" %}
Lane header annotations also support templates. Define HTML content at the tag level and enable template with the [UseTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.Annotation.html#Syncfusion_Blazor_Diagram_Annotation_UseTemplate) property. To assign different templates per lane, differentiate annotations by the `ID` property.
@@ -225,11 +221,9 @@ The following code example explains how to define a lane header annotation templ
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSiDDQVIyJbNWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneHeaderTemplate)
-.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBSiDDQVIyJbNWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane Header](../Swimlane-images/Swimlane_Lane_Header_Template.PNG)" %}
## How to Add and Remove the Lane at Runtime
@@ -316,11 +310,9 @@ Add and remove a lane at runtime by using the `Add` and `Remove` methods of the
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoMZXmhexDADSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/AddRemoveLaneAtRuntime).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBoMZXmhexDADSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane Add Remove](../Swimlane-images/Lane_Add_Remove.gif)" %}
## How to Add Children to Lane
@@ -406,11 +398,9 @@ The following code example shows how to add nodes to a lane.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeWjtmhSRGTRbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneChildren).
-.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVeWjtmhSRGTRbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane Children](../Swimlane-images/Lane_Children.PNG)" %}
## How to Set the Orientation of a Lane
@@ -496,11 +486,9 @@ Below is an example demonstrating how to set the orientation for lanes in an SfS
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjheCXNmVyYiGoHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Swimlanes/Lane/LaneOrientation).
-.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjheCXNmVyYiGoHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Lane](../Swimlane-images/LaneOrientation.PNG)" %}
## Header Selection and Resize
diff --git a/blazor/diagram/tool-tip.md b/blazor/diagram/tool-tip.md
index d2da23515e..74bbd544c6 100644
--- a/blazor/diagram/tool-tip.md
+++ b/blazor/diagram/tool-tip.md
@@ -54,11 +54,9 @@ The following code example illustrates how to customize the tooltip for nodes.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeMXXFTQypyUzV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipForSpecificNode)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeMXXFTQypyUzV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the node](images/blazor-diagram-nodetooltip.png)" %}
The following code example illustrates how to customize the tooltip for connectors.
@@ -85,11 +83,9 @@ The following code example illustrates how to customize the tooltip for connecto
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIsNXlpcxcfGTS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/TooltipForSpecificConnector)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBIsNXlpcxcfGTS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the node](images/blazor-diagram-connectortooltip.png)" %}
## How to Set Tooltip Position for Nodes and Connectors
@@ -822,11 +818,9 @@ The following code example demonstrates how to set `IsSticky` property to **true
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhSijNbTvfeFFpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/)
-| |
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhSijNbTvfeFFpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the node with Stikcy Mode](images/StickyNode.png)" %}
The following code example demonstrates how to set `IsSticky` property to **true** for a connector:
@@ -857,11 +851,9 @@ The following code example demonstrates how to set `IsSticky` property to **true
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjByCDDFpvysxzPr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/)
-| |
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjByCDDFpvysxzPr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the node with Stikcy Mode](images/StickyConnector.png)" %}
For more information about tooltip, refer to [Tooltip](https://blazor.syncfusion.com/documentation/diagram/tool-tip)
@@ -916,11 +908,9 @@ By default, tooltips are not displayed. Need to explicitly configure the tooltip
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLosDtlTlSozUTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/UserHandleTooltip)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLosDtlTlSozUTB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Tooltip for UserHandle](images/UserHandleTooltip.gif)" %}
### How to Set Sticky Tooltip for User Handles
@@ -977,11 +967,9 @@ The following code example demonstrates how to set `IsSticky` property to **true
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhesXNlflyEQBvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/UserHandleIsSticky/)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhesXNlflyEQBvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the ports with Stikcy Mode](images/UserHandleIsSticky.png)" %}
## How to Set Tooltip for Fixed User Handle
@@ -1025,10 +1013,9 @@ The diagram component offers robust tooltip functionality for [FixedUserHandles]
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZheCjNFJbPKBivq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleTooltip)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZheCjNFJbPKBivq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Tooltip for UserHandle](images/FixedUserHandleTooltip.gif)" %}
### How to Set Sticky Tooltip for Fixed User Handles
@@ -1074,10 +1061,9 @@ The following code example demonstrates how to set `IsSticky` property to true f
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLyiXjbzvEDcPUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/FixedUserHandleIsSticky)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLyiXjbzvEDcPUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the ports with Stikcy Mode](images/FixedUserHandleIsSticky.png)" %}
## How to Set Tooltip for Ports
@@ -1152,11 +1138,9 @@ By default, tooltips are not displayed. To display a tooltip, you must explicitl
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthysNZbfPaIKgsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Ports/ActionofPorts/TooltipForSpecificPort)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthysNZbfPaIKgsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the port](./images/PortTooltip.gif)" %}
### How to Set Sticky Tooltip for Ports
@@ -1213,12 +1197,10 @@ The following code example demonstrates how to set `IsSticky` property to **true
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMttPJlkudJEW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Tooltip/)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoMttPJlkudJEW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip During hover the ports with Stikcy Mode](./images/PortIsSticky.png)" %}
## See also
diff --git a/blazor/diagram/tools.md b/blazor/diagram/tools.md
index 56579346e8..43843e6254 100644
--- a/blazor/diagram/tools.md
+++ b/blazor/diagram/tools.md
@@ -71,11 +71,9 @@ To draw a [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagra
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrSWXtlTaXxLYBl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/NodeDrawTool)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrSWXtlTaXxLYBl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Node Tool in Blazor Diagram](images/blazor-diagram-node-tool.gif)" %}
## How to Draw a Connector Using the Drawing Tool
@@ -136,11 +134,9 @@ To draw a [Connector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Di
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIstXvJusulLEe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/ConnectorDrawTool)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrIstXvJusulLEe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Connector Tool in Blazor Diagram](images/blazor-diagram-connector-tool.gif)" %}
## How to Draw a Text Node Using the Drawing Tool
@@ -201,11 +197,9 @@ Create a text Node by click on the diagram page. The following code illustrates
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSWZDPJEVRtROs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/TextNodeDrawTool)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSWZDPJEVRtROs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Tool in Blazor Diagram](./images/blazor-diagram-Text-drawingtool.gif)" %}
## How to Draw a Polygon Using the Drawing Tool
@@ -454,11 +448,9 @@ The following code illustrates how to draw a freehand drawing.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVeitNFTOofPXrU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/DrawingTools/FreehandDrawTool).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVeitNFTOofPXrU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Freehand Drawing Tool in Blazor Diagram](images/blazor-diagram-freehand-drawing-tool.gif)" %}
## See also
diff --git a/blazor/diagram/uml-sequence-diagram.md b/blazor/diagram/uml-sequence-diagram.md
index b61ff19766..232aacf6e4 100644
--- a/blazor/diagram/uml-sequence-diagram.md
+++ b/blazor/diagram/uml-sequence-diagram.md
@@ -74,11 +74,9 @@ The following code example explains how to create participants in sequence diagr
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtheWXZlzknCroPu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UMLSequenceDiagram/CreateParticipant).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtheWXZlzknCroPu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ParticipantsExample](./images/UmlSequenceDiagram/ParticipantsExample.png)" %}
#### UmlSequenceParticipant Properties
@@ -225,11 +223,9 @@ The following code example explains how to create messages in sequence diagram.
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLIWjZPfYneFRWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub]().
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLIWjZPfYneFRWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Message Example](./images/UmlSequenceDiagram/MessageExample.png)" %}
#### UmlSequenceMessage Properties
@@ -320,11 +316,9 @@ The following code example explains how to create activation boxes in sequence d
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhSCjDFpkHYndWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub]().
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhSCjDFpkHYndWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Activations Example](./images/UmlSequenceDiagram/ActivationsExample.png)" %}
#### UmlSequenceActivationBox Properties
@@ -453,11 +447,9 @@ Create fragments in the sequence diagram, need to use the [UmlSequenceFragment](
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSCNZbzkGgSlhe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UMLSequenceDiagram/CreateFragments).
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLSCNZbzkGgSlhe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Fragment Example](images/UmlSequenceDiagram/FragmentExample.png)" %}
#### UmlSequenceFragment Properties
diff --git a/blazor/diagram/undo-redo.md b/blazor/diagram/undo-redo.md
index de8f3939ca..cad0ef8bcd 100644
--- a/blazor/diagram/undo-redo.md
+++ b/blazor/diagram/undo-redo.md
@@ -123,11 +123,9 @@ The [StackLimit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDryiZDPpEbHJxhw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/Undo-Redo/StackLimit)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDryiZDPpEbHJxhw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[StackLimit in Blazor Diagram](images/stackLimitGIF.gif)" %}
## Current entry
We can also get the current history entry from the [CurrentEntry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramHistoryManager.html#Syncfusion_Blazor_Diagram_DiagramHistoryManager_CurrentEntry) property of the [DiagramHistoryManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Diagram.DiagramHistoryManager.html) that allows to track changes occurring during the undo or redo process.
diff --git a/blazor/diagram/user-handle.md b/blazor/diagram/user-handle.md
index 29b1e946d4..5d03a7ed26 100644
--- a/blazor/diagram/user-handle.md
+++ b/blazor/diagram/user-handle.md
@@ -78,11 +78,9 @@ Enable user handles for selected nodes or connectors by setting [SelectorConstra
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLIiNjPeXLREtrf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/InitializeUserHandle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLIiNjPeXLREtrf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with User Handle](images/blazor-diagram-with-user-handle.png)" %}
## How to Customize User Handle Actions
User handles in the Syncfusion® Blazor Diagram component can be customized to perform specific actions when clicked. By default, user handles provide basic functionality; they can also be configured to execute custom logic such as cloning, deleting, or triggering other actions.
@@ -210,12 +208,10 @@ The following code explains how to customize user handle click actions.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIMXNloZKBydSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/UserHandleClickEvents)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIMXNloZKBydSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Diagram Node with User Handle](images/UserHandleClickEvents.gif)" %}
## Customization
@@ -479,11 +475,9 @@ The following code explains how to customize the appearance of the user handle.
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLesXNvIjJlaqCH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/Style)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLesXNvIjJlaqCH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Appearance of Userhandle in Blazor Diagram](images/blazor-diagram-custom-user-handle-appearance.png)" %}
### How to Change the Userhandle's Visible Target
@@ -725,11 +719,9 @@ The following code example shows how to change the VisibleTarget in the user han
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheCXXuWinfoVfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/VisibleofUserhandle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDheCXXuWinfoVfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[VisibleTarget](Images/blazor-diagram-user-handle-visible-target.gif)" %}
### How to define the type of user handle
The Blazor Diagram component provides support to render different types of user handles, giving flexibility in how they appear and function. There are three main types of user handles:
@@ -962,11 +954,9 @@ The following code explains how to define a template for the [UserHandle](https:
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrSWDjECDEhxaNC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/CustomizeUserHandle)
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrSWDjECDEhxaNC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template for UserHandle](images/UserHandleTemplate.gif)" %}
Precedence Order
The user handle types follow a specific precedence order when multiple options are defined:
@@ -1338,10 +1328,9 @@ Define a custom style for fixed user handles using a template in the [FixedUserH
}
}
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLICNZYWsBxKDOk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
A complete working sample can be downloaded from [GitHub](https://github.com/SyncfusionExamples/Blazor-Diagram-Examples/tree/master/UG-Samples/UserHandle/CustomizeFixedUserHandle)
-
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLICNZYWsBxKDOk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template for FixedUserHandle](images/FixedUserTemplate.png)" %}
## How to Handle Fixed User Handle Events