From 3671dd3f30882beeb9d4771a94e362ac61089680 Mon Sep 17 00:00:00 2001
From: sanjaykumar-suresh <sanjaykumar.suresh@syncfusion.com>
Date: Fri, 21 Nov 2025 10:30:00 +0530
Subject: [PATCH] 989661: Updated Playground Samples in docs

---
 blazor/datagrid/adding-header-and-footer.md   | 10 ++++-----
 blazor/datagrid/clipboard.md                  |  8 +++----
 blazor/datagrid/context-menu.md               | 16 +++++++-------
 blazor/datagrid/excel-export-options.md       | 20 ++++++++---------
 blazor/datagrid/excel-exporting.md            | 10 ++++-----
 .../blazor-webassembly-data-grid-using-cli.md | 14 ++++++------
 blazor/datagrid/pdf-export-options.md         | 22 +++++++++----------
 blazor/datagrid/pdf-export.md                 | 10 ++++-----
 .../style-and-appearance.md                   |  6 ++---
 blazor/datagrid/template-pdf-export.md        |  4 ++--
 blazor/datagrid/templates-excel-export.md     |  4 ++--
 blazor/datagrid/webassembly-performance.md    |  4 ++--
 12 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md
index f3b13a95e1..e57e85895f 100644
--- a/blazor/datagrid/adding-header-and-footer.md
+++ b/blazor/datagrid/adding-header-and-footer.md
@@ -160,7 +160,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBStoZvKaemjUsG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhoMCCpJlwMDtUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Draw a line in header and footer
 
@@ -363,7 +363,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLetytPqYKdmets?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBSWMWfzvaADrfe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Add page number in header and footer
 
@@ -531,7 +531,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLojkCeTOdnSgCJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhSiCWzTEtZVJVn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Insert an image in header and footer
 
@@ -662,7 +662,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLeXINbTSiCxMZL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMMCpTuXlBLxH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Repeat column header on every page
 
@@ -760,4 +760,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVINuLIyMVDkBoc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDheMMCpTuXlBLxH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/clipboard.md b/blazor/datagrid/clipboard.md
index 0691049aa7..404b91b8ed 100644
--- a/blazor/datagrid/clipboard.md
+++ b/blazor/datagrid/clipboard.md
@@ -93,7 +93,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIMNVlTrSTfkKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrSsMMTUwjEIPln?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 
 ## Copy to clipboard by external buttons
@@ -190,7 +190,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSDfMKeTVVoBtf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVICiipKwCFoRBf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## AutoFill
 
