1033426: Updated dashboard layout playground sample

blazor/dashboard-layout/faq/all-panels-rendered-at-the-same-position.md

@@ -62,5 +62,5 @@ Here is an example demonstrating how to assign unique `Id` values to dynamically
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXryNOLepGKtuKUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-![Blazor DashboardLayout](../images/panel-overlap.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVRXxrApVEfyPkt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
+![Blazor DashboardLayout](../images/panel-overlap.webp)

blazor/dashboard-layout/getting-started-with-server-app.md

@@ -175,7 +175,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %}
 
 ## Defining Panels
 
@@ -217,7 +217,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de
 
 The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %}
 
 ### Panels with Components
 
@@ -386,7 +386,7 @@ These components are placed as panel content by assigning the corresponding Blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.webp)" %}
 
 N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor).
 

blazor/dashboard-layout/getting-started-with-web-app.md

@@ -179,7 +179,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %}
 
 ## Defining Panels
 
@@ -221,7 +221,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de
 
 The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %}
 
 ### Panels with Components
 
@@ -389,7 +389,7 @@ These components are placed as panel content by assigning the corresponding Blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component](images/blazor-dashboard-layout-with-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component](images/blazor-dashboard-layout-with-chart-component.webp)" %}
 
 N> When using the **SfRangeNavigator** component in this sample, ensure that the [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) NuGet package is installed in your project. You can install the package from [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor).
 

blazor/dashboard-layout/getting-started.md

@@ -164,7 +164,7 @@ N> There is no need to assign default value for panels. Refer to the [Panels](./
 
 * Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Blazor Dashboard Layout component in the default web browser.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVpXihOLKRGIhFf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxtRLUKlzqHcwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout Component](images/blazor-dashboard-layout-component.webp)" %}
 
 N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DashboardLayout).
 
@@ -208,7 +208,7 @@ A basic Dashboard Layout panel can display simple data. The panel's header is de
 
 The Dashboard Layout with simple content will be rendered in the web browser as demonstrated in the following screenshot.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzXChErUwBJvMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBHNxhgKwFngyBq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Single Data](images/blazor-dashboard-layout-single-content.webp)" %}
 
 ### Panels with Components
 
@@ -376,7 +376,7 @@ These components are placed as panel content by assigning the corresponding Blaz
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSDIVjTEDbFVUJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LthdjxLUqbWENRZr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout displays Chart Component Content](images/blazor-dashboard-layout-with-chart-component.webp)" %}
 
 To get started quickly with designing a Blazor Dashboard Layout with UI Components, you can check the video below.
 

blazor/dashboard-layout/interaction-with-panels/dragging-moving-of-panels.md

@@ -49,7 +49,7 @@ The sample above demonstrates both dragging and the automatic pushing of panels.
 
 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)" %}
+{% 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.webp)" %}
 
 ## Customizing the Drag Handle
 
@@ -91,4 +91,4 @@ The draggable handle for panels can be customized using the [`DraggableHandle`](
 
 The following output demonstrates customizing the dragging handle, where panels can only be dragged by interacting with their header section.
 
-{% 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBxXxBUpsYHfSbH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Dragging Handler of Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-drag-handler-of-panels.webp)" %}

blazor/dashboard-layout/interaction-with-panels/floating-of-panels.md

@@ -41,4 +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" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVHNHVAfhqmibJG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Floating Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.webp)" %}

blazor/dashboard-layout/interaction-with-panels/resizing-of-panels.md

@@ -41,6 +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" backgroundimage "[Resizing Panels in Blazor DashboardLayout](../images/blazor-dashboard-layout-panel-resizing.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLxZxBKfVLQowWA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" 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.

blazor/dashboard-layout/panels/position-sizing-of-panels.md

@@ -70,7 +70,7 @@ Panels within the layout can be precisely positioned and ordered using the [`Row
 
 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBxZHLAfjbpGQPd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Panels Position in Blazor DashBoard Layout](../images/blazor-dashboard-layout-panel-position.webp)" %}
 
 ## Sizing of Panels
 
@@ -119,4 +119,4 @@ These properties are invaluable when designing dashboards where the content and
 
 The following screenshot demonstrates the sizing of panels within the Dashboard Layout, using the `SizeX` and `SizeY` properties:
 
-{% 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhRNRLgTMDPQSDl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Panel Size in Blazor Dashboard Layout](../images/blazor-admin-template-layout-panel-size.webp)" %}

blazor/dashboard-layout/panels/setting-header-of-panels.md

@@ -53,4 +53,4 @@ The Blazor Dashboard Layout component utilizes two primary templates for renderi
 ```
 The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels:
 
-{% 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLxNHVAzMsmmMMP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Header.](../images/blazor-admin-template-layout-with-header.webp)" %}

blazor/dashboard-layout/responsive-adaptive.md

@@ -43,6 +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" backgroundimage "[Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRjHrUfBoCJosR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Responsive and Adaptive Layout in Blazor DashboardLayout](images/blazor-dashboard-layout-cell-space.webp)" %}
 
 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.

blazor/dashboard-layout/setting-size-of-cells.md

@@ -54,7 +54,7 @@ In the sample above, the width of the parent element is divided into five equal
 
 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVxXxVgqlYWAAdQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Cell Size of Blazor Dashboard Layout](images/blazor-dashboard-layout-cell-size.webp)" %}
 
 ## Setting Cell Spacing
 
@@ -92,7 +92,7 @@ The spacing between individual panels in both rows and columns can be defined us
 
 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhHNRrKTNqWJgGO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with Cell Spacing](images/blazor-dashboard-layout-cell-space.webp)" %}
 
 ## Graphical Representation of Grid Layout
 
@@ -130,4 +130,4 @@ The underlying grid structure of the Dashboard Layout is initially hidden. This
 
 The following output illustrates the visible gridlines, indicating the cell division of the layout, with data containers (panels) placed over these cells:
 
-{% 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)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVRDxLUfXIkXBCM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Dashboard Layout with GridLines](images/blazor-dashboard-layout-gridlines.webp)" %}

blazor/dashboard-layout/state-persistence.md

@@ -55,7 +55,7 @@ N> The Dashboard Layout component's [`ID`](https://help.syncfusion.com/cr/blazor
 </style>
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoNuhoTaPLpvwa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxjRLqprnQbPuC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 The following output demonstrates the use of `HeaderTemplate` and `ContentTemplate` to define the header and content of panels:
 
@@ -130,6 +130,6 @@ The Blazor Dashboard Layout component provides built-in methods to manage its st
 }
 
 ```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVyZkBIfEuZVDNy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZdrqfrwvNnKZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %}
 
 ![Blazor Dashboard Layout.](images/presistence-sample.png)