From 351907d1cbcd1c39e9d044d517182e516169a817 Mon Sep 17 00:00:00 2001 From: GuhanathanRamanathaN Date: Wed, 19 Nov 2025 16:18:03 +0530 Subject: [PATCH 1/5] 993969 :Ug Data grid --- blazor/datagrid/editing.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md index 828ef4c7cf..684947b52a 100644 --- a/blazor/datagrid/editing.md +++ b/blazor/datagrid/editing.md @@ -765,11 +765,11 @@ The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids To customize the default Grid EditForm input component, you can define an `EditTemplate` inside the GridColumn for the complex field. You can edit complex objects using `EditTemplate` by defining two-way (**@bind-Value**) binding inside the GridColumn to reflect changes in the DataGrid. -For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a double underscore `(__)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name__FirstName**. +For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a Triple underscore `(___)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name___FirstName**. -> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this double underscore (__) format to avoid issues with validation and focus handling. +> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this Triple underscore (___) format to avoid issues with validation and focus handling. -In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name__FirstName** and **Name__LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**). +In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name___FirstName** and **Name___LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**). {% tabs %} {% highlight razor tabtitle="Index.razor" %} From 84ed740042c2678702c61d5cc9788fd606a189d2 Mon Sep 17 00:00:00 2001 From: GuhanathanRamanathaN Date: Wed, 19 Nov 2025 16:28:21 +0530 Subject: [PATCH 2/5] 993869:Resolve Conflicts --- blazor/datagrid/searching.md | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md index a7ef3f9f4a..7d3644cc85 100644 --- a/blazor/datagrid/searching.md +++ b/blazor/datagrid/searching.md @@ -213,6 +213,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop {% tabs %} {% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.DropDowns @@ -223,6 +224,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop + @@ -246,14 +248,6 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop public Operator Value { get; set; } } - public enum Operator - { - StartsWith, - EndsWith, - Contains, - Equal - } - List DropDownData = new List { new DropDownOrder(){Text="StartsWith",Value= Operator.StartsWith }, @@ -316,7 +310,7 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBgCXKXMPQpCngI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtheMWibUKtkPFVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} ## Search by external button From 7e8634583cd40dd9a7500aad9ab885aa37af7981 Mon Sep 17 00:00:00 2001 From: GuhanathanRamanathaN Date: Wed, 19 Nov 2025 16:34:09 +0530 Subject: [PATCH 3/5] 993969: resolved comments --- blazor/datagrid/editing.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/editing.md b/blazor/datagrid/editing.md index 684947b52a..ba5d8f095d 100644 --- a/blazor/datagrid/editing.md +++ b/blazor/datagrid/editing.md @@ -765,9 +765,9 @@ The [EditTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids To customize the default Grid EditForm input component, you can define an `EditTemplate` inside the GridColumn for the complex field. You can edit complex objects using `EditTemplate` by defining two-way (**@bind-Value**) binding inside the GridColumn to reflect changes in the DataGrid. -For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a Triple underscore `(___)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name___FirstName**. +For focus management and validation to work properly, you must set the `ID` attribute of the input elements inside the `EditTemplate` to match the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) value of the corresponding GridColumn. When dealing with complex fields, use a triple underscore `(___)` in place of the dot `(.)` operator. For example, if the field is **Name.FirstName**, set the `ID` as **Name___FirstName**. -> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this Triple underscore (___) format to avoid issues with validation and focus handling. +> Ensure that both `ID` and `Name` attributes inside the `EditTemplate` follow this triple underscore (___) format to avoid issues with validation and focus handling. In the following example, the input element is rendered in the edit template of the FirstName and LastName columns. The edited changes can be saved using the `Name` property of the input element. Since the complex data is bound to the FirstName and LastName columns, the `Name` property should be defined as **Name___FirstName** and **Name___LastName**, respectively, instead of using the dot notation (**Name.FirstName** and **Name.LastName**). From 3671dd3f30882beeb9d4771a94e362ac61089680 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 21 Nov 2025 10:30:00 +0530 Subject: [PATCH 4/5] 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:` 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. From c01ac7395db0acba04211ee8691a66738dbb0694 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh Date: Fri, 21 Nov 2025 15:51:21 +0530 Subject: [PATCH 5/5] 989661: Fixed the Run time Errors --- blazor/datagrid/adding-header-and-footer.md | 2 +- blazor/datagrid/excel-exporting.md | 2 +- .../datagrid/how-to/blazor-webassembly-data-grid-using-cli.md | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md index e57e85895f..f1d664f8aa 100644 --- a/blazor/datagrid/adding-header-and-footer.md +++ b/blazor/datagrid/adding-header-and-footer.md @@ -668,7 +668,7 @@ public class OrderData When exporting data from the Syncfusion® Blazor DataGrid to a PDF document, you have an option to repeat the column headers on every page. This feature ensures that the column headers remains visible and easily identifiable, even when the data spans multiple pages in the exported PDF document. -By default, the column headers is occurs only on the first page of the PDF document. However, you can enable the [IsRepeatHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IsRepeatHeader) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class to display the column headers on every page. This can be achieved using the [PdfHeaderQueryCellInfo](https://ej2.syncfusion.com/angular/documentation/api/grid/#pdfheaderquerycellinfo) event of the Grid. +By default, the column headers is occurs only on the first page of the PDF document. However, you can enable the [IsRepeatHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IsRepeatHeader) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class to display the column headers on every page. This can be achieved using the [PdfHeaderQueryCellInfo](https://blazor.syncfusion.com/documentation/datagrid/events#pdfheaderquerycellinfoevent) event of the Grid. The following example demonstrates how to repeat the column headers on every page of the exported PDF document using the `PdfHeaderQueryCellInfo` event: diff --git a/blazor/datagrid/excel-exporting.md b/blazor/datagrid/excel-exporting.md index e155cfa6d7..8304e93704 100644 --- a/blazor/datagrid/excel-exporting.md +++ b/blazor/datagrid/excel-exporting.md @@ -1,7 +1,7 @@ --- layout: post title: Excel Export in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about Excel Export in Syncfusion Blazor DataGrid and much more. +description: Checkout and learn here all about Excel Export in Syncfusion Blazor DataGrid and much more. platform: Blazor control: DataGrid documentation: ug 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 6f941fa03c..f4050c2e96 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 @@ -13,7 +13,7 @@ This article provides step-by-step instructions to build a Blazor WebAssembly Ap ## Using playground -[Blazor Playground](https://blazor.syncfusion.com/documentation/blazor-playground/overview) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. +[Blazor Playground](https://blazorplayground.syncfusion.com) allows you to interact with our Blazor components directly in your web browser without need to install any required NuGet packages. By default, the `Syncfusion.Blazor` package is included in this. {% playground "https://blazorplayground.syncfusion.com/" %}