From 91b34e328c7dc67b109f1c4c798640e8b46b637f Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Mon, 6 Oct 2025 18:26:34 +0530 Subject: [PATCH 1/7] 984345: Updated the Samples in Blazor Grid --- blazor-toc.html | 1 + .../blazor-webassembly-data-grid-using-cli.md | 4 ++-- .../how-to/define-events-programmatically.md | 2 +- blazor/datagrid/how-to/enable-or-disable-grid.md | 2 +- .../how-to/resize-grid-in-various-dimension.md | 2 +- ...context-as-additional-parameters-from-events.md | 4 ++-- blazor/datagrid/how-to/server-side-using-cli.md | 4 ++-- .../how-to/use-radio-button-instead-of-checkbox.md | 4 ++-- blazor/datagrid/style-and-appearance/aggregate.md | 2 +- blazor/datagrid/style-and-appearance/editing.md | 14 +++++++------- blazor/datagrid/style-and-appearance/filtering.md | 2 +- blazor/datagrid/style-and-appearance/grouping.md | 2 +- blazor/datagrid/style-and-appearance/header.md | 2 +- blazor/datagrid/style-and-appearance/paging.md | 2 +- blazor/datagrid/style-and-appearance/selection.md | 2 +- blazor/datagrid/style-and-appearance/sorting.md | 2 +- .../style-and-appearance/style-and-appearance.md | 2 +- blazor/datagrid/style-and-appearance/toolbar.md | 2 +- 18 files changed, 28 insertions(+), 27 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index 8d23462444..66873ad6b2 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2137,6 +2137,7 @@
  • Paging
  • Selection
  • Sorting
    • +
  • Toolbar
  • How To 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..c9d633bf82 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 @@ -11,7 +11,7 @@ documentation: ug This article provides step-by-step instructions to build a Blazor WebAssembly App using the Syncfusion® Blazor DataGrid with the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). -## Using playground +## Using the 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. @@ -34,7 +34,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -### Create a Blazor WebAssembly App using .NET CLI +### Create a standalone Blazor WebAssembly project using .NET CLI To create a new Blazor WebAssembly App, open your terminal or command prompt and run: diff --git a/blazor/datagrid/how-to/define-events-programmatically.md b/blazor/datagrid/how-to/define-events-programmatically.md index 22df9cc5f7..51187fda59 100644 --- a/blazor/datagrid/how-to/define-events-programmatically.md +++ b/blazor/datagrid/how-to/define-events-programmatically.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Define the GridEvents programmatically in Blazor DataGrid +# Define Grid events programmatically in Blazor DataGrid In the Syncfusion® Blazor DataGrid, events are typically defined using the GridEvents child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This method is useful when events need to be assigned dynamically during the application lifecycle. 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/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index e1dc1fa3f7..c9bfe8b17c 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Resize the Blazor DataGrid in various dimension +# Resize the Blazor DataGrid in various dimensions The Syncfusion® Blazor DataGrid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. 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..da5a383dbe 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/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md index f8441cd612..3af993e241 100644 --- a/blazor/datagrid/how-to/server-side-using-cli.md +++ b/blazor/datagrid/how-to/server-side-using-cli.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Blazor DataGrid in Server Side App using CLI +# Blazor DataGrid in a standalone Blazor Server app using .NET CLI This article provides a step-by-step instructions to build a Blazor Server App with Syncfusion® Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). @@ -28,7 +28,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -### Create a Blazor Server side project using .NET Core CLI +### Create a standalone Blazor Server side project using .NET Core CLI To create a new Blazor Server application, open your terminal or command prompt and run: 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..11d4ebef9a 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. @@ -32,7 +32,7 @@ The following example demonstrates how to handle row selection in the Grid using diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index 1b2c078616..377a3593e6 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Aggregate in Syncfusion® Blazor DataGrid +# Aggregate customization in Syncfusion Blazor DataGrid You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements. diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index 48b04fce1e..cedaad81fe 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -7,7 +7,7 @@ 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,5 @@ 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/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index d9c71f66f2..384537aafa 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Filtering in Syncfusion® Blazor DataGrid +# Filtering customization in Syncfusion Blazor DataGrid You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters. diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index a99346e4b3..5534cfc6d2 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Grouping in Syncfusion® Blazor DataGrid +# Grouping customization in Syncfusion Blazor DataGrid You can customize the appearance of grouping elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell. diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index 942d6c0e5a..6d839c181c 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Header in Syncfusion® Blazor DataGrid +# Header customization in Syncfusion Blazor DataGrid You can customize the appearance of the header elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the Grid header, header cell, and header cell div element. diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 0b0bbe9d12..08828eb9b7 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Paging in Syncfusion® Blazor DataGrid +# Paging customization in Syncfusion Blazor DataGrid You can customize the appearance of the paging elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element. diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 43b546e79e..560ada595e 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Selection in Syncfusion® Blazor DataGrid +# Selection customization in Syncfusion Blazor DataGrid You can customize the appearance of the selection in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background. diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index da4547c290..34c302d94a 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Sorting in Syncfusion® Blazor DataGrid +# Sorting customization in Syncfusion Blazor DataGrid You can customize the appearance of the sorting icons and multi sorting icons in the Syncfusion® Blazor DataGrid using CSS. You can use the available Syncfusion® [icons](https://blazor.syncfusion.com/themestudio/?theme=material3) based on your theme. Here's how to do it: diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index dd68ec8987..6659ea361f 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Style and appearance in Syncfusion® Blazor DataGrid +# Style and appearance in Syncfusion Blazor DataGrid The Syncfusion® Blazor DataGrid offers various ways to customize its appearance using both default CSS and custom themes. Let's go over some common approaches: diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 585e86f921..726cd4d6db 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Toolbar in Syncfusion® Blazor DataGrid +# Toolbar customization in Syncfusion Blazor DataGrid You can customize the appearance of the toolbar in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the toolbar root element and toolbar button element. From 44946acf5323eb8262b82be411c70f6feb410317 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Thu, 9 Oct 2025 12:32:55 +0530 Subject: [PATCH 2/7] 984345: Updated the Samples in Blazor Grid --- blazor/datagrid/adding-header-and-footer.md | 4 +- blazor/datagrid/footer-aggregate.md | 2 +- .../datagrid/group-and-caption-aggregate.md | 2 +- blazor/datagrid/paging.md | 2 + blazor/datagrid/reactive-aggregate.md | 4 +- blazor/datagrid/template-pdf-export.md | 24 ++++++---- blazor/datagrid/tool-bar.md | 12 ++--- blazor/datagrid/toolbar-items.md | 47 ++++++++++++------- 8 files changed, 59 insertions(+), 38 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/footer-aggregate.md b/blazor/datagrid/footer-aggregate.md index f6a54ce2ea..89a7a9a340 100644 --- a/blazor/datagrid/footer-aggregate.md +++ b/blazor/datagrid/footer-aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Footer aggregate in Blazor DataGrid +# Footer aggregates in Blazor DataGrid The Syncfusion® Blazor DataGrid allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the Grid. You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render the aggregate value in the footer cells. diff --git a/blazor/datagrid/group-and-caption-aggregate.md b/blazor/datagrid/group-and-caption-aggregate.md index 038a9b5d39..20dd14cc9b 100644 --- a/blazor/datagrid/group-and-caption-aggregate.md +++ b/blazor/datagrid/group-and-caption-aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Group and caption aggregate in Blazor DataGrid +# Group and caption aggregates in Blazor DataGrid Group footer and caption aggregates in the Syncfusion® Blazor DataGrid allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md index be2913e490..6ae623f233 100644 --- a/blazor/datagrid/paging.md +++ b/blazor/datagrid/paging.md @@ -450,6 +450,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Navigations @@ -469,6 +470,7 @@ The following example demonstrates how to render a **NumericTextBox** in the pag of @totalPages pages (@GridData.Count items) + } diff --git a/blazor/datagrid/reactive-aggregate.md b/blazor/datagrid/reactive-aggregate.md index e2f88b27f6..84e07e1cc6 100644 --- a/blazor/datagrid/reactive-aggregate.md +++ b/blazor/datagrid/reactive-aggregate.md @@ -7,11 +7,11 @@ control: DataGrid documentation: ug --- -# Reactive aggregate in Blazor DataGrid +# Reactive aggregates in Blazor DataGrid The Syncfusion® Blazor DataGrid provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the Grid. -## Auto update aggregate value in batch editing +## Auto update aggregate values in batch editing When the Grid is in batch editing mode, the aggregate values in the footer, group footer, and group caption are automatically refreshed every time a cell is saved. This ensures that the aggregate values accurately reflect the edited data. 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 From fe1316e04bf0e3050c71e9aa01256e8c519fbe38 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Thu, 9 Oct 2025 12:58:30 +0530 Subject: [PATCH 3/7] 984345: Updated the Samples in Blazor Grid --- blazor/datagrid/how-to/resize-grid-in-various-dimension.md | 2 +- blazor/datagrid/paging.md | 2 +- blazor/datagrid/style-and-appearance/aggregate.md | 2 +- blazor/datagrid/style-and-appearance/editing.md | 2 +- blazor/datagrid/style-and-appearance/filtering.md | 2 +- blazor/datagrid/style-and-appearance/grouping.md | 2 +- blazor/datagrid/style-and-appearance/header.md | 2 +- blazor/datagrid/style-and-appearance/paging.md | 2 +- blazor/datagrid/style-and-appearance/selection.md | 2 +- blazor/datagrid/style-and-appearance/sorting.md | 2 +- blazor/datagrid/style-and-appearance/toolbar.md | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index c9bfe8b17c..84b7bef108 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -1,7 +1,7 @@ --- layout: post title: Resize the Blazor DataGrid in various dimension | Syncfusion -description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid. +description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid components. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md index 6ae623f233..1ebe43104e 100644 --- a/blazor/datagrid/paging.md +++ b/blazor/datagrid/paging.md @@ -9,7 +9,7 @@ documentation: ug # Paging in Blazor DataGrid -[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfsion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets. +[Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) provides an option to display Syncfusion Blazor DataGrid data in segmented pages, making it easier to navigate through large datasets. This feature is particularly useful when dealing with extensive data sets. To enable paging, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the Grid. When paging is enabled, a pager rendered at the bottom of the Grid, allowing you to navigate through different pages of data. diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index 377a3593e6..c797914da2 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -1,7 +1,7 @@ --- layout: post title: Aggregate customization in Blazor DataGrid | Syncfusion -description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more. +description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index cedaad81fe..a0d1c3bb0b 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,7 +1,7 @@ --- 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 in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index 384537aafa..d937137e32 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering customization in Blazor DataGrid | Syncfusion -description: Learn here all about filtering in Syncfusion Blazor DataGrid and more. +description: Learn here all about filtering in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index 5534cfc6d2..ac82cb7d62 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -1,7 +1,7 @@ --- layout: post title: Grouping customization in Blazor DataGrid | Syncfusion -description: Learn here all about grouping in Syncfusion Blazor DataGrid and more. +description: Learn here all about grouping in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index 6d839c181c..c865b9face 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,7 +1,7 @@ --- layout: post title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header in Syncfusion Blazor DataGrid and more. +description: Learn here all about header in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 08828eb9b7..26dca088f8 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging in Syncfusion Blazor DataGrid and more. +description: Learn here all about paging in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 560ada595e..3aaf030706 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection customization in Blazor DataGrid | Syncfusion -description: Learn here all about selection in Syncfusion Blazor DataGrid and more. +description: Learn here all about selection in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index 34c302d94a..02ce331b0f 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting customization in Blazor DataGrid | Syncfusion -description: Learn here all about sorting in Syncfusion Blazor DataGrid and more. +description: Learn here all about sorting in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 726cd4d6db..0da8803e08 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -1,7 +1,7 @@ --- layout: post title: Toolbar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more. +description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more details. platform: Blazor control: DataGrid documentation: ug From 83a062df1ba18fe78cbaa03c99cf96ba33d7f868 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Thu, 9 Oct 2025 14:35:48 +0530 Subject: [PATCH 4/7] 984345: Updated the Samples in Blazor Grid --- blazor/datagrid/how-to/resize-grid-in-various-dimension.md | 2 +- blazor/datagrid/style-and-appearance/aggregate.md | 2 +- blazor/datagrid/style-and-appearance/editing.md | 2 +- blazor/datagrid/style-and-appearance/filtering.md | 2 +- blazor/datagrid/style-and-appearance/grouping.md | 2 +- blazor/datagrid/style-and-appearance/header.md | 2 +- blazor/datagrid/style-and-appearance/paging.md | 2 +- blazor/datagrid/style-and-appearance/selection.md | 2 +- blazor/datagrid/style-and-appearance/sorting.md | 2 +- blazor/datagrid/style-and-appearance/toolbar.md | 2 +- 10 files changed, 10 insertions(+), 10 deletions(-) diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index 84b7bef108..68da50ba70 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -1,7 +1,7 @@ --- layout: post title: Resize the Blazor DataGrid in various dimension | Syncfusion -description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid components. +description: Learn here all about resize the Grid in various dimension in Syncfusion Blazor DataGrid components and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index c797914da2..b4bcd02dd7 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -1,7 +1,7 @@ --- layout: post title: Aggregate customization in Blazor DataGrid | Syncfusion -description: Learn here all about aggregate in Syncfusion Blazor DataGrid and more details. +description: Learn here all about aggregate customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index a0d1c3bb0b..b327f2e1b4 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -1,7 +1,7 @@ --- layout: post title: Editing customization in DataGrid | Syncfusion -description: Learn here all about editing in Syncfusion Blazor DataGrid and more details. +description: Learn here all about editing customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index d937137e32..1fc9a28b96 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -1,7 +1,7 @@ --- layout: post title: Filtering customization in Blazor DataGrid | Syncfusion -description: Learn here all about filtering in Syncfusion Blazor DataGrid and more details. +description: Learn here all about filtering customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index ac82cb7d62..2f439e067d 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -1,7 +1,7 @@ --- layout: post title: Grouping customization in Blazor DataGrid | Syncfusion -description: Learn here all about grouping in Syncfusion Blazor DataGrid and more details. +description: Learn here all about grouping customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index c865b9face..e7afaae4e2 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,7 +1,7 @@ --- layout: post title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header in Syncfusion Blazor DataGrid and more details. +description: Learn here all about header customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 26dca088f8..521263d2b9 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging in Syncfusion Blazor DataGrid and more details. +description: Learn here all about paging customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 3aaf030706..8ccb165bf6 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection customization in Blazor DataGrid | Syncfusion -description: Learn here all about selection in Syncfusion Blazor DataGrid and more details. +description: Learn here all about selection customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index 02ce331b0f..0c8e0e31c0 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -1,7 +1,7 @@ --- layout: post title: Sorting customization in Blazor DataGrid | Syncfusion -description: Learn here all about sorting in Syncfusion Blazor DataGrid and more details. +description: Learn here all about sorting customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 0da8803e08..1caffefa62 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -1,7 +1,7 @@ --- layout: post title: Toolbar in Blazor DataGrid | Syncfusion -description: Checkout and learn here all about toolbar in Syncfusion Blazor DataGrid and more details. +description: Checkout and learn here all about toolbar customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug From 2a604193605b0bedbc1aa88209cbad5da46a110a Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Thu, 9 Oct 2025 15:16:58 +0530 Subject: [PATCH 5/7] 984345: Updated the Samples in Blazor Grid --- blazor/datagrid/style-and-appearance/header.md | 2 +- blazor/datagrid/style-and-appearance/paging.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index e7afaae4e2..c2d1a13a18 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -1,7 +1,7 @@ --- layout: post title: Header customization in Blazor DataGrid | Syncfusion -description: Learn here all about header customization in Syncfusion Blazor DataGrid component and more details. +description: Checkout and learn here all about header customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 521263d2b9..4c62acd336 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -1,7 +1,7 @@ --- layout: post title: Paging customization in Blazor DataGrid | Syncfusion -description: Learn here all about paging customization in Syncfusion Blazor DataGrid component and more details. +description: Checkout and learn here all about paging customization in Syncfusion Blazor DataGrid component and more details. platform: Blazor control: DataGrid documentation: ug From 02413602de9c563a5b49a31ab54dc920506534c5 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Mon, 13 Oct 2025 22:47:40 +0530 Subject: [PATCH 6/7] 984345: Updated the Samples in Blazor Grid --- blazor-toc.html | 1 - blazor/datagrid/footer-aggregate.md | 2 +- blazor/datagrid/group-and-caption-aggregate.md | 2 +- .../datagrid/how-to/blazor-webassembly-data-grid-using-cli.md | 4 ++-- blazor/datagrid/how-to/define-events-programmatically.md | 2 +- blazor/datagrid/how-to/resize-grid-in-various-dimension.md | 2 +- .../send-context-as-additional-parameters-from-events.md | 2 +- blazor/datagrid/how-to/server-side-using-cli.md | 4 ++-- .../datagrid/how-to/use-radio-button-instead-of-checkbox.md | 2 +- blazor/datagrid/reactive-aggregate.md | 4 ++-- blazor/datagrid/style-and-appearance/aggregate.md | 2 +- blazor/datagrid/style-and-appearance/editing.md | 2 +- blazor/datagrid/style-and-appearance/filtering.md | 2 +- blazor/datagrid/style-and-appearance/grouping.md | 2 +- blazor/datagrid/style-and-appearance/header.md | 2 +- blazor/datagrid/style-and-appearance/paging.md | 2 +- blazor/datagrid/style-and-appearance/selection.md | 2 +- blazor/datagrid/style-and-appearance/sorting.md | 2 +- blazor/datagrid/style-and-appearance/style-and-appearance.md | 2 +- blazor/datagrid/style-and-appearance/toolbar.md | 2 +- 20 files changed, 22 insertions(+), 23 deletions(-) diff --git a/blazor-toc.html b/blazor-toc.html index 66873ad6b2..8d23462444 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2137,7 +2137,6 @@
  • Paging
  • Selection
  • Sorting
    • -
  • Toolbar
  • How To diff --git a/blazor/datagrid/footer-aggregate.md b/blazor/datagrid/footer-aggregate.md index 89a7a9a340..f6a54ce2ea 100644 --- a/blazor/datagrid/footer-aggregate.md +++ b/blazor/datagrid/footer-aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Footer aggregates in Blazor DataGrid +# Footer aggregate in Blazor DataGrid The Syncfusion® Blazor DataGrid allows you to calculate and display aggregate values in the footer cells. The footer aggregate value is calculated from all the rows in the Grid. You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate) property to render the aggregate value in the footer cells. diff --git a/blazor/datagrid/group-and-caption-aggregate.md b/blazor/datagrid/group-and-caption-aggregate.md index 20dd14cc9b..038a9b5d39 100644 --- a/blazor/datagrid/group-and-caption-aggregate.md +++ b/blazor/datagrid/group-and-caption-aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Group and caption aggregates in Blazor DataGrid +# Group and caption aggregate in Blazor DataGrid Group footer and caption aggregates in the Syncfusion® Blazor DataGrid allow you to calculate aggregate values based on the current group items. These aggregate values can be displayed in the group footer cells and group caption cells, respectively. To achieve this, you can use the [GroupFooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupFooterTemplate) and [GroupCaptionTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_GroupCaptionTemplate) properties of the [GridAggregateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn__ctor) component. 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 c9d633bf82..6032961283 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 @@ -11,7 +11,7 @@ documentation: ug This article provides step-by-step instructions to build a Blazor WebAssembly App using the Syncfusion® Blazor DataGrid with the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). -## Using the Playground +## 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. @@ -34,7 +34,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -### Create a standalone Blazor WebAssembly project using .NET CLI +### Create a Blazor WebAssembly App using .NET CLI To create a new Blazor WebAssembly App, open your terminal or command prompt and run: diff --git a/blazor/datagrid/how-to/define-events-programmatically.md b/blazor/datagrid/how-to/define-events-programmatically.md index 51187fda59..22df9cc5f7 100644 --- a/blazor/datagrid/how-to/define-events-programmatically.md +++ b/blazor/datagrid/how-to/define-events-programmatically.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Define Grid events programmatically in Blazor DataGrid +# Define the GridEvents programmatically in Blazor DataGrid In the Syncfusion® Blazor DataGrid, events are typically defined using the GridEvents child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This method is useful when events need to be assigned dynamically during the application lifecycle. diff --git a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md index 68da50ba70..7ef46a9c68 100644 --- a/blazor/datagrid/how-to/resize-grid-in-various-dimension.md +++ b/blazor/datagrid/how-to/resize-grid-in-various-dimension.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Resize the Blazor DataGrid in various dimensions +# Resize the Blazor DataGrid in various dimension The Syncfusion® Blazor DataGrid offers a friendly way to resize the Grid, allowing you to adjust its width and height for improved data visualization. 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 da5a383dbe..18948e537f 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 in Blazor DataGrid Events +# Sending context as additional parameters from events in Blazor DataGrid 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. diff --git a/blazor/datagrid/how-to/server-side-using-cli.md b/blazor/datagrid/how-to/server-side-using-cli.md index 3af993e241..f8441cd612 100644 --- a/blazor/datagrid/how-to/server-side-using-cli.md +++ b/blazor/datagrid/how-to/server-side-using-cli.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Blazor DataGrid in a standalone Blazor Server app using .NET CLI +# Blazor DataGrid in Server Side App using CLI This article provides a step-by-step instructions to build a Blazor Server App with Syncfusion® Blazor DataGrid using the [.NET CLI](https://dotnet.microsoft.com/en-us/download/dotnet). @@ -28,7 +28,7 @@ dotnet --version {% endhighlight %} {% endtabs %} -### Create a standalone Blazor Server side project using .NET Core CLI +### Create a Blazor Server side project using .NET Core CLI To create a new Blazor Server application, open your terminal or command prompt and run: 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 11d4ebef9a..153ba27d06 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 in Blazor DataGrid +# How to use radio button instead of checkbox for row selection 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. diff --git a/blazor/datagrid/reactive-aggregate.md b/blazor/datagrid/reactive-aggregate.md index 84e07e1cc6..e2f88b27f6 100644 --- a/blazor/datagrid/reactive-aggregate.md +++ b/blazor/datagrid/reactive-aggregate.md @@ -7,11 +7,11 @@ control: DataGrid documentation: ug --- -# Reactive aggregates in Blazor DataGrid +# Reactive aggregate in Blazor DataGrid The Syncfusion® Blazor DataGrid provides support for reactive aggregates, which allow you to update the aggregate values dynamically as the data changes. Reactive aggregates automatically recalculate their values when there are changes in the underlying data, providing real-time updates to the aggregate values in the Grid. -## Auto update aggregate values in batch editing +## Auto update aggregate value in batch editing When the Grid is in batch editing mode, the aggregate values in the footer, group footer, and group caption are automatically refreshed every time a cell is saved. This ensures that the aggregate values accurately reflect the edited data. diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md index b4bcd02dd7..e7bf9f6bb0 100644 --- a/blazor/datagrid/style-and-appearance/aggregate.md +++ b/blazor/datagrid/style-and-appearance/aggregate.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Aggregate customization in Syncfusion Blazor DataGrid +# Aggregate in Syncfusion® Blazor DataGrid You can customize the appearance of aggregate elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize the aggregate root element and the aggregate cell elements. diff --git a/blazor/datagrid/style-and-appearance/editing.md b/blazor/datagrid/style-and-appearance/editing.md index b327f2e1b4..d5ea8162fd 100644 --- a/blazor/datagrid/style-and-appearance/editing.md +++ b/blazor/datagrid/style-and-appearance/editing.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Editing customization in Syncfusion Blazor DataGrid +# Editing 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. diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md index 1fc9a28b96..1bc346d91d 100644 --- a/blazor/datagrid/style-and-appearance/filtering.md +++ b/blazor/datagrid/style-and-appearance/filtering.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Filtering customization in Syncfusion Blazor DataGrid +# Filtering in Syncfusion® Blazor DataGrid You can customize the appearance of filtering elements in the Syncfusion® Blazor DataGrid using CSS. Below are examples of how to customize various filtering elements, including filter bar cell elements, filter bar input elements, focus styles, clear icons, filter icons, filter dialog content, filter dialog footer, filter dialog input elements, filter dialog button elements, and Excel filter dialog number filters. diff --git a/blazor/datagrid/style-and-appearance/grouping.md b/blazor/datagrid/style-and-appearance/grouping.md index 2f439e067d..a203e6a897 100644 --- a/blazor/datagrid/style-and-appearance/grouping.md +++ b/blazor/datagrid/style-and-appearance/grouping.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Grouping customization in Syncfusion Blazor DataGrid +# Grouping in Syncfusion® Blazor DataGrid You can customize the appearance of grouping elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the group header, group expand/collapse icons, group caption row, and grouping indent cell. diff --git a/blazor/datagrid/style-and-appearance/header.md b/blazor/datagrid/style-and-appearance/header.md index c2d1a13a18..7238d64ab9 100644 --- a/blazor/datagrid/style-and-appearance/header.md +++ b/blazor/datagrid/style-and-appearance/header.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Header customization in Syncfusion Blazor DataGrid +# Header in Syncfusion® Blazor DataGrid You can customize the appearance of the header elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the Grid header, header cell, and header cell div element. diff --git a/blazor/datagrid/style-and-appearance/paging.md b/blazor/datagrid/style-and-appearance/paging.md index 4c62acd336..9f868b1df0 100644 --- a/blazor/datagrid/style-and-appearance/paging.md +++ b/blazor/datagrid/style-and-appearance/paging.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Paging customization in Syncfusion Blazor DataGrid +# Paging in Syncfusion® Blazor DataGrid You can customize the appearance of the paging elements in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the pager root element, pager container element, pager navigation elements, pager page numeric link elements, and pager current page numeric element. diff --git a/blazor/datagrid/style-and-appearance/selection.md b/blazor/datagrid/style-and-appearance/selection.md index 8ccb165bf6..0fdcdf1746 100644 --- a/blazor/datagrid/style-and-appearance/selection.md +++ b/blazor/datagrid/style-and-appearance/selection.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Selection customization in Syncfusion Blazor DataGrid +# Selection in Syncfusion® Blazor DataGrid You can customize the appearance of the selection in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the row selection background, cell selection background, and column selection background. diff --git a/blazor/datagrid/style-and-appearance/sorting.md b/blazor/datagrid/style-and-appearance/sorting.md index 0c8e0e31c0..a24fccecdc 100644 --- a/blazor/datagrid/style-and-appearance/sorting.md +++ b/blazor/datagrid/style-and-appearance/sorting.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Sorting customization in Syncfusion Blazor DataGrid +# Sorting in Syncfusion® Blazor DataGrid You can customize the appearance of the sorting icons and multi sorting icons in the Syncfusion® Blazor DataGrid using CSS. You can use the available Syncfusion® [icons](https://blazor.syncfusion.com/themestudio/?theme=material3) based on your theme. Here's how to do it: diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index 6659ea361f..ea7042ee0c 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Style and appearance in Syncfusion Blazor DataGrid +# Style and appearance in Syncfusion® Blazor DataGri The Syncfusion® Blazor DataGrid offers various ways to customize its appearance using both default CSS and custom themes. Let's go over some common approaches: diff --git a/blazor/datagrid/style-and-appearance/toolbar.md b/blazor/datagrid/style-and-appearance/toolbar.md index 1caffefa62..035641b0fd 100644 --- a/blazor/datagrid/style-and-appearance/toolbar.md +++ b/blazor/datagrid/style-and-appearance/toolbar.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Toolbar customization in Syncfusion Blazor DataGrid +# Toolbar in Syncfusion® Blazor DataGrid You can customize the appearance of the toolbar in the Syncfusion® Blazor DataGrid using CSS. Here are examples of how to customize the toolbar root element and toolbar button element. From 62f2b3e5dd72dc12ff6af26c31b14393a4813c03 Mon Sep 17 00:00:00 2001 From: Naveen-Palanivel Date: Tue, 14 Oct 2025 02:36:33 +0530 Subject: [PATCH 7/7] 984345: Updated the Samples in Blazor Grid --- blazor/datagrid/style-and-appearance/style-and-appearance.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/style-and-appearance/style-and-appearance.md b/blazor/datagrid/style-and-appearance/style-and-appearance.md index ea7042ee0c..dd68ec8987 100644 --- a/blazor/datagrid/style-and-appearance/style-and-appearance.md +++ b/blazor/datagrid/style-and-appearance/style-and-appearance.md @@ -7,7 +7,7 @@ control: DataGrid documentation: ug --- -# Style and appearance in Syncfusion® Blazor DataGri +# Style and appearance in Syncfusion® Blazor DataGrid The Syncfusion® Blazor DataGrid offers various ways to customize its appearance using both default CSS and custom themes. Let's go over some common approaches: