Update preview sample output of Blazor components UG documentation

Author: Backiaraj

blazor/treegrid/getting-started-webapp.md

@@ -282,7 +282,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TreeGrid component in your default web browser.
 
-{% previewsample alt="Blazor TreeGrid Getting Started Sample" "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLzXiANJxYypVIp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid-component.png)" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeGrid/BlazorWebApp).
 
@@ -441,7 +441,7 @@ The sorting feature enables to order the records. It can be enabled by setting t
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample alt="Blazor TreeGrid Paging and Sorting Sample" "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLzNMKDzGDJVWCD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeGrid](images/blazor-treegrid.png)" %}
 
 ## Handling exceptions
 
@@ -531,7 +531,7 @@ The following code example shows how to use the [OnActionFailure](https://help.s
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample alt="Blazor TreeGrid Exception Handling Sample" "https://blazorplayground.syncfusion.com/embed/BXBIMtXaTweQwBMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBIMtXaTweQwBMx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## See also
 

blazor/treeview/check-box.md

@@ -101,9 +101,7 @@ For independent checked states, allowing child nodes to be checked or unchecked
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSitCBUvmzMcKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView with CheckBox](./images/blazor-treeview-checkbox.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSitCBUvmzMcKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with CheckBox](./images/blazor-treeview-checkbox.png)" %}
 
 ## Check Nodes through Data Binding
 
@@ -277,9 +275,7 @@ The Blazor TreeView component enables checking specific nodes upon initial rende
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMZsVqvvPrMXI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView](./images/checkednodes.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMZsVqvvPrMXI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/checkednodes.png)" %}
 
 ## Check and Uncheck All Nodes
 
@@ -384,9 +380,7 @@ The example demonstrates the usage of these methods within the context of a butt
     }
 }
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView](./images/check-uncheck.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrICXiVgusUIOKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView](./images/check-uncheck.png)" %}
 
 ## Get Checked Nodes
 
@@ -541,9 +535,7 @@ The Blazor TreeView component provides the capability to pre-select specific nod
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyCtMrKkBdTNdz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Get checked nodes](./images/blazor-treeview-get-checked-nodes.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVyCtMrKkBdTNdz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get checked nodes](./images/blazor-treeview-get-checked-nodes.png)" %}
 
 ## Single Selection with CheckBox
 
@@ -748,9 +740,7 @@ The Blazor TreeView component can render checkboxes before each node when [`Show
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosZWBgaTqlQtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Hide CheckBox for parent nodes](./images/blazor-treeview-remove-parent-checkbox.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLosZWBgaTqlQtr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide CheckBox for parent nodes](./images/blazor-treeview-remove-parent-checkbox.png)" %}
 
 ## Cancel the Check Action
 

blazor/treeview/data-binding.md

@@ -120,9 +120,7 @@ In the following example, **Id**, **FolderName**, and **SubFolders** columns fro
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMtsVUEylUdFX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView with Hierarchical Data](./images/blazor-treeview-hierarchical-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBSMtsVUEylUdFX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Hierarchical Data](./images/blazor-treeview-hierarchical-data.png)" %}
 
 N> In the Blazor TreeView component, observable collection support is provided only for the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_DataSource) property, not for the [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property. The [`Child`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewFieldOptions-1.html#Syncfusion_Blazor_Navigations_TreeViewFieldOptions_1_Child) property supports only the `List<T>` data type.
 
@@ -219,9 +217,7 @@ To render the root level nodes, specify the ParentID as null or no need to speci
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroWNWBAucDwMeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView with Self-Referential Data](./images/blazor-treeview-hierarchical-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDroWNWBAucDwMeI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Self-Referential Data](./images/blazor-treeview-hierarchical-data.png)" %}
 
 ### ExpandoObject Binding 
 
@@ -441,9 +437,7 @@ The **OrderID**, **EmployeeID**, and **ShipName** columns from orders table are
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByWXirTXWroCXq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView with Remote Data](./images/blazor-treeview-remote-data.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjByWXirTXWroCXq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Remote Data](./images/blazor-treeview-remote-data.png)" %}
 
 ### Web API Adaptor
 

blazor/treeview/drag-and-drop.md

@@ -113,9 +113,7 @@ N> In the [**OnNodeDragged**](https://help.syncfusion.com/cr/blazor/Syncfusion.B
 
  ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhyMZsBJDLnhwpw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Node in Blazor TreeView](./images/blazor-treeview-drag-drop-node.png)" %}
 
 ## Multiple-Node Drag and Drop
 
@@ -208,9 +206,7 @@ To enable dragging and dropping of multiple nodes, enable both the [`AllowMultiS
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSsXsVfZUjOzRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Drag and Drop Multiple Node in Blazor TreeView](./images/blazor-treeview-drag-drop-multi-node.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhSsXsVfZUjOzRj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and Drop Multiple Node in Blazor TreeView](./images/blazor-treeview-drag-drop-multi-node.png)" %}
 
 
 ## Drag and Drop within a TreeView
