From 403b91d1bfa1d92784dac8a9b8859781ea9c5362 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Thu, 16 Oct 2025 17:39:10 +0530 Subject: [PATCH] 984345: Updated the UG Samples in Blazor DataGrid --- blazor/datagrid/adding-header-and-footer.md | 4 +- .../datagrid/how-to/enable-or-disable-grid.md | 2 +- ...xt-as-additional-parameters-from-events.md | 4 +- .../use-radio-button-instead-of-checkbox.md | 8 ++-- blazor/datagrid/paging.md | 4 +- .../datagrid/style-and-appearance/editing.md | 17 ++++--- blazor/datagrid/template-pdf-export.md | 24 ++++++---- blazor/datagrid/tool-bar.md | 12 ++--- blazor/datagrid/toolbar-items.md | 47 ++++++++++++------- 9 files changed, 71 insertions(+), 51 deletions(-) diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md index c299b7215d..f3b13a95e1 100644 --- a/blazor/datagrid/adding-header-and-footer.md +++ b/blazor/datagrid/adding-header-and-footer.md @@ -697,7 +697,7 @@ The following example demonstrates how to repeat the column headers on every pag { PdfExportProperties ExportProperties = new PdfExportProperties(); ExportProperties.IsRepeatHeader = true; // Repeats the Grid's header on every page in the PDF document. - await this.DefaultGrid.PdfExport(ExportProperties); + await this.DefaultGrid.ExportToPdfAsync(ExportProperties); } } protected override void OnInitialized() @@ -760,4 +760,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLyXTCdVQgRVfzE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVINuLIyMVDkBoc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/datagrid/how-to/enable-or-disable-grid.md b/blazor/datagrid/how-to/enable-or-disable-grid.md index c97b00e6b9..30f9dcf748 100644 --- a/blazor/datagrid/how-to/enable-or-disable-grid.md +++ b/blazor/datagrid/how-to/enable-or-disable-grid.md @@ -34,7 +34,7 @@ The following example demonstrates how to enable or disable the Grid and its act @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons - + @(isGridDisabled? "Enable Grid" : "Disable Grid") diff --git a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md index c81d15eb22..7138b4223b 100644 --- a/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md +++ b/blazor/datagrid/how-to/send-context-as-additional-parameters-from-events.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Sending context as additional parameters from events in Blazor DataGrid +# Sending context as additional parameters in Blazor DataGrid events The Syncfusion® Blazor DataGrid offers flexibility to pass additional context information during events. This capability is especially useful for dynamically updating Grid data based on interactions with other components, enabling seamless, real-time data modifications within the Grid. @@ -51,7 +51,7 @@ Height="600" @ref="Grid"> - + diff --git a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md index 6495f19d49..2bb8eda862 100644 --- a/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md +++ b/blazor/datagrid/how-to/use-radio-button-instead-of-checkbox.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# How to use radio button instead of checkbox for row selection in Blazor DataGrid +# How to use radio button instead of checkbox in Blazor DataGrid By default, the Syncfusion® Blazor DataGrid provides checkbox selection to allow multiple row selection. If there is a need to allow only one row to be selected at a time, a radio button can be used instead of checkbox selection. This can be achieved by using the column [Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature to render a [SfRadioButton](https://blazor.syncfusion.com/documentation/radio-button/getting-started-webapp) in each row. The radio button can be linked to a unique value from the data source, such as the primary key field. @@ -29,14 +29,14 @@ The following example demonstrates how to handle row selection in the Grid using - diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index 48b04fce1e..2d39078f61 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,13 +1,13 @@ --- layout: post title: Editing customization in DataGrid | Syncfusion -description: Learn here all about editing in Syncfusion Blazor DataGrid and more. +description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug --- -# Editing in Syncfusion® Blazor DataGrid +# Editing customization in Syncfusion Blazor DataGrid You can customize the appearance of editing-related elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various editing-related elements. @@ -50,7 +50,7 @@ In this example, the **.e-gridform** class represents the editing form, and the - + @@ -126,7 +126,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLStyZhJXEhbeSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLINOLffsrjCvCt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customizing the edit dialog header element @@ -152,7 +152,7 @@ In this example, the **.e-edit-dialog** class represents the edit dialog, and th - + @@ -224,7 +224,7 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDretyNVJZGMwDNm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBetEhJzsqPbguh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customizing the command column buttons @@ -254,7 +254,7 @@ In this example, the **.e-edit, .e-delete, .e-update, and .e-cancel-icon** class - + @@ -337,5 +337,4 @@ public class OrderData {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrItotrzWzFhlUN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrIjYBTfCdNCmvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md index f3d6ed94f3..bb484afd09 100644 --- a/blazor/datagrid/template-pdf-export.md +++ b/blazor/datagrid/template-pdf-export.md @@ -353,17 +353,21 @@ In the following example: -@code { + + +@code { SfGridDefaultGrid; diff --git a/blazor/datagrid/tool-bar.md b/blazor/datagrid/tool-bar.md index 2b29f12b52..6f6bfaea48 100644 --- a/blazor/datagrid/tool-bar.md +++ b/blazor/datagrid/tool-bar.md @@ -120,28 +120,28 @@ In the following example, the [Blazor Toggle Switch](https://help.syncfusion.com Orders = OrderData.GetAllRecords(); } - private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) + private async Task Change(Syncfusion.Blazor.Buttons.ChangeEventArgs args) { if (args.Checked) { - this.Grid.EnableToolbarItems(new List() { "Grid_Expand", "Grid_Collapse" }, false); + await this.Grid.EnableToolbarItemsAsync(new List() { "Grid_Expand", "Grid_Collapse" }, false); } else { - this.Grid.EnableToolbarItems(new List() { "Grid_Expand", "Grid_Collapse" }, true); + await this.Grid.EnableToolbarItemsAsync(new List() { "Grid_Expand", "Grid_Collapse" }, true); } } - + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Text == "Expand") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } diff --git a/blazor/datagrid/toolbar-items.md b/blazor/datagrid/toolbar-items.md index 555c8b9298..c3500bd09e 100644 --- a/blazor/datagrid/toolbar-items.md +++ b/blazor/datagrid/toolbar-items.md @@ -323,11 +323,11 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool { if (args.Item.Text == "Expand all") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse all") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } @@ -379,7 +379,7 @@ By default, custom Toolbar Items are positioned on the **left** side of the Tool {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVqiNBEKnOsnFxm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLIDOgtGItGVQpJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Both built-in and custom items in Toolbar @@ -496,7 +496,7 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the - + @@ -518,11 +518,11 @@ In the following sample, the **Collapse All** Toolbar item is positioned on the { if (args.Item.Text == "Expand all") { - await this.Grid.GroupExpandAll(); + await this.Grid.ExpandAllGroupAsync(); } if (args.Item.Text == "Collapse all") { - await this.Grid.GroupCollapseAll(); + await this.Grid.CollapseAllGroupAsync(); } } } @@ -628,27 +628,27 @@ This is demonstrated in the following sample code where there are custom toolbar }).ToList(); } - public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Text == "Add") { - Grid.AddRecord(); + await Grid.AddRecordAsync(); } if (args.Item.Text == "Edit") { - Grid.StartEdit(); + await Grid.StartEditAsync(); } if (args.Item.Text == "Delete") { - Grid.DeleteRecord(); + await Grid.DeleteRecordAsync(); } if (args.Item.Text == "Update") { - Grid.EndEdit(); + await Grid.EndEditAsync(); } if (args.Item.Text == "Cancel") { - Grid.CloseEdit(); + await Grid.CloseEditAsync(); } } @@ -674,8 +674,9 @@ You can customize the toolbar items tooltip text by adding toolbar items externa @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations - + + @@ -683,10 +684,8 @@ You can customize the toolbar items tooltip text by adding toolbar items externa - @code { private SfGrid Grid; - public List Orders { get; set; } private List ToolbarItems = new List() { new ItemModel() { Text = "Excel",TooltipText="Export to Excel", PrefixIcon = "e-excelexport", Id = "Grid_excelexport"}, //Here Grid is SfGrid ID. @@ -694,6 +693,22 @@ You can customize the toolbar items tooltip text by adding toolbar items externa new ItemModel(){ Text = "CSV",TooltipText="Export to CSV", PrefixIcon= "e-csvexport", Id="Grid_csvexport"}, }; + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname. + { + await this.Grid.ExportToPdfAsync(); + } + else if (args.Item.Id == "Grid_excelexport") + { + await Grid.ExportToExcelAsync(); + } + else if (args.Item.Id == "Grid_csvexport") + { + await Grid.ExportToCsvAsync(); + } + } + protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); @@ -746,4 +761,4 @@ You can customize the toolbar items tooltip text by adding toolbar items externa {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVACXLuoSzCcoOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVIiXZMiFpezqWu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file