diff --git a/blazor/datagrid/accessibility.md b/blazor/datagrid/accessibility.md
index 4b0417582b..456daccd61 100644
--- a/blazor/datagrid/accessibility.md
+++ b/blazor/datagrid/accessibility.md
@@ -1,17 +1,17 @@
---
layout: post
-title: Accessibility in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Accessibility in Syncfusion Blazor DataGrid component and much more.
+title: Accessibility in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about accessibility in Syncfusion Blazor DataGrid and much more.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Accessibility in Blazor Grid component
+# Accessibility in Blazor DataGrid
-The Grid component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Syncfusion Blazor DataGrid followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
-The accessibility compliance for the Grid component is outlined below.
+The accessibility compliance for the Grid is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
@@ -38,47 +38,47 @@ The accessibility compliance for the Grid component is outlined below.
## WAI-ARIA attributes
-The Grid component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) patterns to meet the accessibility. The following ARIA attributes are used in the Grid component:
+The Syncfusion Blazor DataGrid followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) patterns to meet the accessibility. The following ARIA attributes are used in the Grid:
| Attributes | Purpose |
| --- | --- |
-| `role=grid` | To represent the element containing the grid component. |
-| `role=row` | To represent the element containing the cells of the row in the grid. |
-| `role=rowgroup` | To represent the group of rows in the grid. |
-| `role=columnheader` | To represent the cell in a row contains header information for a column in the grid. |
-| `role=gridcell` | To represent a cell in the grid component. |
-| `role=button` | To represent the element that acts as a button in the grid. |
-| `role=search` | To represent the element that acts as a search region in the grid. |
+| `role=grid` | To represent the element containing the Grid. |
+| `role=row` | To represent the element containing the cells of the row in the Grid. |
+| `role=rowgroup` | To represent the group of rows in the Grid. |
+| `role=columnheader` | To represent the cell in a row contains header information for a column in the Grid. |
+| `role=gridcell` | To represent a cell in the Grid. |
+| `role=button` | To represent the element that acts as a button in the Grid. |
+| `role=search` | To represent the element that acts as a search region in the Grid. |
| `role=presentation` | To represent the element to be not available for accessibility concerns. |
| `role=navigation` | To represent the element containing pager elements to navigate from one page to another. |
-| `aria-colindex` | Defines the column index of the column with respect to the total number of columns within the grid. |
-| `aria-rowindex` | Defines row index of the row with respect to the total number of rows within the grid. |
-| `aria-rowspan` | Defines the number of rows spanned by a cell within the grid. |
-| `aria-colspan` | Defines the number of columns spanned by a cell within the grid. |
-| `aria-rowcount` | Defines the total number of rows in the grid. |
-| `aria-colcount` | Defines the total number of columns in the grid. |
-| `aria-selected` | Indicates the current "selected" state of the rows and cells in the grid. |
-| `aria-expanded` | Indicate if the expand icon in the hierarchy grid or grouped grid or detail grid is expanded or collapsed |
-| `aria-sort` | Indicates whether the data in the grid are sorted in ascending or descending order. |
+| `aria-colindex` | Defines the column index of the column with respect to the total number of columns within the Grid. |
+| `aria-rowindex` | Defines row index of the row with respect to the total number of rows within the Grid. |
+| `aria-rowspan` | Defines the number of rows spanned by a cell within the Grid. |
+| `aria-colspan` | Defines the number of columns spanned by a cell within the Grid. |
+| `aria-rowcount` | Defines the total number of rows in the Grid. |
+| `aria-colcount` | Defines the total number of columns in the Grid. |
+| `aria-selected` | Indicates the current "selected" state of the rows and cells in the Grid. |
+| `aria-expanded` | Indicate if the expand icon in the hierarchy Grid or grouped Grid or detail Grid is expanded or collapsed |
+| `aria-sort` | Indicates whether the data in the Grid are sorted in ascending or descending order. |
| `aria-busy` | Indicates an element is being modified and that assistive technologies may want to wait until the changes are complete before informing the user about the update. |
| `aria-owns` | Identifies an element in order to define a visual, functional, or contextual relationship between a parent and its child elements. |
| `aria-hidden` | Hides the element from accessibility concerns. |
| `aria-labelledby` | Provides an accessible name for the checkbox labels in excel filter, checkbox filter and column chooser dialog. |
-| `aria-describedby` | Provides an description about the features enabled in the header when the grid header cell is focused. |
+| `aria-describedby` | Provides an description about the features enabled in the header when the Grid header cell is focused. |
-The Syncfusion® Grid component is structured with a two-table architecture for its header and content. To enhance accessibility for screen readers, roles and ARIA attributes are incorporated for both the grid parent and all its child elements. Although this architectural approach may have some limitations with accessibility checker tools. It's important to note that these limitations do not affect the readability of the grid content over screen readers.
+The Grid is structured with a two-table architecture for its header and content. To enhance accessibility for screen readers, roles and ARIA attributes are incorporated for both the Grid parent and all its child elements. Although this architectural approach may have some limitations with accessibility checker tools. It's important to note that these limitations do not affect the readability of the Grid content over screen readers.
The accessibility checker tools highlights the following known issues:
-* aria-required-children: This warning appears when rendering the grid without any features, as it contains textarea and grid content. Additionally, it appears when enabling features such as the toolbar and grouping.
+* aria-required-children: This warning appears when rendering the Grid without any features, as it contains textarea and Grid content. Additionally, it appears when enabling features such as the toolbar and grouping.
-* color-contrast: This warning appears when you are enabling the search item in the grid's toolbar.
+* color-contrast: This warning appears when you are enabling the search item in the Grid's toolbar.
-* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'grid' per the ARIA in HTML specification.
+* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'Grid' per the ARIA in HTML specification.
-* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'grid' per the ARIA in HTML specification.
+* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'Grid' per the ARIA in HTML specification.
-* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'grid' per the ARIA in HTML specification.
+* An explicit ARIA 'role' is not valid for `
` element within an ARIA role 'Grid' per the ARIA in HTML specification.
* The element with role "button" contains descendants with roles "rowgroup" which are ignored by browsers.
@@ -88,13 +88,13 @@ The accessibility checker tools highlights the following known issues:
* Text contrast of 4.10 with its background is less than the WCAG AA minimum requirements for text of size 13px and weight of 400.
-* Interactive component with ARIA role 'grid' does not have a programmatically associated name.
+* Interactive with ARIA role 'Grid' does not have a programmatically associated name.
-* The element with role "rowgroup" is not contained in or owned by an element with one of the following roles: "grid, table, treegrid".
+* The element with role "rowgroup" is not contained in or owned by an element with one of the following roles: "Grid, table, treeGrid".
## Keyboard interaction
-The Grid component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Grid component.
+The Syncfusion Blazor DataGrid followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Grid.
Pager
@@ -114,14 +114,14 @@ The Grid component followed the [keyboard interaction](https://www.w3.org/WAI/AR
|-----|----- | -----|
| Home | Fn + ← | Moves the focus to the first cell of the focused row.|
| End | Fn + → | Moves the focus to the last cell of the focused row.|
-| Ctrl + Home | ⌘ + Fn + ← | Moves the focus to the first Cell of the first row in the grid.|
-| Ctrl + End | ⌘ + Fn + → | Moves the focus to the last Cell of the last row in the grid.|
+| Ctrl + Home | ⌘ + Fn + ← | Moves the focus to the first Cell of the first row in the Grid.|
+| Ctrl + End | ⌘ + Fn + → | Moves the focus to the last Cell of the last row in the Grid.|
| ↑ | ↑ | Moves the cell focus upward from the focused cell.|
| ↓ | ↓ | Moves the cell focus downward from the focused cell.|
| → | → | Moves the cell focus right side from the focused cell.|
| ← | ← | Moves the cell focus left side from the focused cell.|
-| Alt + J | ⌥ + J | Moves the focus to the entire grid.|
-| Alt + W | ⌥ + W | Move the focus to the grid content element.|
+| Alt + J | ⌥ + J | Moves the focus to the entire Grid.|
+| Alt + W | ⌥ + W | Move the focus to the Grid content element.|
Selection
@@ -207,10 +207,10 @@ The Grid component followed the [keyboard interaction](https://www.w3.org/WAI/AR
## Ensuring accessibility
-The Grid component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Syncfusion Blazor DataGrid's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
-The accessibility compliance of the Grid component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datagrid) in a new window to evaluate the accessibility of the Grid component with accessibility tools.
+The accessibility compliance of the Grid is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/datagrid) in a new window to evaluate the accessibility of the Grid with accessibility tools.
## See also
-* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* [Accessibility in Syncfusion Blazor](https://blazor.syncfusion.com/documentation/common/accessibility)
diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md
index 19a1e66af4..0231ba2e7d 100644
--- a/blazor/datagrid/cell.md
+++ b/blazor/datagrid/cell.md
@@ -1,27 +1,27 @@
---
layout: post
-title: Cell in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about the Cell in the Syncfusion Blazor DataGrid component and much more.
+title: Cell in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about the Cell in the Syncfusion Blazor DataGrid and much more.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Cell in Blazor DataGrid Component
+# Cell in Blazor DataGrid
-In the Syncfusion Blazor DataGrid, a cell refers to an individual data point or a unit within a grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents.
+In the Syncfusion Blazor DataGrid, a cell refers to an individual data point or a unit within a Grid column that displays data. It represents the intersection of a row and a column, and it contains specific information associated with that row and column. Each cell can display text, numbers, or other content related to the data it represents.
-The Grid component allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data grids in your web applications.
+The Grid allows you to customize the appearance and behavior of cells using various features and options. You can define templates, format cell values, enable or disable editing, and perform various other operations on the cells to create interactive and informative data Grids in your web applications.
-To know about how to customize cell in Blazor DataGrid Component, you can check this video.
+To know about how to customize cell in Grid, you can check this video.
{% youtube "youtube:https://www.youtube.com/watch?v=6H90a5tz7bE"%}
## Displaying the HTML content
-Displaying HTML content in a Grid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid component allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a grid cell.
+Displaying HTML content in a Syncfusion Blazor DataGrid can be useful in scenarios where you want to display formatted content, such as images, links, or tables, in a tabular format. Grid allows you to display HTML tags in the Grid header and content. By default, the HTML content is encoded to prevent potential security vulnerabilities. However, you can enable the [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property by setting the value as false to display HTML tags without encoding. This feature is useful when you want to display HTML content in a Grid cell.
-In the following example, the [Blazor Toggle Switch](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) Button component is added to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Refresh) method is called to Refresh the grid and display the updated content.
+In the following example, the [Blazor Toggle Switch](https://www.syncfusion.com/blazor-components/blazor-toggle-switch-button) Button is added to enable and disable the `DisableHtmlEncode` property. When the switch is toggled, the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event is triggered and the `DisableHtmlEncode` property of the column is updated accordingly. The [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Refresh) method is called to refresh the Grid and display the updated content.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -106,26 +106,26 @@ In the following example, the [Blazor Toggle Switch](https://www.syncfusion.com/
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAMZDRBetNXSsV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * The [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property disables HTML encoding for the corresponding column in the grid.
+> * The [DisableHtmlEncode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_DisableHtmlEncode) property disables HTML encoding for the corresponding column in the Grid.
> * If the property is set to **true**, any HTML tags in the column’s data will be displayed.
> * If the property is set to **false**, the HTML tags will be removed and displayed as plain text.
> * Disabling HTML encoding can potentially introduce security vulnerabilities, so use caution when enabling this feature.
-## Autowrap the grid content
+## Autowrap the Grid content
-The auto wrap feature allows the cell content in the grid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Syncfusion® Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
+The auto wrap feature allows the cell content in the Syncfusion Blazor DataGrid to wrap to the next line when it exceeds the boundary of the specified cell width. The cell content wrapping works based on the position of white space between words. To support the Autowrap functionality in Grid, you should set the appropriate width for the columns. The column width defines the maximum width of a column and helps to wrap the content automatically.
To enable auto wrap, set the [AllowTextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowTextWrap) property to **true**. You can configure the auto wrap mode by setting the [TextWrapSettings.WrapMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) property.
Grid provides the below three options for configuring:
-* **Both** - This is the default value for wrapMode. With this option, both the grid **Header** and **Content** text is wrapped.
-* **Header** - With this option, only the grid header text is wrapped.
-* **Content** - With this option, only the grid content is wrapped.
+* **Both** - This is the default value for wrapMode. With this option, both the Grid **Header** and **Content** text is wrapped.
+* **Header** - With this option, only the Grid header text is wrapped.
+* **Content** - With this option, only the Grid content is wrapped.
-> * When a column width is not specified, then auto wrap of columns will be adjusted with respect to the DataGrid's width.
+> * When a column width is not specified, then auto wrap of columns will be adjusted with respect to the Grid's width.
> * If a column’s header text contains no white space, the text may not be wrapped.
-> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) features of the column to customize the appearance of the header and cell content.
+> * If the content of a cell contains HTML tags, the Autowrap functionality may not work as expected. In such cases, you can use the [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_HeaderTemplate) and [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) features of the column to customize the appearance of the header and cell content.
The following example demonstrates how to set the `AllowTextWrap` property to **true** and specify the wrap mode as **Content** by setting the `TextWrapSettings.WrapMode` property.
@@ -230,13 +230,13 @@ public class OrderData
## Customize cell styles
-Customizing the grid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the grid, you can use grid event, css or property support.
+Customizing the Syncfusion Blazor DataGrid cell styles allows you to modify the appearance of cells in the Grid control to meet your design requirements. You can customize the font, background color, and other styles of the cells. To customize the cell styles in the Grid, you can use Grid event, css or property support.
### Using event
-To customize the appearance of the grid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event of the grid. This event is triggered when each cell is rendered in the grid, and provides an object that contains information about the cell. You can use this object to modify the styles of the cell.
+To customize the appearance of the Syncfusion Blazor DataGrid cell, you can use the [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event of the Grid. This event is triggered when each cell is rendered in the Grid, and provides an object that contains information about the cell. You can use this object to modify the styles of the cell.
-The following example demonstrates how to add a `QueryCellInfo` event handler to the grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value.
+The following example demonstrates how to add a `QueryCellInfo` event handler to the Grid. In the event handler, checked whether the current column is **Freight** field and then applied the appropriate CSS class to the cell based on its value.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -453,7 +453,7 @@ The following example demonstrates how to add a `QueryCellInfo` event handler to
### Using CSS
-You can apply styles to the cells using CSS selectors. The Grid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row.
+You can apply styles to the cells using CSS selectors. The Syncfusion Blazor DataGrid provides a class name for each cell element, which you can use to apply styles to that specific cell or cells in a particular column. The `e-rowcell` class is used to style the row cells, and the `e-selectionbackground` class is used to change the background color of the selected row.
```cshtml
```
-The following example demonstrates how to customize the appearance of a specific row in the grid on selection using ```className```.
+The following example demonstrates how to customize the appearance of a specific row in the Grid on selection using `className`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -547,7 +547,7 @@ The following example demonstrates how to customize the appearance of a specific
### Using property
-To customize the style of grid cells, define [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_CustomAttributes) property to the GridColumn definition object. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for grid cells. You can also set multiple CSS properties to the custom class using the CustomAttributes property.
+To customize the style of Syncfusion Blazor DataGrid cells, define [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_CustomAttributes) property to the GridColumn definition object. The `CustomAttributes` property takes an object with the name-value pair to customize the CSS properties for Grid cells. You can also set multiple CSS properties to the custom class using the `CustomAttributes` property.
```cshtml
```
-Here, setting the CustomAttributes property of the **ShipCity** column to an object that contains the CSS class ‘custom-css’. This CSS class will be applied to all the cells in the **ShipCity** column of the grid.
+Here, setting the `CustomAttributes` property of the **ShipCity** column to an object that contains the CSS class ‘custom-css’. This CSS class will be applied to all the cells in the **ShipCity** column of the Grid.
```cshtml
@@ -646,11 +646,11 @@ The following example demonstrates how to customize the appearance of the **Orde
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVKDuDnTisVMfBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> Custom attributes can be used to customize any cell in the grid, including header and footer cells.
+> Custom attributes can be used to customize any cell in the Grid, including header and footer cells.
## Clip Mode
-The clip mode feature is useful when you have a long text or content in a grid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [Columns.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) property to one of the below available options.
+The clip mode feature is useful when you have a long text or content in a Syncfusion Blazor DataGrid cell, which overflows the cell’s width or height. It provides options to display the overflow content by either truncating it, displaying an ellipsis or displaying an ellipsis with a tooltip. You can enable this feature by setting [Columns.ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) property to one of the below available options.
There are three types of [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) available:
@@ -658,7 +658,7 @@ There are three types of [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfu
* **Ellipsis**: Displays ellipsis when the cell content overflows its area.
* **EllipsisWithTooltip**: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied. Also it will display the tooltip while hover on ellipsis is applied.
-The following example demonstrates, how to set the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) property for the Grid column .
+The following example demonstrates, how to set the [ClipMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_ClipMode) property for the Grid column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -762,13 +762,13 @@ The following example demonstrates, how to set the [ClipMode](https://help.syncf
## Tooltip
-The Syncfusion® Grid allows you to display information about the grid columns to the user when they hover over them with the mouse.
+The Syncfusion Blazor DataGrid allows you to display information about the Grid columns to the user when they hover over them with the mouse.
### Display custom tooltip for columns
-The Grid provides a feature to display custom tooltips for its columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started) component. This allows you to provide additional information about the columns when the user hovers over them.
+The Syncfusion Blazor DataGrid provides a feature to display custom tooltips for its columns using the [SfTooltip](https://blazor.syncfusion.com/documentation/tooltip/getting-started). This allows you to provide additional information about the columns when the user hovers over them.
-To enable custom tooltips for columns in the Grid,you can use the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature by rendering the components inside the template
+To enable custom tooltips for columns in the Grid, you can use the [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template) feature by rendering the components inside the template.
This is demonstrated in the following sample code, where the tooltip for the **FirstName** column is rendered using `Column Template`.
@@ -861,24 +861,24 @@ public class OrderData
## Grid lines
-The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) in a grid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the grid lines by setting the `GridLines` property to one of the following values:
+The [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GridLines) in a Syncfusion Blazor DataGrid are used to separate the cells with horizontal and vertical lines for better readability. You can enable the Grid lines by setting the `GridLines` property to one of the following values:
| Modes | Actions |
|-------|---------|
-| Both | Displays both the horizontal and vertical DataGrid lines.|
-| None | No DataGrid lines are displayed.|
-| Horizontal | Displays the horizontal DataGrid lines only.|
-| Vertical | Displays the vertical DataGrid lines only.|
-| Default | Displays DataGrid lines based on the theme.|
+| Both | Displays both the horizontal and vertical Grid lines.|
+| None | No Grid lines are displayed.|
+| Horizontal | Displays the horizontal Grid lines only.|
+| Vertical | Displays the vertical Grid lines only.|
+| Default | Displays Grid lines based on the theme.|
-The following example demonstrates how to set the `GridLines` property based on changing the dropdown value using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event of the DropDownList component.
+The following example demonstrates how to set the `GridLines` property based on changing the dropdown value using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
-
+
@@ -971,6 +971,6 @@ The following example demonstrates how to set the `GridLines` property based on
{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhgjYDHsYMePtHJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> By default, the DataGrid renders with **Default** mode.
+> By default, the Grid renders with **Default** mode.
-N> You can refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+N> You can refer to the [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Syncfusion Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
diff --git a/blazor/datagrid/events.md b/blazor/datagrid/events.md
index 60ff0ecb4f..f387e3f956 100644
--- a/blazor/datagrid/events.md
+++ b/blazor/datagrid/events.md
@@ -1,24 +1,24 @@
---
layout: post
-title: Events in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Events in Syncfusion Blazor DataGrid component and much more details.
+title: Events in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Events in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Events in Blazor DataGrid Component
+# Events in Blazor DataGrid
-In this section, we have provided the list of events of the datagrid component which will be
-triggered for appropriate datagrid actions.
+In this section, we have provided the list of events of the Syncfusion Blazor DataGrid which will be
+triggered for appropriate Grid actions.
-The events should be provided to the datagrid using **GridEvents** component. When using events of datagrid, **TValue** must be provided in the **GridEvents** component.
+The events should be provided to the Grid using **GridEvents**. When using events of Grid, **TValue** must be provided in the **GridEvents**.
-N> All the events should be provided in a single **GridEvents** component.
+N> All the events should be provided in a single **GridEvents**.
## OnActionBegin
-[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event triggers when DataGrid actions such as sorting, filtering, paging, grouping, [editing](https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing) etc., starts.
+[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) event triggers when Grid actions such as sorting, filtering, paging, grouping, [editing](https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing) etc., starts.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -65,7 +65,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnActionComplete
-[OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete) event triggers when DataGrid actions such as sorting, filtering, paging, grouping, [editing](https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing), etc. are completed.
+[OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete) event triggers when Grid actions such as sorting, filtering, paging, grouping, [editing](https://blazor.syncfusion.com/documentation/datagrid/editing#event-trace-while-editing), etc. are completed.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -110,7 +110,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnActionFailure
-[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event triggers when any DataGrid action failed to achieve the desired results. By using this event you can get the error details and its cause. In the below sample we have provided the wrong url so that it will throw the OnActionFailure event.
+[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event triggers when any Grid action failed to achieve the desired results. By using this event you can get the error details and its cause. In the below sample we have provided the wrong url so that it will throw the `OnActionFailure` event.
```cshtml
@using Syncfusion.Blazor
@@ -196,7 +196,7 @@ N> All the events should be provided in a single **GridEvents** component.
## Created
-[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event triggers when the datagrid component is created.
+[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event triggers when the Grid is created.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -241,7 +241,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnLoad
-[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnLoad) event triggers before the rendering process starts which allows customization of DataGrid properties before the DataGrid rendering.
+[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnLoad) event triggers before the rendering process starts which allows customization of Grid properties before the Grid rendering.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -286,7 +286,7 @@ N> All the events should be provided in a single **GridEvents** component.
## Destroyed
-[Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Destroyed) event triggers when the datagrid component is destroyed. By using this event you can confirm that the datagrid gets completely destroyed.
+[Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Destroyed) event triggers when the Grid is destroyed. By using this event you can confirm that the Grid gets completely destroyed.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -331,7 +331,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnDataBound
-[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event triggers before data is bound to DataGrid.
+[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) event triggers before data is bound to Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -376,7 +376,7 @@ N> All the events should be provided in a single **GridEvents** component.
## DataBound
-[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event triggers when data source is populated in the DataGrid.
+[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event triggers when data source is populated in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -421,7 +421,7 @@ N> All the events should be provided in a single **GridEvents** component.
## RowDataBound
-[RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event triggers every time a request is made to access row information, element, or data and also before the row element is appended to the DataGrid element.
+[RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) event triggers every time a request is made to access row information, element, or data and also before the row element is appended to the Grid element.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -572,14 +572,14 @@ N> All the events should be provided in a single **GridEvents** component.
}
public void DetailDataBoundHandler(DetailDataBoundEventArgs args)
{
- // Here you can customize your code
+ // Here you can customize your code.
}
}
```
## QueryCellInfo
-[QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event triggers every time a request is made to access cell information, element, or data and also before the cell element is appended to the DataGrid element.
+[QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event triggers every time a request is made to access cell information, element, or data and also before the cell element is appended to the Grid element.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -1604,7 +1604,7 @@ N> All the events should be provided in a single **GridEvents** component.
public void ContextMenuItemClickedHandler(ContextMenuClickEventArgs args)
{
- // Here you can customize your code
+ // Here you can customize your code.
}
}
```
@@ -1659,7 +1659,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnPdfExport
-[OnPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnPdfExport) event triggers before DataGrid data is exported to PDF document.
+[OnPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnPdfExport) event triggers before Grid data is exported to PDF document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -1712,7 +1712,7 @@ N> All the events should be provided in a single **GridEvents** component.
## PdfHeaderQueryCellInfoEvent
-[PdfHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event triggers before DataGrid data is exported to PDF document. It can be used to customize the header content in pdf document.
+[PdfHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event triggers before Grid data is exported to PDF document. It can be used to customize the header content in PDF document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -1765,7 +1765,7 @@ N> All the events should be provided in a single **GridEvents** component.
## PdfQueryCellInfoEvent
-[PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfQueryCellInfoEvent) event triggers before DataGrid data is exported to PDF document. It can be used to customize the DataGrid content in pdf document.
+[PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfQueryCellInfoEvent) event triggers before Grid data is exported to PDF document. It can be used to customize the Grid content in PDF document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -1818,7 +1818,7 @@ N> All the events should be provided in a single **GridEvents** component.
## PdfAggregateTemplateInfo
-[PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event triggers before DataGrid data is exported to PDF document. It can be used to customize the DataGrid aggregate content in pdf document.
+[PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event triggers before Grid data is exported to PDF document. It can be used to customize the Grid aggregate content in PDF document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -1901,7 +1901,7 @@ N> All the events should be provided in a single **GridEvents** component.
## PdfGroupCaptionTemplateInfo
-[PdfGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfGroupCaptionTemplateInfo) event triggers when exporting the group caption template of the PDF document. It can be used to customize the DataGrid group caption content in a PDF document.
+[PdfGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfGroupCaptionTemplateInfo) event triggers when exporting the group caption template of the PDF document. It can be used to customize the Grid group caption content in a PDF document.
```csharp
@using Syncfusion.Blazor.Grids
@@ -1965,7 +1965,7 @@ N> All the events should be provided in a single **GridEvents** component.
## OnExcelExport
-[OnExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnExcelExport) event triggers before DataGrid data is exported to excel file.
+[OnExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnExcelExport) event triggers before Grid data is exported to Excel document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2018,7 +2018,7 @@ N> All the events should be provided in a single **GridEvents** component.
## ExcelHeaderQueryCellInfoEvent
-[ExcelHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelHeaderQueryCellInfoEvent) event triggers before DataGrid data is exported to Excel file. It can be used to customize the header content in Excel file.
+[ExcelHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelHeaderQueryCellInfoEvent) event triggers before Grid data is exported to Excel document. It can be used to customize the header content in Excel document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2071,7 +2071,7 @@ N> All the events should be provided in a single **GridEvents** component.
## ExcelQueryCellInfoEvent
-[ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelQueryCellInfoEvent) event triggers before DataGrid data is exported to Excel file. It can be used to customize the DataGrid content in Excel file.
+[ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelQueryCellInfoEvent) event triggers before Grid data is exported to Excel document. It can be used to customize the Grid content in Excel document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2124,7 +2124,7 @@ N> All the events should be provided in a single **GridEvents** component.
## ExcelAggregateTemplateInfo
-[ExcelAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelAggregateTemplateInfo) event triggers before DataGrid data is exported to Excel file. It can be used to customize the DataGrid aggregate content in Excel File.
+[ExcelAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelAggregateTemplateInfo) event triggers before Grid data is exported to Excel document. It can be used to customize the Grid aggregate content in Excel document.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2207,7 +2207,7 @@ N> All the events should be provided in a single **GridEvents** component.
## ExcelGroupCaptionTemplateInfo
-[ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event triggers when exporting the group caption template of the Excel File. It can be used to customize the DataGrid group caption content in Excel File.
+[ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event triggers when exporting the group caption template of the Excel document. It can be used to customize the Grid group caption content in Excel document.
```csharp
@using Syncfusion.Blazor.Grids
@@ -2272,7 +2272,7 @@ N> All the events should be provided in a single **GridEvents** component.
## ExportComplete
-[ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event triggers once DataGrid data is exported to file formats (Pdf, Excel and CSV).
+[ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event triggers once Grid data is exported to file formats (PDF, Excel and CSV).
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2476,7 +2476,7 @@ N> All the events should be provided in a single **GridEvents** component.
[RowDropped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDropped) event triggers when row is dropped.
-N> We are not going to limit datagrid with these events, we will be adding new events in future based on the user requests. If the event, you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
+N> We are not going to limit Grid with these events, we will be adding new events in future based on the user requests. If the event, you are looking for is not in the list, then request [here](https://www.syncfusion.com/feedback/blazor-components).
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2668,7 +2668,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## PageChanging
-[PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) event is raised before navigating from one page to another or when changing the page size using the pager dropdown in the grid.
+[PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanging) event is raised before navigating from one page to another or when changing the page size using the pager dropdown in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2724,7 +2724,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## PageChanged
-[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) event is raised after navigating from one page to another or when changing the page size using the pager dropdown in the grid.
+[PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PageChanged) event is raised after navigating from one page to another or when changing the page size using the pager dropdown in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2781,7 +2781,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Sorting
-[Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event is raised before a sorting action is performed or a column is removed from sorting in the grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
+[Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event is raised before a sorting action is performed or a column is removed from sorting in the Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2838,7 +2838,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Sorted
-[Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event is raised after a sorting action is performed or a column is removed from sorting in the grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
+[Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted) event is raised after a sorting action is performed or a column is removed from sorting in the Grid or when the sort column direction changes from Ascending to Descending or vice versa for the same column.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2895,7 +2895,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Grouping
-[Grouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouping) event is raised before grouping action or un-grouping action is performed in the grid.
+[Grouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouping) event is raised before grouping action or un-grouping action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -2952,7 +2952,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Grouped
-[Grouped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouped) event is raised after grouping or ungrouping action is performed in the grid.
+[Grouped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Grouped) event is raised after grouping or ungrouping action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3009,7 +3009,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Searching
-[Searching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Searching) event is raised before the search action is performed in the grid.
+[Searching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Searching) event is raised before the search action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3065,7 +3065,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## Searched
-[Searched](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Searched) event is raised after the search action is performed in the grid.
+[Searched](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Searched) event is raised after the search action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3121,7 +3121,7 @@ The [OnColumnMenuOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.G
## RowCreating
-[RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) event triggers before the add action is performed in the grid.
+[RowCreating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreating) event triggers before the add action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3180,7 +3180,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowCreated
-[RowCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreated) event is raised after the add action is performed in the grid.
+[RowCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowCreated) event is raised after the add action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3239,7 +3239,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowUpdating
-[RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) event is raised before the edited or added data is saved in the grid.
+[RowUpdating](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdating) event is raised before the edited or added data is saved in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3298,7 +3298,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowUpdated
-[RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated) event is raised after edited or added data is saved in the grid.
+[RowUpdated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowUpdated) event is raised after edited or added data is saved in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3357,7 +3357,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowDeleting
-[RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) event is raised before the record is deleted in the grid.
+[RowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleting) event is raised before the record is deleted in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3416,7 +3416,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowDeleted
-[RowDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleted) event is raised after a record is deleted in the grid.
+[RowDeleted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDeleted) event is raised after a record is deleted in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3475,7 +3475,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## EditCanceling
-[EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling) event is raised before canceling the update of edited or added data in the grid.
+[EditCanceling](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceling) event is raised before canceling the update of edited or added data in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3534,7 +3534,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## EditCanceled
-[EditCanceled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceled) event is raised after canceling the update of edited or added data in the grid.
+[EditCanceled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_EditCanceled) event is raised after canceling the update of edited or added data in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3593,7 +3593,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## OnRowEditStart
-[OnRowEditStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRowEditStart) event is raised before when the editing action of a row begins in the grid.
+[OnRowEditStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnRowEditStart) event is raised before when the editing action of a row begins in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3652,7 +3652,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowEditing
-[RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event is raised before the edit action is performed in the grid.
+[RowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEditing) event is raised before the edit action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3711,7 +3711,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## RowEdited
-[RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) event is raised after the edit action is performed in the grid.
+[RowEdited](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowEdited) event is raised after the edit action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3770,7 +3770,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## Filtering
-[Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) event is raised before the filtering or clear filtering action is performed in the grid.
+[Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtering) event is raised before the filtering or clear filtering action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3827,7 +3827,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## Filtered
-[Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event is raised after the filtering or clear filtering action is performed in the grid.
+[Filtered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Filtered) event is raised after the filtering or clear filtering action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3884,7 +3884,7 @@ N> This event is raised specifically for `Normal` and `Dialog` [EditMode](https:
## FilterDialogOpening
-[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event triggers before the filter dialog is opened in the grid.
+[FilterDialogOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpening) event triggers before the filter dialog is opened in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -3943,7 +3943,7 @@ N> This event is raised specifically for the `Menu`, `CheckBox` and `Excel` [Fil
## FilterDialogOpened
-[FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened) event is raised after the filter dialog is opened in the grid.
+[FilterDialogOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_FilterDialogOpened) event is raised after the filter dialog is opened in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -4060,7 +4060,7 @@ N> This event is raised specifically for the `Menu`, `CheckBox` and `Excel` [Fil
## ColumnReordering
-[ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering) event is raised before when columns reordering action is performed in the grid.
+[ColumnReordering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordering) event is raised before when columns reordering action is performed in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -4117,7 +4117,7 @@ N> This event is raised specifically for the `Menu`, `CheckBox` and `Excel` [Fil
## ColumnReordered
-[ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered) event is raised after when columns are reordered in the grid.
+[ColumnReordered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnReordered) event is raised after when columns are reordered in the Grid.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -4174,7 +4174,7 @@ N> This event is raised specifically for the `Menu`, `CheckBox` and `Excel` [Fil
## ColumnVisibilityChanging
-[ColumnVisibilityChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanging) event is raised before the grid's column visibility is changing.
+[ColumnVisibilityChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanging) event is raised before the Grid's column visibility is changing.
```cshtml
@using Syncfusion.Blazor.Grids
@@ -4232,7 +4232,7 @@ N> This event is raised specifically for the `Menu`, `CheckBox` and `Excel` [Fil
## ColumnVisibilityChanged
-[ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanged) event is raised after the grid's column visibility is changed.
+[ColumnVisibilityChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ColumnVisibilityChanged) event is raised after the Grid's column visibility is changed.
```cshtml
@using Syncfusion.Blazor.Grids
diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md
index bdce41061d..2d55def682 100644
--- a/blazor/datagrid/getting-started-with-web-app.md
+++ b/blazor/datagrid/getting-started-with-web-app.md
@@ -1,15 +1,15 @@
---
layout: post
-title: Getting Started with Syncfusion Blazor DataGrid Component in Web App
-description: Checkout and learn about the documentation for getting started with Blazor DataGrid Component in Blazor Web App.
+title: Getting Started with Syncfusion Blazor DataGrid in Web App
+description: Checkout and learn about the documentation for getting started with Syncfusion Blazor DataGrid in Blazor Web App.
platform: Blazor
component: DataGrid
documentation: ug
---
-# Getting Started with Blazor DataGrid Component in Web App
+# Getting Started with Blazor DataGrid in Web App
-This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
+This section briefly explains about how to include [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor web app using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
{% tabcontents %}
@@ -17,19 +17,19 @@ This section briefly explains about how to include [Blazor DataGrid](https://www
## Prerequisites
-* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
+* [System requirements for Blazor component](https://blazor.syncfusion.com/documentation/system-requirements)
-## Create a new Blazor Web App in Visual Studio
+## Create a new Blazor web app in visual studio
-You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor web app** using visual studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application.
-## Install Syncfusion® Blazor Grid and Themes NuGet in the Blazor Web App
+## Install Blazor DataGrid and Themes NuGet in the Blazor web app
-To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
+To add **Syncfusion Blazor DataGrid** in the app, open the NuGet package manager in visual studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
-If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
+If you utilize `WebAssembly or Auto` render modes in the Blazor web app need to be install Syncfusion Blazor NuGet packages within the client project.
Alternatively, you can utilize the following package manager command to achieve the same.
@@ -42,23 +42,23 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
{% endtabcontent %}
-{% tabcontent Visual Studio Code %}
+{% tabcontent visual studio Code %}
## Prerequisites
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-## Create a new Blazor Web App in Visual Studio Code
+## Create a new Blazor web app in visual studio code
-You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor web app** using visual studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application.
-For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
+For example, in a Blazor web app with the `Auto` interactive render mode, use the following commands.
{% tabs %}
{% highlight c# tabtitle="Blazor Web App" %}
@@ -70,13 +70,13 @@ cd BlazorWebApp.Client
{% endhighlight %}
{% endtabs %}
-N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
+N> For more information on creating a **Blazor web app** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes).
-## Install Syncfusion® Blazor Grid and Themes NuGet in the App
+## Install Blazor DataGrid and Themes NuGet in the app
-If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project.
+If you utilize `WebAssembly` or `Auto` render modes in the Blazor web app need to be install Syncfusion Blazor components NuGet packages within the client project.
-* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
+* Press Ctrl+` to open the integrated terminal in visual studio code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
@@ -92,13 +92,13 @@ dotnet restore
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
{% endtabcontent %}
{% endtabcontents %}
-## Register Syncfusion® Blazor Service
+## Register Syncfusion Blazor service
| Interactive Render Mode | Description |
| -- | -- |
@@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.
{% endhighlight %}
{% endtabs %}
-Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App.
+Now, register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor web app.
-If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App.
+If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion Blazor service in both **~/Program.cs** files of your Blazor web app.
{% tabs %}
{% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %}
@@ -152,7 +152,7 @@ await builder.Build().RunAsync();
{% endhighlight %}
{% endtabs %}
-If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file.
+If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion Blazor Service only in that **~/Program.cs** file.
{% tabs %}
{% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %}
@@ -191,9 +191,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-## Add Syncfusion® Blazor DataGrid component
+## Add Blazor DataGrid
-Add the Syncfusion® Blazor DataGrid component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
+Add the Syncfusion Blazor DataGrid in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
| Interactivity location | RenderMode | Code |
| --- | --- | --- |
@@ -241,13 +241,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %}
-* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser.
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Grid in your default web browser.
-## Defining Row Data
+## Defining row data
-To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
+To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
{% tabs %}
{% highlight razor %}
@@ -282,9 +282,9 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to
## Defining columns
-The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid.
+The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component.
+The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
Let’s check the properties used here:
* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
@@ -309,7 +309,7 @@ Let’s check the properties used here:
## Enable paging
-The paging feature enables users to view the datagrid record in a paged view. It can be enabled 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. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
+The paging feature enables users to view the Syncfusion Blazor DataGrid record in a paged view. It can be enabled 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. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
{% tabs %}
{% highlight razor %}
@@ -329,7 +329,7 @@ The paging feature enables users to view the datagrid record in a paged view. It
## Enable sorting
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
+The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
{% tabs %}
{% highlight razor %}
@@ -349,7 +349,7 @@ The sorting feature enables you to order the records. It can be enabled by setti
## Enable filtering
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
+The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
{% tabs %}
{% highlight razor %}
@@ -369,7 +369,7 @@ The filtering feature enables you to view reduced amount of records based on fil
## Enable grouping
-The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
+The grouping feature enables you to view the Syncfusion Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
{% tabs %}
{% highlight razor %}
@@ -387,11 +387,11 @@ The grouping feature enables you to view the datagrid record in a grouped view.
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %}
## Handling exceptions
-Exceptions occurred during grid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
+Exceptions occurred during Syncfusion Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event contains the error details returned from the server.
@@ -447,7 +447,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
## See also
-1. [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-2. [Getting Started with Syncfusion® Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
-3. [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+1. [Getting Started with Syncfusion Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+2. [Getting Started with Syncfusion Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
+3. [Getting Started with Syncfusion Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md
index 97b15d2595..858b86a9c0 100644
--- a/blazor/datagrid/getting-started.md
+++ b/blazor/datagrid/getting-started.md
@@ -1,19 +1,17 @@
---
layout: post
-title: Getting Started with Blazor DataGrid Component | Syncfusion
-description: Checkout and learn about getting started with Blazor DataGrid component in Blazor WebAssembly Application.
+title: Getting Started with Blazor DataGrid | Syncfusion
+description: Checkout and learn about getting started with Syncfusion Blazor DataGrid in Blazor WebAssembly Application.
platform: Blazor
control: DataGrid
documentation: ug
---
-
+# Getting Started with Blazor DataGrid
-# Getting Started with Blazor DataGrid Component
+This section briefly explains about how to include [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor webAssembly app using visual studio and visual studio code.
-This section briefly explains about how to include [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code.
-
-To get start quickly with Blazor DataGrid component, you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataGrid) sample.
+To get start quickly with , you can check on this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataGrid) sample.
{% youtube
"youtube:https://www.youtube.com/watch?v=ClAlwPUv0_s" %}
@@ -26,13 +24,13 @@ To get start quickly with Blazor DataGrid component, you can check on this video
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-## Create a new Blazor App in Visual Studio
+## Create a new Blazor app in visual studio
-You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
+You can create a **Blazor webAssembly app** using visual studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
-## Install Syncfusion® Blazor Grid and Themes NuGet in the App
+## Install Blazor DataGrid and Themes NuGet in the app
-To add **Blazor DataGrid** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
+To add **Syncfusion Blazor DataGrid** in the app, open the NuGet package manager in visual studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same.
{% tabs %}
{% highlight C# tabtitle="Package Manager" %}
@@ -43,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
{% endhighlight %}
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
{% endtabcontent %}
@@ -53,9 +51,9 @@ N> Syncfusion® Blazor components are availa
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
-## Create a new Blazor App in Visual Studio Code
+## Create a new Blazor app in visual studio code
-You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
+You can create a **Blazor webAssembly app** using visual studio code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`).
@@ -70,9 +68,9 @@ cd BlazorApp
{% endtabs %}
-## Install Syncfusion® Blazor Grid and Themes NuGet in the App
+## Install Blazor DataGrid and Themes NuGet in the app
-* Press Ctrl+` to open the integrated terminal in Visual Studio Code.
+* Press Ctrl+` to open the integrated terminal in visual studio code.
* Ensure you’re in the project root directory where your `.csproj` file is located.
* Run the following command to install a [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
@@ -88,13 +86,13 @@ dotnet restore
{% endtabs %}
-N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
+N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
{% endtabcontent %}
{% endtabcontents %}
-## Register Syncfusion® Blazor Service
+## Register Syncfusion Blazor service
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Grids` namespace.
@@ -107,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio
{% endhighlight %}
{% endtabs %}
-Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App.
+Now, register the Syncfusion Blazor service in the **~/Program.cs** file of your Blazor webAssembly app.
{% tabs %}
{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
@@ -142,9 +140,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
```
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
-## Add Blazor DataGrid component
+## Add Blazor DataGrid
-Add the Syncfusion® Blazor DataGrid component in the **~/Pages/Index.razor** file.
+Add the Syncfusion Blazor DataGrid in the **~/Pages/Index.razor** file.
{% tabs %}
{% highlight razor %}
@@ -174,13 +172,13 @@ Add the Syncfusion® Blazor DataGrid compone
{% endhighlight %}
{% endtabs %}
-* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataGrid component in your default web browser.
+* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion Blazor DataGrid in your default web browser.
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid-component.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVztWraLacsGbYO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid-component.png)" %}
-## Defining Row Data
+## Defining row data
-To bind data for the DataGrid component, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
+To bind data for the Grid, you can assign a IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DataSource) property. The list data source can also be provided as an instance of the **DataManager**. You can assign the data source through the `OnInitialized` life cycle of the page.
{% tabs %}
{% highlight razor %}
@@ -215,9 +213,9 @@ To bind data for the DataGrid component, you can assign a IEnumerable object to
## Defining columns
-The columns are automatically generated when columns declaration is empty or undefined while initializing the datagrid.
+The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid.
-The DataGrid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component. To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html) component.
+The Grid has an option to define columns using [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html). To customize column properties, use [GridColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumns.html).
Let’s check the properties used here:
* [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) is added to map with a property name in IEnumerable object.
@@ -242,7 +240,7 @@ Let’s check the properties used here:
## Enable paging
-The paging feature enables users to view the datagrid record in a paged view. It can be enabled 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. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings) component.
+The paging feature enables users to view the Syncfusion Blazor DataGrid record in a paged view. It can be enabled 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. Pager can be customized using the [GridPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PageSettings).
{% tabs %}
{% highlight razor %}
@@ -262,7 +260,7 @@ The paging feature enables users to view the datagrid record in a paged view. It
## Enable sorting
-The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings) component.
+The sorting feature enables you to order the records. It can be enabled by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property as true. Sorting feature can be customized using the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortSettings).
{% tabs %}
{% highlight razor %}
@@ -282,7 +280,7 @@ The sorting feature enables you to order the records. It can be enabled by setti
## Enable filtering
-The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings) component.
+The filtering feature enables you to view reduced amount of records based on filter criteria. It can be enabled by setting the [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property as true. Filtering feature can be customized using the [GridFilterSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_FilterSettings).
{% tabs %}
{% highlight razor %}
@@ -302,7 +300,7 @@ The filtering feature enables you to view reduced amount of records based on fil
## Enable grouping
-The grouping feature enables you to view the datagrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings) component.
+The grouping feature enables you to view the Syncfusion Blazor DataGrid record in a grouped view. It can be enabled by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property as true. Grouping feature can be customized using the [GridGroupSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GroupSettings).
{% tabs %}
{% highlight razor %}
@@ -320,17 +318,17 @@ The grouping feature enables you to view the datagrid record in a grouped view.
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid Component](images/blazor-datagrid.gif)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBfDWBkLabNleSQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataGrid](images/blazor-datagrid.gif)" %}
## Handling exceptions
-Exceptions occurred during grid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
+Exceptions occurred during Syncfusion Blazor DataGrid actions can be handled without stopping application. These error messages or exception details can be acquired using the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event.
-The argument passed to the [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event contains the error details returned from the server.
+The argument passed to the `OnActionFailure` event contains the error details returned from the server.
N> Recommend you to bind `OnActionFailure` event during your application development phase, this helps you to find any exceptions. You can pass these exception details to our support team to get solution as early as possible.
-The following sample code demonstrates notifying user when server-side exception has occurred during data operation,
+The following sample code demonstrates notifying user when server-side exception has occurred during data operation:
{% tabs %}
{% highlight razor %}
@@ -378,8 +376,8 @@ The following sample code demonstrates notifying user when server-side exception
## See Also
-* [Getting started with Syncfusion® Data Grid in Blazor Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
+* [Getting started with Syncfusion Blazor DataGrid in Server Side App using .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
-* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
+* [Getting Started with Syncfusion Blazor DataGrid for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
-* [Getting Started with Syncfusion® DataGrid in Blazor WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio)
+* [Getting Started with Syncfusion Blazor DataGrid in WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio)
diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md
index 4e5fe343d7..2c971bb358 100644
--- a/blazor/datagrid/searching.md
+++ b/blazor/datagrid/searching.md
@@ -1,19 +1,19 @@
---
layout: post
-title: Searching in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Searching in Syncfusion Blazor DataGrid component and much more details.
+title: Searching in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Searching in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Searching in Blazor DataGrid Component
+# Searching in Blazor DataGrid
-The Syncfusion® Blazor Grid includes a powerful built-in searching feature that allows users to search for specific data within the grid. This feature enables efficient filtering of grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
+The Syncfusion Blazor DataGrid includes a powerful built-in searching feature that allows users to search for specific data within the Grid. This feature enables efficient filtering of Grid records based on user-defined search criteria, making it easier to locate and display relevant information. Whether you have a large dataset or simply need to find specific records quickly, the search feature provides a convenient solution.
-Set the [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property to true to enable the searching feature in the grid.
+Set the [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property to **true** to enable the searching feature in the Grid.
-To further enhance the search functionality, you can integrate a search text box directly into the grid’s toolbar. This allows users to enter search criteria conveniently within the grid interface. To add the search item to the grid’s toolbar, use the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and add **Search** item.
+To further enhance the search functionality, you can integrate a search text box directly into the Grid's toolbar. This allows users to enter search criteria conveniently within the Grid interface. To add the search item to the Grid's toolbar, use the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and add **Search** item.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -88,13 +88,13 @@ To further enhance the search functionality, you can integrate a search text box
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqMDUXsngnslOp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The clear icon is shown in the Data Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Grid.
+> The clear icon is shown in the Grid search text box when it is focused on search text or after typing the single character in the search text box. A single click of the clear icon clears the text in the search box as well as the search results in the Grid.
## Initial search
-By default, the search operation can be performed on the grid data after the grid renders. However, there might be scenarios where need to perform a search operation on the grid data during the initial rendering of the grid. In such cases, you can make use of the initial search feature provided by the grid.
+By default, the search operation can be performed on the Syncfusion Blazor DataGrid data after the Grid renders. However, there might be scenarios where need to perform a search operation on the Grid data during the initial rendering of the Grid. In such cases, you can make use of the initial search feature provided by the Grid.
-To apply search at initial rendering, need to set the following properties in the [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html) component.
+To apply search at initial rendering, need to set the following properties in the [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html).
Property|Description
-----|-----
@@ -104,13 +104,13 @@ Key|Specifies the key value to be searched.
IgnoreCase |[IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) specifies whether the search operation needs to be case-sensitive or case-insensitive
IgnoreAccent |[IgnoreAccent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreAccent) property will ignore the diacritic characters or accents in the text during a search operation.
-The following example demonstrates how to set an initial search in the grid using the `GridSearchSettings` property. The `GridSearchSettings` property is set with the following values:
+The following example demonstrates how to set an initial search in the Grid using the `GridSearchSettings` property. The `GridSearchSettings` property is set with the following values:
1.`Field`: **CustomerID** specifies that the search should be performed only in the ‘CustomerID’ field.
2.`Operator`: **contains** indicates that the search should find records that contain the specified search key.
-3.`Key`: **Ha** is the initial search key that will be applied when the grid is rendered.
+3.`Key`: **Ha** is the initial search key that will be applied when the Grid is rendered.
4.`IgnoreCase`: **true** makes the search case-insensitive.
@@ -190,11 +190,11 @@ The following example demonstrates how to set an initial search in the grid usin
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKWZUXimSvcekD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> By default, datagrid searches all the bound column values. To customize this behavior, define the `Fields` property of **GridSearchSettings** component.
+> By default, Grid searches all the bound column values. To customize this behavior, define the `Fields` property of **GridSearchSettings**.
## Search operators
-Search operators are symbols or keywords used to define the type of comparison or condition applied during a search operation. They help specify how the search key should match the data being searched. The [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html).[Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html#Syncfusion_Blazor_Grids_GridSearchSettings_Operator) property can be used to define the search operator in the grid.
+Search operators are symbols or keywords used to define the type of comparison or condition applied during a search operation. They help specify how the search key should match the data being searched. The [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html).[Operator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html#Syncfusion_Blazor_Grids_GridSearchSettings_Operator) property can be used to define the search operator in the Grid.
By default, the `GridSearchSettings.Operator` is set to **contains**, which returns the values contains the search key. The following operators are supported in searching:
@@ -209,7 +209,7 @@ Equal |Checks whether a value is equal to the specified value.
These operators provide flexibility in defining the search behavior and allow you to perform different types of comparisons based on your requirements.
-The following example demonstrates how to set the `SearchSettings.Operator` property based on changing the dropdown value using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event of the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2__ctor) component.
+The following example demonstrates how to set the `SearchSettings.Operator` property based on changing the dropdown value using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_ValueChange) event of the [DropDownList](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2__ctor).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -320,17 +320,17 @@ The following example demonstrates how to set the `SearchSettings.Operator` prop
## Search by external button
-The Syncfusion® Blazor Grid component allows you to perform searches programmatically, enabling you to search for records using an external button instead of relying solely on the built-in search bar. This feature provides flexibility and allows for custom search implementations within your application. To search for records using an external button, you can utilize the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method provided by the Grid component.
+The Syncfusion Blazor DataGrid allows you to perform searches programmatically, enabling you to search for records using an external button instead of relying solely on the built-in search bar. This feature provides flexibility and allows for custom search implementations within your application. To search for records using an external button, you can utilize the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method provided by the Grid.
-The ```SearchAsync``` method allows you to perform a search operation based on a search key or criteria. The following example demonstatres how to implement ```SearchAsync``` by an external button using the following steps:
+The `SearchAsync` method allows you to perform a search operation based on a search key or criteria. The following example demonstrates how to implement `SearchAsync` by an external button using the following steps:
-1. Add a Syncfusion® Blazor Button element outside of the grid component.
+1. Add a [Button](https://blazor.syncfusion.com/documentation/button/getting-started-with-web-app) element outside of the Grid.
-2. Attach a OnClick event handler to the button.
+2. Attach a [OnClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_OnClick) event handler to the button.
-3. Inside the event handler, get the reference of the grid component.
+3. Inside the event handler, get the reference of the Grid.
-4. Invoke the ```SearchAsync``` method of the grid by passing the search key as a parameter.
+4. Invoke the `SearchAsync` method of the Grid by passing the search key as a parameter.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -417,7 +417,7 @@ The ```SearchAsync``` method allows you to perform a search operation based on a
## Search specific columns
-By default, the search functionality searches all visible columns. However, if you want to search only specific columns, you can define the specific column’s field names in the [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html).[Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html#Syncfusion_Blazor_Grids_GridSearchSettings_Fields) property. This allows you to narrow down the search to a targeted set of columns, which is particularly useful when dealing with large datasets or grids with numerous columns.
+By default, the search functionality searches all visible columns. However, if you want to search only specific columns, you can define the specific column’s field names in the [GridSearchSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html).[Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSearchSettings.html#Syncfusion_Blazor_Grids_GridSearchSettings_Fields) property. This allows you to narrow down the search to a targeted set of columns, which is particularly useful when dealing with large datasets or Grids with numerous columns.
The following example demonstrates how to search specific columns such as **CustomerID** and **ShipCity** by using the `SearchSettings.Fields` property.
@@ -497,7 +497,7 @@ The following example demonstrates how to search specific columns such as **Cust
## Disable search for particular column
-By default, DataGrid searches all visible columns. You can disable searching for a particular column by setting the [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property of **GridColumn** as false.
+By default, Syncfusion Blazor DataGrid searches all visible columns. You can disable searching for a particular column by setting the [AllowSearching](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AllowSearching) property of **GridColumn** as false.
In the below code example, the **Order ID** column search functionality is disabled.
@@ -575,9 +575,9 @@ N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-comp
## Search on each key stroke
-The search on each keystroke feature in Syncfusion® Grid enables you to perform real-time searching of grid data as they type in the search text box. This functionality provides a seamless and interactive searching experience, allowing you to see the search results dynamically updating in real time as they enter each keystroke in the search box.
+The search on each keystroke feature in Syncfusion Blazor DataGrid enables you to perform real-time searching of Grid data as they type in the search text box. This functionality provides a seamless and interactive searching experience, allowing you to see the search results dynamically updating in real time as they enter each keystroke in the search box.
-By default, the datagrid will initiate searching operation after the Enter key is pressed. If you want to initiate the searching operation while typing the values in the search box, then you can invoke the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method of the datagrid in the [Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Input) event by rendering the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox__ctor) comonent as toolbar template component.
+By default, the Grid will initiate searching operation after the Enter key is pressed. If you want to initiate the searching operation while typing the values in the search box, then you can invoke the [SearchAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchAsync_System_String_) method of the Grid in the [Input](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox_Input) event by rendering the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html#Syncfusion_Blazor_Inputs_SfTextBox__ctor) as toolbar template.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -677,9 +677,9 @@ By default, the datagrid will initiate searching operation after the Enter key i
## Perform search operation in Grid using multiple keywords
-In addition to searching with a single keyword, the Grid component offers the capability to perform a search operation using multiple keywords. This feature enables you to narrow down your search results by simultaneously matching multiple keywords. It can be particularly useful when you need to find records that meet multiple search conditions simultaneously.
+In addition to searching with a single keyword, the Syncfusion Blazor DataGrid offers the capability to perform a search operation using multiple keywords. This feature enables you to narrow down your search results by simultaneously matching multiple keywords. It can be particularly useful when you need to find records that meet multiple search conditions simultaneously.
-The following example demonstrates, how to perform a search with multiple keywords in the grid by using the ```query``` property .
+The following example demonstrates, how to perform a search with multiple keywords in the Grid by using the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Query) property.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -793,9 +793,9 @@ The following example demonstrates, how to perform a search with multiple keywor
## Clear search by external button
-The Syncfusion® Grid component provides a capability to clear searched data in the grid. This functionality offers the ability to reset or clear any active search filters that have been applied to the grid’s data.
+The Syncfusion Blazor DataGrid provides a capability to clear searched data in the Grid. This functionality offers the ability to reset or clear any active search filters that have been applied to the Grid's data.
-To clear the searched grid records from an external button, you can set the [SearchSettings.Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchSettings) property to an empty string to clear the search text.This property represents the current search text in the search box.
+To clear the searched Grid records from an external button, you can set the [SearchSettings.Key](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SearchSettings) property to an empty string to clear the search text. This property represents the current search text in the search box.
The following example demonstrates how to clear the searched records using an external button.
diff --git a/blazor/datagrid/sorting.md b/blazor/datagrid/sorting.md
index c639956be4..869230b480 100644
--- a/blazor/datagrid/sorting.md
+++ b/blazor/datagrid/sorting.md
@@ -1,21 +1,21 @@
---
layout: post
-title: Sorting in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Sorting in Syncfusion Blazor DataGrid component and much more details.
+title: Sorting in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Sorting in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-# Sorting in Blazor DataGrid Component
+# Sorting in Blazor DataGrid
-The DataGrid component provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Datagrid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**.
+The Syncfusion Blazor DataGrid provides built-in support for sorting data-bound columns in ascending or descending order. To enable sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**.
-To know about how to **Sorting** in Blazor DataGrid Component, you can check this video.
+To know about how to **Sorting** in Grid, you can check this video.
{% youtube "youtube:https://www.youtube.com/watch?v=P3VO_vd0Ev0" %}
-To sort a particular column in the DataGrid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**.
+To sort a particular column in the Grid, click on its column header. Each time you click the header, the order of the column will switch between **Ascending** and **Descending**.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -88,15 +88,15 @@ To sort a particular column in the DataGrid, click on its column header. Each ti
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsMZhrntSJwyp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> * DataGrid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction..
+> * Grid columns are sorted in the **Ascending** order. If you click the already sorted column, then toggles the sort direction.
> * You can apply and clear sorting by using the [SortColumnAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_SortColumnAsync_System_String_Syncfusion_Blazor_Grids_SortDirection_System_Nullable_System_Boolean__) and [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) methods.
-> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to false.
+> * To disable sorting for a particular column, set the `AllowSorting` property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to **false**.
## Initial sorting
-By default, the grid component does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html) component. This feature is helpful when you want to display your data in a specific order when the grid is first loaded.
+By default, the Grid does not apply any sorting to its records at initial rendering. However, you can apply initial sorting by setting the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Field) and [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortColumn.html#Syncfusion_Blazor_Grids_GridSortColumn_Direction) in [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_Columns) property of the [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html). This feature is helpful when you want to display your data in a specific order when the Grid is first loaded.
-The following example demonstrates how to set the **GridSortSettings** component of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`.
+The following example demonstrates how to set the **GridSortSettings** of the `Columns` for **OrderID** and **ShipCity** columns with a specified `Direction`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -178,11 +178,11 @@ The following example demonstrates how to set the **GridSortSettings** component
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrAiCDLKrKWrRVA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> The initial sorting defined in the `GridSortSettings` component of the `Columns` will override any sorting applied through user interaction.
+> The initial sorting defined in the `GridSortSettings` of the `Columns` will override any sorting applied through user interaction.
## Multi-column sorting
-The DataGrid component allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.
+The Syncfusion Blazor DataGrid allows to sort more than one column at a time using multi-column sorting. To enable multi-column sorting in the Grid, set the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property to **true**, and set the [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) property to **true** which enable the user to sort multiple columns by holding the **CTRL** key and click on the column headers. This feature is useful when you want to sort your data based on multiple criteria to analyze it in various ways.
To clear multi-column sorting for a particular column, press the "Shift + mouse left click".
@@ -264,7 +264,7 @@ To clear multi-column sorting for a particular column, press the "Shift + mouse
## Prevent sorting for particular column
-The DataGrid component provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process.
+The Syncfusion Blazor DataGrid provides the ability to prevent sorting for a particular column. This can be useful when you have certain columns that you do not want to be included in the sorting process.
It can be achieved by setting the [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) property of the particular column to **false**.
@@ -342,11 +342,12 @@ The following example demonstrates, how to disable sorting for **CustomerID** co
{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVgWMDhqzLxBsoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing Sorting Functionality with the AllowUnsort Property
+## Customizing sorting functionality with the AllowUnsort property
-When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to false in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html) component, the grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the grid to its original unsorted layout through column header clicks.
+When the [AllowUnsort](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html#Syncfusion_Blazor_Grids_GridSortSettings_AllowUnsort) property is set to **false** in [GridSortSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridSortSettings.html), the Grid cannot be placed in an unsorted state by clicking on a sorted column header. This setting restricts the action of reverting the Grid to its original unsorted layout through column header clicks.
+
+In the following example, this is demonstrated by preventing the Grid from entering an unsorted state by setting `AllowUnsort` to **false** in **GridSortSettings**.
-In the following example, this is demonstrated by preventing the grid from entering an unsorted state by setting `AllowUnsort` to false in **GridSortSettings** component.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@@ -428,7 +429,7 @@ When you click on a column header for the first time, it sorts the column in asc
## Custom sorting
-The DataGrid component provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn Directive.The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5).
+The Syncfusion Blazor DataGrid provides a way to customize the default sort action for a column by defining the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnModel.html#Syncfusion_Blazor_Grids_ColumnModel_SortComparer) property of GridColumn. The SortComparer data type was the IComparer interface, so the custom sort comparer class should be implemented in the interface [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-7.0&viewFallbackFrom=net-5).
The following example demonstrates how to define custom sort comparer function for the **CustomerID** column.
@@ -533,139 +534,13 @@ The following example demonstrates how to define custom sort comparer function f
> * The SortComparer property will work only for local data.
> * When using the column template to display data in a column, you will need to use the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) to work with the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property.
-### Display null values always at bottom
-
-By default, null values in the Syncfusion Blazor DataGrid are displayed at the top when sorting in descending order and at the bottom when sorting in ascending order. However, there may be scenarios where null values need to be consistently shown at the bottom of the Grid, regardless of the sort direction. This can be achieved by using the [SortComparer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_SortComparer) property of the column. This feature is particularly useful when working with data sets where null values might need to be clearly separated from actual data entries.
-
-The `SortComparer` allows custom comparison logic for sorting. By implementing a custom comparer, null values can be handled separately and positioned at the end of the sorted list in both ascending and descending orders. You can use the [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) event to detect the sort direction and apply the appropriate logic in the custom comparer.
-
-The example below demonstrates how to display null values at the bottom of the Grid while sorting the **CustomerID** column in both ascending and descending order:
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-@code {
- public SfGrid Grid { get; set; }
- public List OrderData { get; set; }
- protected override void OnInitialized()
- {
- OrderData = OrderDetails.GetAllRecords();
- }
- static bool flag = true;
- public void SortingHandler(SortingEventArgs args)
- {
- if (args.Direction == Syncfusion.Blazor.Grids.SortDirection.Ascending)
- {
- flag = true;
-
- }
- else if (args.Direction == Syncfusion.Blazor.Grids.SortDirection.Descending)
- {
- flag = false;
- }
- }
-
- public class CustomComparer : IComparer