@@ -277,9 +273,7 @@ The default value of `AllowDragAndDrop` property is false.
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyitsLTjUePIsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Drag and drop within a TreeView](./images/blazor-treeview-drag-and-drop-within-treeview.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLyitsLTjUePIsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop within a TreeView](./images/blazor-treeview-drag-and-drop-within-treeview.png)" %}
 
 ## Drag and Drop Between TreeViews
 
@@ -493,9 +487,7 @@ The Blazor TreeView component includes built-in drag and drop support, allowing
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryiDsBftpsSWPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Drag and drop between TreeViews](./images/blazor-treeview-drag-and-drop-between-treeviews.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryiDsBftpsSWPi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Drag and drop between TreeViews](./images/blazor-treeview-drag-and-drop-between-treeviews.png)" %}
 
 ## Restrict Drag and Drop for Individual node
 

blazor/treeview/expand-collaspe-actions.md

@@ -95,9 +95,7 @@ Specific nodes can be programmatically expanded upon TreeView initialization by
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSWNCrTNHHeZFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Expand nodes through data binding](./images/blazor-treeview-expand-nodes-through-data-binding.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhSWNCrTNHHeZFa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expand nodes through data binding](./images/blazor-treeview-expand-nodes-through-data-binding.png)" %}
 
 ## Expand Nodes through API
 
@@ -336,9 +334,7 @@ The Blazor TreeView component provides the `ExpandedNodes` property for two-way
         }
 </style>
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSMDCVfjcEkxgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Get expanded nodes](./images/blazor-treeview-get-expanded-nodes.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLSMDCVfjcEkxgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Get expanded nodes](./images/blazor-treeview-get-expanded-nodes.png)" %}
 
 ## Expand or Collapse a Node Programmatically
 

blazor/treeview/how-to/accordion-tree.md

@@ -214,6 +214,4 @@ An accordion is a UI pattern where a list of items allows one item to be expande
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoMjCBqcFBIQiH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor TreeView as Accordion](../images/blazor-treeview-with-custom-accordion.png)" %}

blazor/treeview/how-to/check-uncheck-the-checkbox-on-clicking-the-tree-node-text.md

@@ -190,6 +190,4 @@ Checkboxes in the TreeView can be checked and unchecked by clicking the tree nod
 }
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLesXsrAwEkrazW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Checking or Unchecking CheckBox in Blazor TreeView](../images/blazor-treeview-checkbox.png)" %}

blazor/treeview/how-to/customize-the-expand-and-collapse-icons.md

@@ -139,9 +139,7 @@ The following example demonstrates how to customize the expand and collapse icon
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhSsjMrKbjcuFLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Expand and Collapse Icon in Blazor TreeView](../images/blazor-treeview-customize-expand-collapse-icon.png)" %}
 
 ## Customize Expand/Collapse Icon Position and Color
 
@@ -340,9 +338,7 @@ The position and color of the expand or collapse icons are customized using CSS.
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIMDMrKbiQKRCm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Icon Position and Color in Blazor TreeView](../images/blazor-treeview-custom-icons-position-and-color.png)" %}
 
 ## Increase Padding Between Text, Expand/Collapse Icons, and Custom Icons
 

blazor/treeview/how-to/customize-the-tree-nodes-based-on-levels.md

@@ -139,6 +139,4 @@ The following example demonstrates customizing node appearance at various levels
 
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhIWNihKvBuqmZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Nodes based on Levels in Blazor TreeView](../images/blazor-treeview-with-custom-nodes.png)" %}

blazor/treeview/how-to/get-dynamic-icon.md

@@ -98,6 +98,4 @@ bound `IconCss` class dynamically. Using the [`GetTreeData`](https://help.syncfu
 </style>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-![Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZryMNCBAPAkNGNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeView with Dynamic Icon](../images/blazor-treeview-dynamic-icon.png)" %}