, , :** These warnings result from applying roles like row, columnheader, and gridcell to support assistive technologies. Confirm that navigation remains functional and document exceptions for audits.
-* **Role inheritance conflicts (role="button" with rowgroup descendants):** May appear when toolbar cells contain buttons. Maintain DOM hierarchy and verify focus order manually.
-* **Content not within a landmark element:** Add page-level landmarks (, , ) to scope interactive regions.
-* **Multiple elements with role="search" lacking unique labels:** Assign unique aria-label or aria-labelledby attributes to each search region.
-* **Text contrast 4.10:** Improve contrast ratio to at least 4.5:1 using CSS for standard text.
-*** Grid lacks a programmatic name:** Set aria-label or aria-labelledby on the main Grid container.
-* **role="rowgroup" not owned by a grid:** Ensure grouped content remains within the element that has role="grid".
+* aria-required-children: Appears when rendering the DataGrid without certain features or when toolbar and grouping are enabled. Ensure required child roles are present and suppress false positives if the structure is intentional.
+
+* color-contrast: Can occur when the search item is enabled in the toolbar. Adjust theme variables or apply custom CSS to meet WCAG 2.2 AA contrast requirements.
+
+* Invalid explicit ARIA roles on , , : These warnings result from applying roles like row, columnheader, and gridcell to support assistive technologies. Confirm that navigation remains functional and document exceptions for audits.
+
+* Role inheritance conflicts (role="button" with rowgroup descendants): May appear when toolbar cells contain buttons. Maintain DOM hierarchy and verify focus order manually.
+
+* Content not within a landmark element: Add page-level landmarks (, , ) to scope interactive regions.
+
+* Multiple elements with role="search" lacking unique labels: Assign unique aria-label or aria-labelledby attributes to each search regions.
+
+* Text contrast 4.10: Improve contrast ratio to at least 4.5:1 using CSS for standard text.
+
+* **DataGrid lacks a programmatic name:** Set aria-label or aria-labelledby on the main DataGrid container.
+
+* role="rowgroup" not owned by a grid: Ensure grouped content remains within the element that has role="grid".
To improve accessibility, apply page landmarks, assign unique labels to search regions, and verify that color contrast meets WCAG 2.2 AA standards. When customizing styles, maintain visible focus indicators and a logical focus order.
@@ -91,7 +93,7 @@ The Syncfusion® Blazor DataGrid supports ke
The supported keyboard shortcuts are listed below.
-Pager
+### Pager
| Windows | Mac | Actions |
|-------------------------------------------------------------------------|-------------------------------------|----------------------------------------|
@@ -103,92 +105,92 @@ The supported keyboard shortcuts are listed below.
| Home / Ctrl + Alt + PageUp | Fn + ← | Navigate to the first page. |
| End / Ctrl + Alt + PageDown | Fn + → | Navigate to the last page. |
-Focus Elements
+### Focus elements
| Windows | Mac | Actions |
|-----------------------------------|---------------------------------------------|------------------------------------------------------------|
-| Home | Fn + ← | Move focus to the first cell of the focused row. |
-| End | Fn + → | Move focus to the last cell of the focused row. |
-| Ctrl + Home | ⌘ + Fn + ← | Move focus to the first cell of the first row in the Grid. |
-| Ctrl + End | ⌘ + Fn + → | Move focus to the last cell of the last row in the Grid. |
-| ↑ | ↑ | Move the cell focus up from the focused cell. |
-| ↓ | ↓ | Move the cell focus down from the focused cell. |
-| → | → | Move the cell focus right from the focused cell. |
-| ← | ← | Move the cell focus left from the focused cell. |
-| Alt + J | ⌥ + J | Move focus to the Grid. |
-| Alt + W | ⌥ + W | Move focus to the Grid content element. |
-
-Selection
+| Home | Fn + ← | Shifts the focus to the first cell of the focused row. |
+| End | Fn + → | Shifts the focus to the last cell of the focused row. |
+| Ctrl + Home | ⌘ + Fn + ← | Shifts the focus to the first cell of the first row in the DataGrid. |
+| Ctrl + End | ⌘ + Fn + → | Shifts the focus to the last cell of the last row in the DataGrid. |
+| ↑ | ↑ | Moves the cell focus up from the focused cell. |
+| ↓ | ↓ | Moves the cell focus down from the focused cell. |
+| → | → | Moves the cell focus right from the focused cell. |
+| ← | ← | Moves the cell focus left from the focused cell. |
+| Alt + J | ⌥ + J | Move focus to the DataGrid. |
+| Alt + W | ⌥ + W | Move focus to the DataGrid content element. |
+
+### Selection
| Windows | Mac | Actions |
|-------------------------------------|---------------------------------|--------------------------------------------|
-| ↑ | ↑ | Move the row/cell selection up. |
-| ↓ | ↓ | Move the row/cell selection down. |
-| → | → | Move the cell selection right. |
-| ← | ← | Move the cell selection left. |
-| Shift + ↑ | ⇧ + ↑ | Extend the row/cell selection upward. |
-| Shift + ↓ | ⇧ + ↓ | Extend the row/cell selection downward. |
-| Shift + → | ⇧ + → | Extend the cell selection to the right. |
-| Shift + ← | ⇧ + ← | Extend the cell selection to the left. |
-| Enter | Enter | Move the row/cell selection down. |
-| Shift + Enter | ⇧ + Enter | Move the row/cell selection up. |
+| ↑ | ↑ | Moves the row/cell selection up from the current position. |
+| ↓ | ↓ | Moves the row/cell selection down from the current position. |
+| → | → | Moves the cell selection right from the current cell. |
+| ← | ← | Moves the cell selection left from the current cell. |
+| Shift + ↑ | ⇧ + ↑ | Extends the row/cell selection upward by rows or cells from the current selection. |
+| Shift + ↓ | ⇧ + ↓ | Extends the row/cell selection downward by rows or cells from the current selection. |
+| Shift + → | ⇧ + → | Extends the cell selection to the right from the current cell.. |
+| Shift + ← | ⇧ + ← | Extends the cell selection to the left from the current cell.. |
+| Enter | Enter | Moves the row/cell selection down by one row or cell. |
+| Shift + Enter | ⇧ + Enter | Moves the row/cell selection up by one row or cell. |
| Esc | Esc | Deselect all selected rows/cells. |
-| Ctrl + A | ⌘ + A | Select all rows/cells on the current page. |
+| Ctrl + A | ⌘ + A | Selects all rows/cells on the current page. |
-Grouping
+### Grouping
| Windows | Mac | Actions |
|------------------------------------|---------------------------------|-------------------------------------|
| Ctrl + ↑ | ⌘ + ↑ | Collapse all visible groups. |
| Ctrl + ↓ | ⌘ + ↓ | Expand all visible groups. |
-| Ctrl + Space | ⌘ + Space | Group by the focused header column. |
-| Alt + ↑ | ⌥ + ↑ | Collapse the selected group. |
+| Ctrl + Space | ⌘ + Space | Groups items when the header element is focused. |
+| Alt + ↑ | ⌥ + ↑ | Collapse the selected group. |
| Alt + ↓ | ⌥ + ↓ | Expand the selected group. |
-Print
+### Print
| Windows | Mac | Actions |
|--------------------------------|-----------------------------|-----------------|
-| Ctrl + P | ⌘ + P | Print the Grid. |
+| Ctrl + P | ⌘ + P | Print the DataGrid. |
-Clipboard
+### Clipboard
| Windows | Mac | Actions |
|---------------------------------------------------|--------------------------------------------|------------------------------------------------------------|
| Ctrl + C | ⌘ + C | Copy selected rows or cells to the clipboard. |
| Ctrl + Shift + H | ⌘ + ⇧ + H | Copy selected rows or cells with headers to the clipboard. |
-Editing
+### Editing
| Windows | Mac | Actions |
|-------------------------------------|---------------------------------|------------------------------------------------------------------------------------------------------------------------------|
-| F2 | F2 | Start editing the selected row (Normal/Dialog) or the selected cell (Batch). |
-| Enter | Enter | Save the form (Normal/Dialog) or save the current cell and start editing the next row cell (Batch). |
-| Insert | ⌥ + Enter | Create a new add form based on the NewRowPosition. |
+| F2 | F2 | Begins editing the selected row when **Mode** is `Normal` or `Dialog`, or begins editing the selected cell when **Mode** is `Batch`. |
+| Enter | Enter | Saves the current form if **Mode** is `Normal` or `Dialog`; saves the current cell and begins editing the next row cell if **Mode** is `Batch`. |
+| Insert | ⌥ + Enter | Create a new add form based on the `NewRowPosition`. |
| Delete | Delete | Delete the selected record. |
-| Tab | Tab | Navigate to the next editable cell (Normal/Dialog) or save the current cell and start editing the next cell (Batch). |
-| Shift + Tab | ⇧ + Tab | Navigate to the previous editable cell (Normal/Dialog) or save the current cell and start editing the previous cell (Batch). |
-| Shift + Enter | ⇧ + Enter | Save the current cell and start editing the previous row cell (Batch). |
+| Tab | Tab | Moves to the next editable cell if **Mode** is `Normal` or `Dialog`; saves the current cell and begins editing the next cell if **Mode** is `Batch`. |
+| Shift + Tab | ⇧ + Tab | Moves to the previous editable cell if **Mode** is `Normal` or `Dialog`; saves the current cell and begins editing the previous cell if **Mode** is `Batch`. |
+| Shift + Enter | ⇧ + Enter | Save the current cell and start editing the previous row cell when **Mode** is `Batch`. |
-Filtering
+### Filtering
| Windows | Mac | Actions |
|-------------------------------|-----------------------------|-----------------------------------------------------------------------------|
| Alt + ↓ | ⌥ + ↓ | Open the filter menu (Excel, menu, or checkbox) when its header is focused. |
-Column Menu
+### Column menu
| Windows | Mac | Actions |
|-------------------------------|-------------------------------|--------------------------------------------------|
| Alt + ↓ | Alt + ↓ | Open the column menu when its header is focused. |
-Reordering
+### Reordering
| Windows | Mac | Actions |
| ----- | ----- | ----- |
| Ctrl + ← / → | ⌘ + ← / → | Reorder the focused header column to the left or right. |
-Sorting
+### Sorting
| Windows | Mac | Actions |
|-----------------------------------------------|--------------------------------------------|---------------------------------------------------------|
@@ -204,7 +206,7 @@ For example:
## Ensuring accessibility
The Syncfusion® Blazor DataGrid is validated for accessibility using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) integrated with Playwright tests.
-Accessibility compliance can be evaluated using the interactive [sample](https://blazor.syncfusion.com/accessibility/datagrid), which demonstrates the Grid's behavior with accessibility tools and validation steps.
+Accessibility compliance can be evaluated using the interactive [sample](https://blazor.syncfusion.com/accessibility/datagrid), which demonstrates the DataGrid's behavior with accessibility tools and validation steps.
## See also
diff --git a/blazor/datagrid/adaptive-layout.md b/blazor/datagrid/adaptive-layout.md
index 1c491114df..a057d19957 100644
--- a/blazor/datagrid/adaptive-layout.md
+++ b/blazor/datagrid/adaptive-layout.md
@@ -7,17 +7,18 @@ control: DataGrid
documentation: ug
---
-# Adaptive UI Layout in Blazor DataGrid
+# Adaptive in Blazor DataGrid
-The Syncfusion® Blazor DataGrid includes an adaptive user interface designed for optimal usability on small screens. When enabled, the Grid renders filter, sort, column chooser, column menu (supported only when [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) is **Horizontal**), and edit dialogs in a full-screen, mobile-friendly layout. It also provides an option to render Grid row elements vertically for improved readability on narrow viewport.
+The Syncfusion® Blazor DataGrid user interface (UI) was redesigned to provide an optimal viewing experience and improve usability on small screens. This interface renders the filter, sort, column chooser, column menu (supports only when the [RowRenderingMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) is **Horizontal**) and edit dialogs adaptively and provides an option to render DataGrid row elements in the vertical direction.
-To learn how **Adaptive UI Layout** works in the Grid, watch the following video.
+To learn how **Adaptive UI Layout** works in the DataGrid, watch the following video.
{% youtube "youtube:https://www.youtube.com/watch?v=RFMGdOyEWFo"%}
+
## Render adaptive dialogs
-The Syncfusion® Blazor DataGrid can render adaptive dialogs to enhance the user experience on smaller screens. Enable the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property to display filter, sort, and edit dialogs in full-screen mode. This is especially helpful on devices with limited screen space.
+The Syncfusion® Blazor DataGrid offers a valuable feature for rendering adaptive dialogs, specifically designed to enhance usability on smaller screens. This feature is especially useful for optimizing the interface on devices with limited screen real estate. The functionality is enabled by setting the [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) property, allowing the DataGrid to render filter, sort, and edit dialogs in full-screen mode.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -515,11 +516,12 @@ The following features are supported in vertical row rendering:
-> The Column Menu feature (grouping, sorting, autofit, filter, and column chooser) is supported only when the Grid is in **Horizontal** [`RowRenderingMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode).
+> The Column Menu feature (grouping, sorting, autofit, filter, and column chooser) is supported only when the DataGrid is in **Horizontal** [`RowRenderingMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode).
+
## Rendering an adaptive layout for smaller screens alone
-By default, the adaptive UI layout is rendered on both mobile devices and desktop when [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) is set to **true**. To limit the adaptive layout to mobile screen sizes only, set the [`AdaptiveUIMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AdaptiveUIMode) property to **Mobile**. The default value of **AdaptiveUIMode** is **Both**.
+By default, the adaptive UI layout is rendered on both mobile devices and desktop when [`EnableAdaptiveUI`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableAdaptiveUI) is set to **true**. The DataGrid can be configured to render an adaptive layout only for mobile screen sizes by setting the [`AdaptiveUIMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AdaptiveUIMode) property to **Mobile**. The default value of **AdaptiveUIMode** is **Both**.
> The [`RowRenderingMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_RowRenderingMode) applied in the adaptive layout depends on the **AdaptiveUIMode** configuration.
diff --git a/blazor/datagrid/global-local.md b/blazor/datagrid/global-local.md
index 297cae7fc8..c000a9797d 100644
--- a/blazor/datagrid/global-local.md
+++ b/blazor/datagrid/global-local.md
@@ -9,11 +9,13 @@ documentation: ug
# Globalization in Blazor DataGrid
-The Syncfusion® Blazor DataGrid supports globalization to make applications accessible across regions and languages. Content can be displayed in the preferred culture with localized texts and culture-aware formats for a better user experience.
+The Syncfusion® Blazor DataGrid provides a Globalization feature (global and local) that enhances application accessibility for people from different regions and language backgrounds. Data can be displayed in preferred languages and formats, improving the overall user experience.
## Localization
-The Syncfusion® Blazor DataGrid supports localization of static text elements, such as **group drop area text** and **pager information**, can be localized to cultures like **Arabic**, **Deutsch**, **French**, and others.
+The Syncfusion® Blazor DataGrid includes a built-in Localization library that allows customization of text used in the DataGrid to match different languages or cultural preferences. The library enables changing static text on various elements such as the group drop area and pager information to languages like "Arabic", "German", "French", and more.
+
+Define the `locale` property and a translation object to configure localized text.
- Apply localization to replace default UI text with culture-specific translations.
- Configure localization by referring to the [Blazor Localization Documentation](https://blazor.syncfusion.com/documentation/common/localization).
@@ -185,7 +187,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
Install-Package Syncfusion.Blazor.Buttons -Version {{ site.releaseversion }}
```
-N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) documentation for a complete list of available packages.
+N> Syncfusion® Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) documentation for a complete list of available packages.
**Step 3: Register Syncfusion® Blazor Service**
@@ -234,13 +236,13 @@ namespace LocalizationSample.Client
{
public class SyncfusionLocalizer : ISyncfusionStringLocalizer
{
- // To get the locale key from mapped resources file
+ // To get the locale key from mapped resources file.
public string GetText(string key)
{
return this.ResourceManager.GetString(key);
}
- // To access the resource file and get the exact value for locale key
+ // To access the resource file and get the exact value for locale key.
public System.Resources.ResourceManager ResourceManager
{
@@ -459,7 +461,7 @@ Run the application to display the DataGrid with localized content and formats b
- The Right-to-Left (RTL) feature in the Syncfusion® Blazor DataGrid reverses the layout and text direction from left-to-right to right-to-left, supporting languages like **Arabic**, **Farsi**, and **Urdu**. Enabling RTL improves accessibility and delivers a natural reading experience for these languages.
-- To enable RTL, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) property to **true** in the DataGrid component.
+- To enable RTL, set the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnableRtl) property to **true** in the DataGrid.
- Follow these steps to configure RTL with a specific culture:
diff --git a/blazor/datagrid/paging.md b/blazor/datagrid/paging.md
index 3355b1c559..2d80bf0bc1 100644
--- a/blazor/datagrid/paging.md
+++ b/blazor/datagrid/paging.md
@@ -9,21 +9,28 @@ documentation: ug
# Paging in Blazor DataGrid
-Paging provides an option to display Syncfusion Blazor DataGrid data in segmented pages, making it easier to navigate large datasets. This feature is particularly useful when dealing with extensive data sets.
+Paging allows the Syncfusion® Blazor DataGrid to display data in segmented pages rather than loading the entire dataset at once. This greatly improves initial load performance and overall responsiveness especially with large datasets by rendering only the records of the current page.
-To enable paging, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. When paging is enabled, a pager is rendered at the bottom of the Grid, allowing navigation through different pages of data.
+## Enable paging
-Paging options can be configured through the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component. GridPageSettings allows control of page size, current page, and total record count.
+Enable paging by setting the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) property to **true**. When enabled, a pager is rendered (by default at the bottom) to navigate between pages.
-> For large data sources, paging improves performance by fetching and rendering only a subset of records per page. For remote data, combine paging with server-side data retrieval to avoid loading all records at once.
+Use [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) to configure paging options such as page size, current page, and total items count.
+
+> Paging improves performance by fetching and rendering only a subset of records. For remote data sources, combine paging with server-side retrieval to avoid loading all records at once.
## Customize the pager options
-Customizing pager options in Syncfusion® Blazor DataGrid helps adjust pagination to specific needs. The **PageCount** property sets the number of numeric buttons. The **CurrentPage** property defines the active page. The **PageSize** property specifies the number of records displayed per page. The **PageSizes** property provides a dropdown for selecting different page sizes.
+Customize the pager in the Syncfusion® Blazor DataGrid using `GridPageSettings`:
+
+- **PageCount**: Number of numeric links shown in the pager.
+- **CurrentPage**: The active page index.
+- **PageSize**: Number of records rendered per page.
+- **PageSizes**: Enables a page size `SfDropDownList` when set (boolean or array of strings).
### Change the page size
-The Syncfusion® Blazor DataGrid allows control over the number of records displayed per page. Use the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) to specify the initial page size. By default, **PageSize is 12**.
+The Syncfusion® Blazor DataGrid supports adjusting the number of records shown per page for flexible data presentation. Set the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSize) property in [GridPageSettings] to specify the initial page size. The default `PageSize` value is **12**.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -128,7 +135,6 @@ The Syncfusion® Blazor DataGrid allows cont
### Change the page count
The Syncfusion® Blazor DataGrid allows adjusting the number of numeric buttons displayed in the pager. By default, **PageCount is 8**.
-
To change the page count, use the [PageCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageCount) property in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings), which defines how many pages are shown in the pager container.
{% tabs %}
@@ -444,9 +450,9 @@ public class OrderData
## Pager with page size dropdown
-The pager with a page size dropdown in Syncfusion® Blazor DataGrid allows dynamically changing the number of records displayed in the Grid.
+The Syncfusion® Blazor DataGrid provides a built-in page size dropdown that enables adjusting the number of records displayed per page. This can be enabled by setting the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property in [GridPageSettings].
-To enable the page size dropdown, set the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property to true in [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings). This renders a dropdown list within the pager to select the desired page size. The selected value determines the number of records displayed on each page.
+When enabled, the pager displays a `SfDropDownList` that allows selecting the preferred page size, and the DataGrid updates immediately based on the selected value.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -523,12 +529,14 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVfjCjETzzrPfLW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
> * If the PageSizes property is set to a boolean value (true or false), the page size dropdown defaults to options such as [‘All’, ‘5’, ‘10’, ‘15’, ‘20’].
-> * Refer to the [Blazor Grid Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) feature tour for an overview of paging.
+> * Refer to the [Blazor DataGrid Paging](https://www.syncfusion.com/blazor-components/blazor-datagrid/paging) feature tour for an overview of paging.
> * Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour and the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation.
### Customize page size dropdown
-The Syncfusion® Blazor DataGrid allows customizing the default values in the page size dropdown. To do this, define the [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridPageSettings.html#Syncfusion_Blazor_Grids_GridPageSettings_PageSizes) property as an array of strings instead of a boolean.
+The Syncfusion® Blazor DataGrid allows customizing the page size dropdown by setting the [pageSizes](https://ej2.syncfusion.com/react/documentation/api/grid/pageSettings#pagesizes) property as an array of strings. This defines the selectable page size options and controls the number of records displayed per page.
+
+The following example demonstrates configuring custom values for the pager dropdown using the `PageSizes` property:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -603,9 +611,9 @@ The Syncfusion® Blazor DataGrid allows cust
## How to navigate to particular page
-Navigating to a particular page in the Syncfusion® Blazor DataGrid is useful when dealing with large datasets, enabling quick jumps to specific pages.
+The Syncfusion® Blazor DataGrid supports programmatic page navigation through the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method. This method is useful for quickly accessing a particular page, especially when working with large datasets.
-To navigate programmatically, use the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GoToPageAsync_System_Int32_) method.
+The example below demonstrates navigating to a specific page by using `GoToPageAsync` method through an external button click based on textbox input.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -708,7 +716,9 @@ public class OrderData
## Dynamically calculate page size based on element height
-It is possible to dynamically calculate the page size of a Grid by considering the height of its parent element. This helps ensure the Grid’s content fits the available space and avoids unnecessary scrolling. When the parent element’s height changes, computing the PageSize accordingly adjusts the number of visible records and prevents empty space or overflow.
+The Syncfusion® Blazor DataGrid supports calculating the pageSize dynamically based on the height of its parent element. This ensures efficient use of available space by adjusting the number of displayed records to prevent unnecessary scrolling or empty areas.
+
+The following example demonstrates updating the `PageSize` dynamically using the `ValueChange`event of `SfNumericTextBox`:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -803,11 +813,11 @@ It is possible to dynamically calculate the page size of a Grid by considering t
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJZWhzpcLcPshm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Render pager at the top of the Grid
+## Render pager at the top of the DataGrid
-By default, the pager is rendered at the bottom of the Grid when [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) is enabled. Using [Pager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html) component, it is possible to render a pager at the top of the Grid. This is achieved by keeping the Grid’s internal pager disabled (`AllowPaging` set to **false**) and rendering `Pager` externally. Paging actions are synchronized with the Grid by manually applying Skip and Take based on the pager events.
+By default, the pager is rendered at the bottom of the DataGrid when [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPaging) is enabled. Using [SfPager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html), it is possible to render a pager at the top of the DataGrid. This is achieved by keeping the DataGrid’s internal pager disabled (`AllowPaging` set to **false**) and rendering `Pager` externally. Paging actions are synchronized with the DataGrid by manually applying `Skip` and `Take` based on the `SfPager` events.
-In the following sample, `Pager` component is rendered above the Grid. Initially, the Pager’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) determines the number of records shown. The SfPager also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property to offer a dropdown of sizes such as { 5, 10, 12, 20 }. Navigation is handled in the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event by computing SkipValue and TakeValue using PageSize and the current page.
+In the following sample, `Pager` is rendered above the DataGrid. Initially, the `SfPager`’s [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSize) determines the number of records shown. This also includes a [PageSizes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_PageSizes) property to offer a dropdown of sizes such as { 5, 10, 12, 20 }. Navigation is handled in the [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) event by computing SkipValue and TakeValue using `PageSize` and the `CurrentPage`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -918,7 +928,7 @@ In the following sample, `Pager` component is rendered above the Grid. Initially
{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpChMvrRAWDWAS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * In this approach, the Grid’s default pager is not used.
+> * In this approach, the DataGrid’s default pager is not used.
> * During paging, the pager triggers the following events:
> * [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_Created) — triggered when the Pager is created.
> * [ItemClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfPager.html#Syncfusion_Blazor_Navigations_SfPager_ItemClick) — triggered when a numeric item in the pager is clicked.
@@ -930,7 +940,7 @@ The Syncfusion® Blazor DataGrid triggers tw
[PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) - Triggered before any paging action (such as changing the page or page size). Use this event to customize or control paging behavior.
-[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) - Triggered after a paging action completes. It provides information such as CurrentPage, CurrentPageSize, PreviousPage, and TotalPages. Use this event to perform follow-up actions or update the UI.
+[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) - Triggered after a paging action completes. It provides information such as `CurrentPage`, `CurrentPageSize`, `PreviousPage`, and `TotalPages`. Use this event to perform follow-up actions or update the UI.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/performance.md b/blazor/datagrid/performance.md
index 4043fbec83..4faa9b515c 100644
--- a/blazor/datagrid/performance.md
+++ b/blazor/datagrid/performance.md
@@ -7,13 +7,13 @@ control: DataGrid
documentation: ug
---
-# Performance Optimization for Syncfusion Blazor DataGrid
+# Performance tips for Blazor DataGrid
-The Syncfusion® Blazor DataGrid provides advanced features for displaying and managing large collections of data. When working with extensive datasets or grids containing numerous columns, performance optimization becomes essential to ensure responsive rendering and smooth interactions. This guide outlines proven strategies and best practices for improving DataGrid performance during data binding and rendering operations.
+This article is a comprehensive guide on improving the loading performance of the Syncfusion® Blazor DataGrid, especially when dealing with large datasets and a large number of columns. It provides clear guidance on how to bind large data sources without encountering performance degradations. By offering detailed explanations and actionable tips, this resource aims to empower readers with the knowledge and best practices necessary to optimize the performance of the Blazor DataGrid during data binding, ensuring a smooth and efficient user experience.
## How to improve loading performance by binding large dataset
-Rendering large collections in the Syncfusion® Blazor DataGrid can impact performance because each cell is treated as an individual Blazor component. To maintain responsiveness and reduce rendering overhead, apply the following optimization techniques:
+Rendering large collections in the Syncfusion® Blazor DataGrid can impact performance because each cell is rendered individually. To maintain responsiveness and reduce rendering overhead, apply the following optimization techniques:
**Key performance optimization techniques**
@@ -26,7 +26,7 @@ Rendering large collections in the Syncfusion®® Blazor DataGrid optimizes rendering by displaying only the columns currently visible within the viewport. Additional columns are loaded dynamically as the user scrolls horizontally. This approach significantly reduces initial load time and improves responsiveness when working with grids that contain a large number of columns.
+[Column virtualization](https://blazor.syncfusion.com/documentation/datagrid/virtualization#column-virtualization) in the Syncfusion® Blazor DataGrid optimizes rendering by displaying only the columns currently visible within the viewport. Additional columns are loaded dynamically as the user scrolls horizontally. This feature is particularly useful when dealing with DataGrids that have a large number of columns, as it helps to improve the performance and reduce the initial loading time.
Both **row** and **column** virtualization can be enabled together to handle large collections efficiently. This combination ensures that only visible rows and columns are rendered, minimizing DOM elements and enhancing overall performance.
@@ -109,9 +109,9 @@ The Syncfusion® Blazor DataGrid can be opti
* Prevent redundant rendering operations to improve performance.
-2. [Avoid unnecessary component renders after grid events](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events)
+2. [Avoid unnecessary renders after DataGrid events](https://blazor.syncfusion.com/documentation/datagrid/webassembly-performance#avoid-unnecessary-component-renders-after-grid-events)
- * Ensure grid events do not trigger unnecessary re-renders.
+ * Ensure DataGrid events do not trigger unnecessary re-renders.
For additional guidelines, refer to the official Blazor WebAssembly performance [documentation](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance/?view=aspnetcore-8.0).
@@ -123,7 +123,7 @@ When binding data from a service to the Syncfusion&re
1. **Assign Data in the Created Event**
- Set the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) in the Grid’s [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event instead of `OnInitializedAsync`. This ensures the Grid is rendered before data assignment, reducing startup delays.
+ Set the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) in the DataGrid’s [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event instead of `OnInitializedAsync`. This ensures the DataGrid is rendered before data assignment, reducing startup delays.
2. **Use Custom Binding for Large Collections**
@@ -138,7 +138,7 @@ For detailed guidance, refer to:
To optimize the initial rendering and improve performance during interactions, use the individual NuGet package (**Syncfusion.Blazor.Grid**) along with its corresponding script and CSS files instead of the consolidated package (**Syncfusion.Blazor**).
-The consolidated package includes resources for all Syncfusion Blazor components, which increases overall package size and script load time. Referencing only the required Grid resources reduces payload size and improves rendering performance.
+The consolidated package includes resources for all Syncfusion Blazor controls, which increases overall package size and script load time. Referencing only the required DataGrid resources reduces payload size and improves rendering performance.
For more details, refer to:
@@ -149,7 +149,7 @@ For more details, refer to:
The Syncfusion® Blazor DataGrid allows updating cell values efficiently without triggering frequent server calls. This approach is useful for live update scenarios where data is initially bound from the server but subsequent edits should not refresh the database.
-Use the [SetRowDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_System_Boolean_) method to update the Grid UI without affecting the underlying data source. To prevent database updates, pass **true** for the `preventDataUpdate` argument. Additionally, cancel built-in edit operations by setting **args.Cancel** to **true**.
+Use the [SetRowDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetRowDataAsync_System_Object__0_System_Boolean_) method to update the DataGrid UI without affecting the underlying data source. To prevent database updates, pass **true** for the `preventDataUpdate` argument. Additionally, cancel built-in edit operations by setting **args.Cancel** to **true**.
```csharp
public async Task OnClick()
@@ -167,9 +167,9 @@ public async Task OnClick()
## How to optimize server-side data operations with adaptors
-The Syncfusion® Blazor DataGrid supports multiple adaptors such as [OData](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data#binding-with-odata-services), [ODataV4](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor), [WebAPI](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor), and [URL](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor) for performing server-side data operations and CRUD actions. These adaptors work with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component to bind remote data sources and execute operations efficiently.
+The Syncfusion® Blazor DataGrid supports multiple adaptors such as [OData](https://blazor.syncfusion.com/documentation/datagrid/data-binding/remote-data#binding-with-odata-services), [ODataV4](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/odatav4-adaptor), [WebAPI](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/web-api-adaptor), and [URL](https://blazor.syncfusion.com/documentation/datagrid/connecting-to-adaptors/url-adaptor) for performing server-side data operations and CRUD actions. These adaptors work with the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) to bind remote data sources and execute operations efficiently.
-During actions like **filtering**, **sorting**, **paging**, and **grouping**, the Grid generates queries based on the adaptor configuration. The application must process these queries and return the appropriate data to the Grid. For optimal performance, handle operations in the following order:
+During actions like **filtering**, **sorting**, **paging**, and **grouping**, the DataGrid generates queries based on the adaptor configuration. The application must process these queries and return the appropriate data to the DataGrid. For optimal performance, handle operations in the following order:
* Filtering
* Sorting
diff --git a/blazor/datagrid/state-management.md b/blazor/datagrid/state-management.md
index c752c0da67..d9eb9c264e 100644
--- a/blazor/datagrid/state-management.md
+++ b/blazor/datagrid/state-management.md
@@ -9,9 +9,9 @@ documentation: ug
# State Management in Blazor DataGrid
-The Syncfusion® Blazor DataGrid supports state management to preserve grid configuration across browser reloads and page navigation within the same session. Persisted settings include **paging**, **sorting**, **filtering**, **grouping**, **column visibility**, and similar configurations. State persistence applies only to grid settings; the underlying data must be reloaded when the page refreshes.
+State management in the Blazor DataGrid enables maintaining the DataGrid's configuration across browser reloads and during navigation within the same browser session. Persisted settings include **paging**, **sorting**, **filtering**, **grouping**, and **column visibility**. The DataGrid persists only its configuration; the underlying data must still be reloaded when the page refreshes.
-Enable state persistence by setting the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property to **true**. When enabled, the grid stores its state in the browser’s [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), retaining settings until cleared.
+Enable state persistence by setting the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property to **true**. When enabled, the DataGrid stores its state in the browser’s [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), retaining settings until cleared.
```cs
@@ -19,9 +19,9 @@ Enable state persistence by setting the [EnablePersistence](https://help.syncfus
```
-> The Grid stores its state using a key that combines the **component name** and its assigned **ID**. For example, if the component name is **Grid** and the ID is **OrderDetails**, the state key will be **gridOrderDetails**.
+> The DataGrid stores its state using a key that combines the **component name** and its assigned **ID**. For example, if the component name is **Grid** and the ID is **OrderDetails**, the state key will be **gridOrderDetails**.
-When state persistence is enabled, the Grid saves the following settings in local storage:
+When state persistence is enabled, the DataGrid saves the following settings in local storage:
| **Feature** | **Persisted Properties** | **Ignored Properties** |
|----------------------|-------------------------------------------------------------------------------------------------------------|--------------------------------------------|
@@ -37,7 +37,7 @@ When state persistence is enabled, the Grid saves the following settings in loca
> When a row is initially selected using the `SelectedRowIndex` property, only that configured value is persisted. Changes made through UI interactions are not retained after a reload.
-N> State persistence relies on the `ID` property. Explicitly set the `ID` value for the grid to ensure consistent behavior.
+N> State persistence relies on the `ID` property. Explicitly set the `ID` value for the DataGrid to ensure consistent behavior.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -129,15 +129,15 @@ The Syncfusion® Blazor DataGrid includes an
1. **Using ResetPersistDataAsync Method**
- Clears the persisted state from local storage and restores the grid to its original property values.
+ Clears the persisted state from local storage and restores the DataGrid to its original property values.
2. **Clearing Local Storage**
- Removes the stored state directly from the browser’s local storage and reloads the grid with its initial configuration.
+ Removes the stored state directly from the browser’s local storage and reloads the DataGrid with its initial configuration.
### Using ResetPersistDataAsync Method
-The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) method clears all persisted state data when persistence is enabled and restores the Grid to its original property values.
+The [ResetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ResetPersistDataAsync) method clears all persisted state data when persistence is enabled and restores the DataGrid to its original property values.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -219,7 +219,7 @@ public class OrderData
### Clearing local storage
-Clear the **local storage** entry used for state persistence to remove all stored configuration and reload the Grid with the initial settings.
+Clear the **local storage** entry used for state persistence to remove all stored configuration and reload the DataGrid with the initial settings.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -304,21 +304,21 @@ public class OrderDetails
## Restore to specific state version
-The Syncfusion® Blazor DataGrid supports state persistence, enabling saving and restoring grid configurations such as **column settings**, **filters**, **sorting**, **grouping**, and **paging**. This example demonstrates version-based state persistence using **localStorage**.
+The Syncfusion® Blazor DataGrid supports state persistence, enabling saving and restoring DataGrid configurations such as **column settings**, **filters**, **sorting**, **grouping**, and **paging**. This example demonstrates version-based state persistence using **localStorage**.
Each version represents a unique grid configuration. When a version button is clicked:
-1. The current grid state is saved to localStorage under the active version key.
-2. The grid switches to the selected version.
-3. If persisted data exists for the selected version, it is applied to the grid.
-4. If no data exists, a new state will be stored when the grid is modified.
+1. The current DataGrid state is saved to localStorage under the active version key.
+2. The DataGrid switches to the selected version.
+3. If persisted data exists for the selected version, it is applied to the DataGrid.
+4. If no data exists, a new state will be stored when the DataGrid is modified.
To implement version-based persistence, set the [PersistenceKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PersistenceKey) dynamically based on the selected version (for example, **gridOrderDetails_v1**). This ensures each version maintains a distinct state in **localStorage**.
The core logic for switching versions is handled in the ChangeVersion method:
-The method saves the current grid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. This method returns the grid’s current state as a string suitable for storage or transmission.
-It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state exists, it is applied to the grid. Otherwise, a message indicates that no saved state exists and a new state will be stored going forward.
+The method saves the current DataGrid state using [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) before switching versions. This method returns the DataGrid’s current state as a string suitable for storage or transmission.
+It then attempts to load the state associated with the selected version using [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_). If a persisted state exists, it is applied to the DataGrid. Otherwise, a message indicates that no saved state exists and a new state will be stored going forward.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -438,8 +438,8 @@ The Syncfusion® Blazor DataGrid supports sa
**How It Works**
* The [GetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetPersistDataAsync) method retrieves the current state of the Grid as a string. This string can be stored in local storage or transmitted to a server.
-* The [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_) method applies a previously saved state to the Grid.
-* If no saved state exists, the Grid remains in the current configuration.
+* The [SetPersistDataAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SetPersistDataAsync_System_String_) method applies a previously saved state to the DataGrid.
+* If no saved state exists, the DataGrid remains in the current configuration.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -650,7 +650,7 @@ public sealed class OrderDetails
When the [EnablePersistence](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_EnablePersistence) property is **true**, the Syncfusion® Blazor DataGrid saves its configuration in **window.localStorage**. This includes settings such as **paging**, **filtering**, **sorting**, and **column visibility**. The stored state can be retrieved or updated using JavaScript interop.
-To retrieve the grid model from local storage:
+To retrieve the DataGrid model from local storage:
```cs
@@ -661,7 +661,7 @@ string modelJson = await JS.InvokeAsync("localStorage.getItem", localSto
var modelObject = JsonSerializer.Deserialize(modelJson);
```
-Update the grid state in local storage:
+Update the DataGrid state in local storage:
```cs
await JS.InvokeVoidAsync("localStorage.setItem", localStorageKey, modelJson);
diff --git a/blazor/datagrid/style-and-appearance/aggregate.md b/blazor/datagrid/style-and-appearance/aggregate.md
index 11221918a4..b6eb4893e3 100644
--- a/blazor/datagrid/style-and-appearance/aggregate.md
+++ b/blazor/datagrid/style-and-appearance/aggregate.md
@@ -9,12 +9,13 @@ documentation: ug
# Aggregate customization in Syncfusion Blazor DataGrid
-Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the grid. Styling options are available for:
+Aggregates are displayed as summary rows in the DataGrid footer, providing a consolidated view of totals, averages, or counts. These rows can be styled using CSS to match the layout and design of the DataGrid. Styling options are available for:
- **Aggregate root container:** The outer wrapper of the footer row.
- **Aggregate summary row and cells:** The row that shows summary values, and the cells that display each result.
## Customize the aggregate root element
+
The **.e-gridfooter** class styles the root container of the aggregate footer row. Use CSS to adjust its appearance:
```css
@@ -23,7 +24,7 @@ The **.e-gridfooter** class styles the root container of the aggregate footer ro
}
```
-Properties like **font-family**, **font-size**, and **padding** can be changed to fit the grid layout design.
+Properties like **font-family**, **font-size**, and **padding** can be changed to fit the DataGrid layout design.
diff --git a/blazor/datagrid/style-and-appearance/filtering.md b/blazor/datagrid/style-and-appearance/filtering.md
index 89b38585b1..2f76c4a18e 100644
--- a/blazor/datagrid/style-and-appearance/filtering.md
+++ b/blazor/datagrid/style-and-appearance/filtering.md
@@ -18,9 +18,9 @@ The appearance of filtering elements in the Syncfusion® Blazor DataGrid supports visual customization using CSS and theme-based styling. Styles can be applied to various elements to match the application's design. Styling options are available for:
-- **DataGrid root element:** Defines the overall appearance of the grid container.
+- **DataGrid root element:** Defines the overall appearance of the DataGrid container.
- **Alternate rows with frozen columns:** Applies styles to alternate rows when frozen columns are enabled.
- **Grid lines:** Controls the color and visibility of horizontal and vertical lines between cells.
@@ -26,7 +26,7 @@ Default styles such as **colors**, **typography**, **spacing**, and **borders**
}
```
-Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the grid layout design and improve visual consistency.
+Properties like **background-color**, **color**, **font-family**, and **padding** can be changed to match the DataGrid layout design and improve visual consistency.
@@ -49,7 +49,7 @@ The **.e-grid** class styles the root container of the Blazor DataGrid. Apply CS
}
```
-Properties such as f **font-family**,**background-color**, and spacing-related styles can be adjusted to align with the grid design.
+Properties such as f **font-family**,**background-color**, and spacing-related styles can be adjusted to align with the DataGrid design.
@@ -248,7 +248,7 @@ internal sealed class OrderData
## Customize the color of grid lines
-The Syncfusion® Blazor DataGrid allows customization of grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the grid container to control color, thickness, and border style.
+The Syncfusion® Blazor DataGrid allows customization of Grid lines to match application design requirements. Apply CSS to structural elements such as header cells, row cells, and the Grid container to control color, thickness, and border style.
The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) property defines border visibility and supports options for `Horizontal`, `Vertical`, `Both`, or `None`.
- All features meet the accessibility requirement..
| Supports standard keyboard interactions (e.g., Tab, Arrow keys), with limitations in some advanced features like filtering. |
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) |