@@ -284,7 +284,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLojTCUezbECphd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtresCsJgQVIUhQZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 > * If [EnableAutoFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAutoFill) is set to **true**, then the autofill icon will be displayed on cell selection to copy cells.
 > * It requires the selection [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_Mode) to be **Cell**,  [CellSelectionMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSelectionSettings.html#Syncfusion_Blazor_Grids_GridSelectionSettings_CellSelectionMode) to be **Box** and also [EditMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.EditMode.html#fields) to be **Batch**. 
@@ -388,7 +388,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthyNzsUeyrJRGbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIMiifKmAylQzo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 
 > To perform paste functionality, it requires the selection **mode** to be **Cell**,  **cellSelectionMode** to be **Box** and also Batch Editing should be enabled.
diff --git a/blazor/datagrid/context-menu.md b/blazor/datagrid/context-menu.md
index 3f5adcc36a..2c5712835e 100644
--- a/blazor/datagrid/context-menu.md
+++ b/blazor/datagrid/context-menu.md
@@ -150,7 +150,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBIjJjlfrgDinOe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVosCMpqpPulHhu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 
 ## Custom context menu items
@@ -247,7 +247,7 @@ public class EmployeeData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyDfNYsPWaHXLo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrIsMsJUIoWyJWp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Built-in and Custom context menu items
 
@@ -340,7 +340,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBSNftEhBsXumEv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeiCWJqeZypnTw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Sub context menu items in DataGrid
 
@@ -458,7 +458,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVyjfjkrhfaJLAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBSCMCTAIwzoxlZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Disable the context menu for specific columns in DataGrid
 
@@ -567,7 +567,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htBeNTjaVhQWEiHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZryssMfAyFAoJEI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Enable or disable context menu items
 
@@ -672,7 +672,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryDfXEqqyMSDPD?appbar=false&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjresWspAHXmvnzM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Show or hide context menu 
 
@@ -777,7 +777,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLIZfXYKSwAiUpU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrSWCiTAnKDAxPA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Access specific row details on context menu click
 
@@ -886,6 +886,6 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLetwrTrwitHdvW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrSsWifqHbIWIVV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 N> You can refer to [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
diff --git a/blazor/datagrid/excel-export-options.md b/blazor/datagrid/excel-export-options.md
index 0d359dba24..b4728d6577 100644
--- a/blazor/datagrid/excel-export-options.md
+++ b/blazor/datagrid/excel-export-options.md
@@ -126,7 +126,7 @@ public class EmployeeData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBejpMDzobgsSwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIsCWpqauThguO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Export the selected records 
 
@@ -230,7 +230,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeNziNTHvZEmUU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroMsizTXWnClhy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Exporting grouped records
 
@@ -325,7 +325,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSNTiDpmrJDsrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhSsCCTzNASPqbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Limitations
 
@@ -436,7 +436,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByNpMDplOKPhoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLIsiWTzNplsSSw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Show or hide columns while exporting
 
@@ -550,7 +550,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLeDpWWTcPQCFoF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLIsMizTZmDkzCR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Define file name
 
@@ -656,7 +656,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBItJMWfSuvFmBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLSCMMpTtFZQChM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing columns on export
 
@@ -764,7 +764,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVyDpiXSTLiKArB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLIsMsTfsMCxiQq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 > By default, material theme is applied to exported Excel document.
 
@@ -879,7 +879,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVyDpiXSTLiKArB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBIWCsfJMWECapB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing the background color for a Grid in an exported Excel or CSV document
 
@@ -997,7 +997,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSZTCifvHcgdTG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryMssTJsyjCmpB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Add additional worksheets to Excel document while exporting
 
@@ -1483,7 +1483,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVItTsCruFliZJm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNByMMWTTWPLzclH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Exporting Grid Data as Stream
 
diff --git a/blazor/datagrid/excel-exporting.md b/blazor/datagrid/excel-exporting.md
index 4690f1f1cf..e155cfa6d7 100644
--- a/blazor/datagrid/excel-exporting.md
+++ b/blazor/datagrid/excel-exporting.md
@@ -106,7 +106,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrStJXuTcIPierd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNheWMspgvlrKBNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Show spinner while exporting 
 
@@ -208,7 +208,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLetTiMCmRvgSSs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLeiCszqbybTsoa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Binding custom data source while exporting
 
@@ -305,7 +305,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhotfhJUHIXUNlC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLSsMWpUaLvLkZm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Exporting with custom aggregate
 
@@ -521,7 +521,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVeDfWXVMQonozp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVeMCMfqkSkOAsO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Passing additional parameters to the server when exporting
 
@@ -640,4 +640,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryZJitJZwsZqkm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBSMispAYwrkGev?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
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..6f941fa03c 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
@@ -202,7 +202,7 @@ Once the app starts, navigate to `http://localhost:<port number>` in your browse
 
 ![Blazor DataGrid](../images/blazor-datagrid-component.png)
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrIZoWghZXnoxDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhIWCMzVFSVldRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Defining row data
 
@@ -269,7 +269,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrotoiKCoYkHoHn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDryiCiJLuWPDPgb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Defining columns
 
@@ -361,7 +361,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLyNosqiEMHcPrL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBeMCMphaKYPIIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Enable paging
 
@@ -437,7 +437,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrejSMgCdnGAijD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreMCsphaeEIWIs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Enable sorting
 
@@ -512,7 +512,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhSXosACxQRZrki?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htLSsiWzraQhXjUp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Enable filtering
 
@@ -588,7 +588,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrIDoMqsHPeUEtz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNheCsMprYbBcBYH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ### Enable grouping
 
@@ -664,7 +664,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/VjreCCWJhYaWRaJd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor DataGrid](../images/blazor-datagrid.gif)
 
diff --git a/blazor/datagrid/pdf-export-options.md b/blazor/datagrid/pdf-export-options.md
index 6cfda467b1..fc7cfc086d 100644
--- a/blazor/datagrid/pdf-export-options.md
+++ b/blazor/datagrid/pdf-export-options.md
@@ -124,7 +124,7 @@ The following example demonstrates how to export current page to a PDF document
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBeNzMWgoxPClQM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBoMCWpJoymdQwT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Export selected records
 
@@ -227,7 +227,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLyZJWignXqmlaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoMMiTTyQGDFmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Export filtered records
 
@@ -334,7 +334,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVINzMpVxeuzFVM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLIiWspzSPHasWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Export with hidden columns
 
@@ -444,7 +444,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhoNJWiAnvCslzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBIMsMJJHchjkvo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Show or hide columns while exporting
 
@@ -557,7 +557,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByZTBaJDQfXHAZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhyWMMpJHvsWrKy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Change page orientation
 
@@ -686,7 +686,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeNzVKUaStvZne?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLSMWMffHkMjQYa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Change page size
 
@@ -853,7 +853,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhoNIXoheMzaxjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBeiWMJpGNzmrjS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Define file name
 
@@ -1167,7 +1167,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeNzWspWvjNiOp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVSiWspfPtudNvi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Customize column width in exported PDF document
 
@@ -1254,7 +1254,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVetyXEWnovmFoM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLysisJpPMlgQGD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Font and color customization
 
@@ -1400,7 +1400,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrIjIjeLyPqfijX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLIsWsfTlAsQpnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Add custom font
 
@@ -1529,7 +1529,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByXSXoVxArjAFT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIssipzPfjJDDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Rotate a header text in the exported PDF document
 
diff --git a/blazor/datagrid/pdf-export.md b/blazor/datagrid/pdf-export.md
index 921cd9ff7b..b06cbdff76 100644
--- a/blazor/datagrid/pdf-export.md
+++ b/blazor/datagrid/pdf-export.md
@@ -90,7 +90,7 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBIDpZEKtBzeKSd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVoiCizffjbcCqs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Show spinner while exporting
 
@@ -186,7 +186,7 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVetptuKCqkceUU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBoisWJzprvZZFP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Binding custom data source while exporting
 
@@ -328,7 +328,7 @@ public class ChangeData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXfDOqaghyKye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hthesMWTJfTcRbBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Exporting with custom aggregate
 
@@ -550,7 +550,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVSNfWZIXZQsIfM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLeMisJTSCqNUAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Passing additional parameters to the server when exporting
 
@@ -666,4 +666,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLoZogDqknpIKBk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIsWWTJohXtFyS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md
index dd68ec8987..46d3ef870a 100644
--- a/blazor/datagrid/style-and-appearance/style-and-appearance.md
+++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md
@@ -155,7 +155,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrStpWnJrFIGhRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeWiMprHQziINE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customizing alternate row with Frozen columns
 
@@ -257,7 +257,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLSNetLzivgmRSN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhyiWsfBGfXHkLw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customize the color of Grid lines
 
@@ -361,4 +361,4 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeXGhOqfxsRDrR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLyssWJBwHeZBUF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md
index bb484afd09..94cdf59fa7 100644
--- a/blazor/datagrid/template-pdf-export.md
+++ b/blazor/datagrid/template-pdf-export.md
@@ -533,7 +533,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/hjLSWWizfuSJpYel?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Exporting with detail template](./images/exporting-pdf-detail-template.gif)
 
@@ -815,6 +815,6 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtByZTscrNDihvvB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhoiMszfOvlznUh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![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..3f114ddc6b 100644
--- a/blazor/datagrid/templates-excel-export.md
+++ b/blazor/datagrid/templates-excel-export.md
@@ -572,7 +572,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/VNVyiMippVKwHfUj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Exporting with detail template](./images/detail-template.gif)
 
@@ -864,6 +864,6 @@ public class OrderDetails
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBytpWQhgOCVmqd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyMWMffrlHkMxt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Exporting hierarchical Grid using detail template](./images/hierarchical-detail-template.gif)
\ No newline at end of file
diff --git a/blazor/datagrid/webassembly-performance.md b/blazor/datagrid/webassembly-performance.md
index 8ea5f39442..f7fbf1b98f 100644
--- a/blazor/datagrid/webassembly-performance.md
+++ b/blazor/datagrid/webassembly-performance.md
@@ -107,7 +107,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVIZyWdAaNWlsFx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBosssTgZQRxUWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 >* `PreventRender` method accepts boolean argument that accepts true or false to disable or enable rendering respectively.
 >* `PreventRender` method can be used only after Grid completed initial rendering. Calling this method during initial rendering will not have any effect.
@@ -205,7 +205,7 @@ public class OrderData
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBoDIWnqvasLQsp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeWCifKNvnampR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 >* `PreventRender` property internally overrides the [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRender) method of the Grid to prevent rendering.
 >* It is recommended to set `PreventRender` as true for user interactive events such as [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected), [RowSelecting](https://blazor.syncfusion.com/documentation/datagrid/events#rowselecting) etc. for better performance.