From 69d126ea4f09fd071c47218bb7248c9e80ec91fb Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 16 May 2025 19:36:59 +0530 Subject: [PATCH 1/7] Documentation - Revamp the blazor documentation --- blazor/datagrid/accessibility.md | 78 +++---- blazor/datagrid/events.md | 62 +++--- .../datagrid/getting-started-with-web-app.md | 68 +++--- blazor/datagrid/getting-started.md | 68 +++--- blazor/datagrid/webassembly-performance.md | 210 ++++++++++++------ 5 files changed, 274 insertions(+), 212 deletions(-) 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/events.md b/blazor/datagrid/events.md index 60ff0ecb4f..e742f5d5d0 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor 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. ```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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid. ```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 Syncfusion Blazor DataGrid. ```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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 Syncfusion Blazor DataGrid 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 diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index bdce41061d..7ceda08a02 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 -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 Grid 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,7 +42,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 %} @@ -54,7 +54,7 @@ N> Syncfusion® Blazor components are availa ## 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. @@ -72,9 +72,9 @@ cd BlazorWebApp.Client 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. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -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 Syncfusion 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 -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 Syncfusion Blazor DataGrid , 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 Syncfusion Blazor DataGrid. -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..f3c8a63f4f 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" %} @@ -28,11 +26,11 @@ To get start quickly with Blazor DataGrid component, you can check on this video ## 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 %} @@ -55,7 +53,7 @@ N> Syncfusion® Blazor components are availa ## 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,7 +68,7 @@ cd BlazorApp {% endtabs %} -## Install Syncfusion® Blazor Grid and Themes NuGet in the App +## Install Blazor Grid and Themes NuGet in the app * 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. @@ -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 Syncfusion Blazor DataGrid, 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 Syncfusion Blazor DataGrid. -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 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 for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-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® DataGrid in Blazor WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio) +* [Getting Started with Syncfusion DataGrid in Blazor WebAssembly using Visual Studio](./how-to/blazor-webassembly-datagrid-using-visual-studio) diff --git a/blazor/datagrid/webassembly-performance.md b/blazor/datagrid/webassembly-performance.md index 82b8112b06..426df8fd0a 100644 --- a/blazor/datagrid/webassembly-performance.md +++ b/blazor/datagrid/webassembly-performance.md @@ -1,30 +1,33 @@ --- layout: post title: WebAssembly Performance in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about WebAssembly Performance in Syncfusion Blazor DataGrid component and more. +description: Checkout and learn here all about webAssembly performance in Syncfusion Blazor DataGrid component and more. platform: Blazor control: DataGrid documentation: ug --- -# WebAssembly Performance in Blazor DataGrid Component +# WebAssembly Performance in Blazor DataGrid -This section provides performance guidelines for using Syncfusion® data grid component efficiently in Blazor WebAssembly application. The general framework Blazor WebAssembly performance best practice/guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). +This section provides performance guidelines for using Syncfusion Blazor DataGrid efficiently in Blazor WebAssembly application. The general framework Blazor WebAssembly performance best practice/guidelines can be found [here](https://learn.microsoft.com/en-us/aspnet/core/blazor/performance?view=aspnetcore-7.0). -N> You can refer to our Getting Started with [Blazor Server-Side DataGrid](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly DataGrid](https://blazor.syncfusion.com/documentation/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio) documentation pages for configuration specifications. +N> You can refer to our Getting Started with [Blazor Server-Side DataGrid](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) and [Blazor WebAssembly Grid](https://blazor.syncfusion.com/documentation/datagrid/how-to/blazor-webassembly-datagrid-using-visual-studio) documentation pages for configuration specifications. ## Avoid unnecessary component renders -During Blazor diffing algorithm, every cell of the grid component and its child component will be checked for re-rendering. For instance, having **EventCallBack** on the application or grid will check every child component once event callback is completed. +During Blazor diffing algorithm, every cell of the Syncfusion Blazor DataGrid and its child component will be checked for re-rendering. For instance, having **EventCallBack** on the application or Grid will check every child component once event callback is completed. -You can have fine-grained control over grid component rendering. **PreventRender** method help you to avoid unnecessary re-rendering of the grid component. This method internally overrides the **ShouldRender** method of the grid to prevent rendering. +You can have fine-grained control over Grid rendering. [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PreventRender_System_Boolean_) method help you to avoid unnecessary re-rendering of the Grid. This method internally overrides the [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRender) method of the Grid to prevent rendering. In the following example: -* **PreventRender** method is called in the **IncrementCount** method which is a click callback. -* Now grid component will not be a part of the rendering which happens as result of the click event and **currentCount** alone will get updated. +* `PreventRender` method is called in the **IncrementCount** method which is a click callback. +* Now Grid will not be a part of the rendering which happens as result of the click event and **currentCount** alone will get updated. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids

Counter

Current count: @currentCount

@@ -34,123 +37,184 @@ In the following example: - - - - - + + + + + @code { - SfGrid grid { get; set; } + SfGrid grid { get; set; } private int currentCount = 0; - public List Orders { get; set; } + public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - Verified = (new bool[] { true, false })[new Random().Next(2)] - }).ToList(); - } + Orders = OrderData.GetAllRecords(); + } private void IncrementCount() { grid.PreventRender(); currentCount++; } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int orderID, string customerID, double freight, DateTime? orderDate) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.OrderDate = orderDate; + } - public class Order + public static List GetAllRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - public bool Verified { get; set; } + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4))); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8))); + Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); + Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); + } + return Orders; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public DateTime? OrderDate { get; set; } + public bool Verified { get; set; } } -``` -N> * **PreventRender** method accepts boolean argument that accepts true or false to disable or enable rendering respectively. -
* **PreventRender** method can be used only after grid component completed initial rendering. Calling this method during initial rendering will not have any effect. +{% endhighlight %} +{% endtabs %} -## Avoid unnecessary component renders after grid events +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVIZyWdAaNWlsFx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -When a callback method is assigned to the grid events, then the **StateHasChanged** will be called in parent component of the grid automatically once the event is completed. +>* `PreventRender` method accepts boolean argument that accepts true or false to disable or enable rendering respectively. +>* `PreventRender` method can be used only after Grid completed initial rendering. Calling this method during initial rendering will not have any effect. -You can prevent this re-rendering of the grid component by setting **PreventRender** property of the corresponding event argument as true. +## Avoid unnecessary component renders after Grid events + +When a callback method is assigned to the Syncfusion Blazor DataGrid events, then the **StateHasChanged** will be called in parent component of the Grid automatically once the event is completed. + +You can prevent this re-rendering of the Grid by setting [PreventRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PreventRender_System_Boolean_) property of the corresponding event argument as true. In the following example: -* **RowSelected** event is bound with a callback method, so once row selection event is completed the **StateHasChanged** will be invoked for the parent component. -* `RowSelectEventArgs.PreventRender` is set as **true** so now grid will not be part of the **StateHasChanged** invoked as result of the grid. +* [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected) event is bound with a callback method, so once row selection event is completed the **StateHasChanged** will be invoked for the parent component. +* `RowSelectEventArgs.PreventRender` is set as **true** so now Grid will not be part of the **StateHasChanged** invoked as result of the Grid. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml +@using Syncfusion.Blazor.Grids

Selected OrderID: @SelectedOrder.OrderID

- - - - - + + + + + - + @code { - SfGrid grid { get; set; } - public List Orders { get; set; } - Order SelectedOrder = new Order { }; + SfGrid grid { get; set; } + OrderData SelectedOrder = new OrderData { }; + + public List Orders { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - Verified = (new bool[] { true, false })[new Random().Next(2)] - }).ToList(); - } + Orders = OrderData.GetAllRecords(); + } - private void OnRowSelected(RowSelectEventArgs args) + private void OnRowSelected(RowSelectEventArgs args) { - args.PreventRender = true; //without this, you may see noticeable delay in selection with 75 rows in grid. + args.PreventRender = true; //Without this, you may see noticeable delay in selection with rows in Grid. SelectedOrder = args.Data; } +} + +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData() { } + + public OrderData(int orderID, string customerID, double freight, DateTime? orderDate) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.OrderDate = orderDate; + } - public class Order + public static List GetAllRecords() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - public bool Verified { get; set; } + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, new DateTime(1996, 7, 4))); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, new DateTime(1996, 7, 5))); + Orders.Add(new OrderData(10250, "HANAR", 65.83, new DateTime(1996, 7, 6))); + Orders.Add(new OrderData(10251, "VINET", 41.34, new DateTime(1996, 7, 7))); + Orders.Add(new OrderData(10252, "SUPRD", 151.30, new DateTime(1996, 7, 8))); + Orders.Add(new OrderData(10253, "HANAR", 58.17, new DateTime(1996, 7, 9))); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, new DateTime(1996, 7, 10))); + Orders.Add(new OrderData(10255, "VINET", 148.33, new DateTime(1996, 7, 11))); + Orders.Add(new OrderData(10256, "HANAR", 13.97, new DateTime(1996, 7, 12))); + } + return Orders; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public DateTime? OrderDate { get; set; } + public bool Verified { get; set; } } -``` -N> * **PreventRender** property internally overrides the **ShouldRender** method of the grid to prevent rendering. -
* It is recommended to set **PreventRender** as true for user interactive events such as RowSelected, RowSelecting etc. for better performance. -
* For events without any argument such as **DataBound**, you can use **PreventRender** method of the grid to disable rendering. +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBoDIWnqvasLQsp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +>* `PreventRender` property internally overrides the [ShouldRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShouldRender) method of the Grid to prevent rendering. +>* It is recommended to set `PreventRender` as true for user interactive events such as [RowSelected](https://blazor.syncfusion.com/documentation/datagrid/events#rowselected), [RowSelecting](https://blazor.syncfusion.com/documentation/datagrid/events#rowselecting) etc. for better performance. +>* For events without any argument such as [DataBound](https://blazor.syncfusion.com/documentation/datagrid/events#databound), you can use `PreventRender` method of the Grid to disable rendering. ## Use paging or virtualization to load only visible rows -Grid renders each row and cell as individual component and loading large number of rows and cells in view will have performance impact on both memory consumption and CPU processing. +The Syncfusion Blazor DataGrid renders each row and cell as individual component and loading large number of rows and cells in view will have performance impact on both memory consumption and CPU processing. -To use grid without such performance impacts, you can load reduced set of rows in the grid using [paging](./paging) and [virtualization](./virtualization) features. +To use Grid without such performance impacts, you can load reduced set of rows in the Grid using [Paging](./paging) and [Virtualization](./virtualization) features. -N> Even though with paging or virtualization feature enabled, having hundreds of rows in single grid page will again introduce performance lag in the application, so you need to set reasonable page size. \ No newline at end of file +N> Even though with `Paging` or `Virtualization` feature enabled, having hundreds of rows in single Grid page will again introduce performance lag in the application, so you need to set reasonable page size. \ No newline at end of file From f2c72fd9a783479b1b176cdb771cf112f75c683e Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Fri, 16 May 2025 20:02:16 +0530 Subject: [PATCH 2/7] Updated the md file --- .../datagrid/getting-started-with-web-app.md | 38 +++++++++---------- blazor/datagrid/getting-started.md | 18 ++++----- 2 files changed, 28 insertions(+), 28 deletions(-) diff --git a/blazor/datagrid/getting-started-with-web-app.md b/blazor/datagrid/getting-started-with-web-app.md index 7ceda08a02..6bf2edbe6d 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataGrid in Web App -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. +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 %} @@ -19,17 +19,17 @@ This section briefly explains about how to include [Syncfusion Blazor DataGrid]( * [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 Blazor Grid and Themes NuGet in the Blazor Web App +## Install Blazor Grid and Themes NuGet in the Blazor web app -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/). +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 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. @@ -46,19 +46,19 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o {% 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 Blazor DataGrid 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. @@ -98,7 +98,7 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o {% 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" %} @@ -191,7 +191,7 @@ 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 +## Add Blazor DataGrid 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: @@ -245,7 +245,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i * 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 Syncfusion Blazor DataGrid , 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. diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index f3c8a63f4f..015a29e47a 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor DataGrid -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 [Syncfusion Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) in your Blazor webAssembly app using visual studio and visual studio code. 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. @@ -24,13 +24,13 @@ To get start quickly with , you can check on this video or [GitHub](https://gith * [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 Blazor DataGrid and Themes NuGet in the App +## Install Blazor DataGrid and Themes NuGet in the app -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. +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" %} @@ -51,9 +51,9 @@ N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.o * [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,7 +70,7 @@ cd BlazorApp ## Install Blazor Grid 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. @@ -105,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" %} From 320138aa570b074b469a2ad523785088c6e263f3 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 20 May 2025 11:37:53 +0530 Subject: [PATCH 3/7] updated the md file --- blazor/datagrid/cell.md | 80 +++++++-------- blazor/datagrid/searching.md | 56 +++++------ blazor/datagrid/sorting.md | 187 ++++++----------------------------- 3 files changed, 99 insertions(+), 224 deletions(-) diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md index 8f50cec015..4ea2b0f06b 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" %} @@ -107,26 +107,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. @@ -232,13 +232,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" %} @@ -342,11 +342,11 @@ The following example demonstrates how to add a `QueryCellInfo` event handler to {% previewsample "https://blazorplayground.syncfusion.com/embed/LDLgjvivAmfpAZcD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event is triggered for every cell of the grid, so it may impact the performance of the grid whether used to modify a large number of cells. +> The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.QueryCellInfoEventArgs-1.html) event is triggered for every cell of the Grid, so it may impact the performance of the Grid whether used to modify a large number of cells. ### 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" %} @@ -441,7 +441,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 @@ -541,11 +541,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: @@ -553,7 +553,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" %} @@ -658,13 +658,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`. @@ -758,17 +758,17 @@ 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" %} @@ -776,7 +776,7 @@ The following example demonstrates how to set the `GridLines` property based on @using Syncfusion.Blazor.DropDowns @using BlazorApp1.Data - + @@ -869,6 +869,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 [Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor Grid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. diff --git a/blazor/datagrid/searching.md b/blazor/datagrid/searching.md index e0ef269905..58ff5d7298 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..eb92548315 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 - { - public int Compare(object XRowDataToCompare, object YRowDataToCompare) - { - OrderDetails XRowData = XRowDataToCompare as OrderDetails; - OrderDetails YRowData = YRowDataToCompare as OrderDetails; - string value1 = XRowData.CustomerID; - string value2 = YRowData.CustomerID; - - if (flag == true){ - if (string.IsNullOrEmpty(value1) && string.IsNullOrEmpty(value2)) - { - return 0; - } - else if (string.IsNullOrEmpty(value1)) - { - return 1; // Place value1 after value2 (empty string goes to the bottom) - } - else if (string.IsNullOrEmpty(value2)) - { - return -1; // Place value2 after value1 (empty string goes to the bottom) - } - } - else if(flag == false){ - if (string.IsNullOrEmpty(value1) && string.IsNullOrEmpty(value2)) - { - return 0; - } - else if (string.IsNullOrEmpty(value1)) - { - return -1; - } - else if (string.IsNullOrEmpty(value2)) - { - return 1; - } - } - return string.Compare(value1, value2, StringComparison.OrdinalIgnoreCase); - } - } -} -{% endhighlight %} -{% highlight c# tabtitle="OrderData.cs" %} -public class OrderDetails - { - public static List order = new List(); - public OrderDetails(int OrderID, string CustomerId, int EmployeeId, double Freight, DateTime OrderDate) - { - this.OrderID = OrderID; - this.CustomerID = CustomerId; - this.EmployeeID = EmployeeId; - this.Freight = Freight; - this.OrderDate = OrderDate; - } - public static List GetAllRecords() - { - if (order.Count == 0) - { - order.Add(new OrderDetails(10248, "VINET", 5, 32.38, new DateTime(1996, 7, 4))); - order.Add(new OrderDetails(10249, "", 6, 11.61, new DateTime(1996, 7, 5))); - order.Add(new OrderDetails(10250, "HANAR", 4, 65.83,new DateTime(1996, 7, 8))); - order.Add(new OrderDetails(10251, "VICTE", 3, 41.34, new DateTime(1996, 7, 8))); - order.Add(new OrderDetails(10252, "SUPRD", 4, 51.3, new DateTime(1996, 7, 9))); - order.Add(new OrderDetails(10253, "", 3, 58.17, new DateTime(1996, 7, 10))); - order.Add(new OrderDetails(10254, "CHOPS", 5, 22.98, new DateTime(1996, 7, 11))); - order.Add(new OrderDetails(10255, "RICSU", 9, 148.33, new DateTime(1996, 7, 12))); - order.Add(new OrderDetails(10256, "WELLI", 3, 13.97, new DateTime(1996, 7, 15))); - order.Add(new OrderDetails(10257, "HILAA", 4, 81.91, new DateTime(1996, 7, 16))); - order.Add(new OrderDetails(10258, "", 1, 140.51, new DateTime(1996, 7, 17))); - order.Add(new OrderDetails(10259, "CENTC", 4, 3.25, new DateTime(1996, 7, 18))); - } - return order; - } - public int OrderID { get; set; } - public string CustomerID { get; set; } - public int EmployeeID { get; set; } - public double Freight { get; set; } - public DateTime OrderDate { get; set; } -} -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBoDSNvhpqoYagK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - ## Touch interaction -When you tap the datagrid header on touchscreen devices, the selected column header is sorted. A popup ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired datagrid headers. +When you tap the Syncfusion Blazor DataGrid header on touchscreen devices, the selected column header is sorted. A popup ![Sorting in Blazor DataGrid.](./images/blazor-datagrid-sorting.jpg) is displayed for multi-column sorting. To sort multiple columns, tap the popup![Multiple sorting in Blazor DataGrid.](./images/blazor-datagrid-multiple-sorting.jpg), and then tap the desired Grid headers. > The [AllowMultiSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowMultiSorting) and [AllowSorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowSorting) should be **true** then only the popup will be shown. -The following screenshot represents a grid touch sorting in the device. +The following screenshot represents a Grid touch sorting in the device. ![Sorting in Blazor DataGrid using touch interaction.](./images/blazor-datagrid-touch-sorting.jpg) @@ -675,7 +550,7 @@ To perform sorting based on foreign key column, the `GridForeignColumn` column c **Sort foreign key column based on text for local data** -In the case of local data in the grid, the sorting operation will be performed based on the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property of the column. The `ForeignKeyValue` property should be defined in the column definition with the corresponding foreign key value for each row. The grid will sort the foreign key column based on the text representation of the `ForeignKeyValue` property. +In the case of local data in the Grid, the sorting operation will be performed based on the [ForeignKeyValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*vgn3lm*_ga*MTcyMDA4OTE2OS4xNjg3OTQzMDQ5*_ga_WC4JKKPHH0*MTY4OTc2NTA2MS44NC4xLjE2ODk3NjUyNDAuNjAuMC4w&_ga=2.195629932.1791817302.1689564530-1720089169.1687943049#Syncfusion_Blazor_Grids_GridColumn_ForeignKeyValue) property of the column. The `ForeignKeyValue` property should be defined in the column definition with the corresponding foreign key value for each row. The Grid will sort the foreign key column based on the text representation of the `ForeignKeyValue` property. The following example demonstrates how to perform sorting by enabling a foreign key column, where the **CustomerID** column acts as a foreign column displaying the **ContactName** column from foreign data. @@ -789,7 +664,7 @@ public class EmployeeData ## How to customize sort icon -To customize the sort icon in the DataGrid, you can override the default grid classes **.e-icon-ascending** and **.e-icon-descending** with custom content using CSS. Simply specify the desired icons or symbols using the **content** property as mentioned below +To customize the sort icon in the Syncfusion Blazor DataGrid, you can override the default Grid classes **.e-icon-ascending** and **.e-icon-descending** with custom content using CSS. Simply specify the desired icons or symbols using the **content** property as mentioned below ```css .e-grid .e-icon-ascending::before { @@ -801,7 +676,7 @@ To customize the sort icon in the DataGrid, you can override the default grid cl } ``` -In the below sample, DataGrid is rendered with a customized sort icon. +In the below sample, Grid is rendered with a customized sort icon. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -893,13 +768,13 @@ In the below sample, DataGrid is rendered with a customized sort icon. ## Sort columns externally -The DataGrid component in Syncfusion's Blazor suite allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click. +The Syncfusion Blazor DataGrid allows you to customize the sorting of columns and provides flexibility in sorting based on external interactions. You can sort columns and clear sorting using an external button click. ### Add sort columns -To sort a column externally, you can utilize 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__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the DataGrid component. This method allows you to programmatically sort a specific column based on your requirements. +To sort a column externally, you can utilize 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__) method with parameters **ColumnName**, **Direction** and **IsMultiSort** provided by the Grid. This method allows you to programmatically sort a specific column based on your requirements. -The following example demonstrates how to add sort columns to a grid. It utilizes the **DropDownList** component to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters. +The following example demonstrates how to add sort columns to a Grid. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column and sort direction. When an external button is clicked, the `SortColumnAsync` method is called with the specified **ColumnName**, **Direction**, and **IsMultiSort** parameters. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1038,9 +913,9 @@ The following example demonstrates how to add sort columns to a grid. It utilize ### Remove sort columns -To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid component. This method allows you to remove the sorting applied to a specific column. +To remove a sort column externally, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync_System_Collections_Generic_List_System_String__) method provided by the Grid. This method allows you to remove the sorting applied to a specific column. -The following example demonstrates how to remove sort columns. It utilizes the **DropDownList** component to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. +The following example demonstrates how to remove sort columns. It utilizes the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started-with-web-app) to select the column. When an external button is clicked, the `ClearSortingAsync` method is called to remove the selected sort column. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -1169,7 +1044,7 @@ The following example demonstrates how to remove sort columns. It utilizes the * ### Clear sorting -To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the DataGrid component. This method clears the sorting applied to all columns in the grid. +To clear the sorting on an external button click, you can use the [ClearSortingAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ClearSortingAsync) method provided by the Grid. This method clears the sorting applied to all columns in the Grid. The following example demonstrates how to clear the sorting using `ClearSortingAsync` method in the external button click. @@ -1264,13 +1139,13 @@ The following example demonstrates how to clear the sorting using `ClearSortingA ## Sorting events -The DataGrid component provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed. +The Syncfusion Blazor DataGrid provides two events that are triggered during the sorting action such as [Sorting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorting) and [Sorted](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Sorted). These events can be used to perform any custom actions before and after the sorting action is completed. 1. **Sorting**: `Sorting` event is triggered before the sorting action begins. It provides a way to perform any necessary operations before the sorting action takes place. This event provides a parameter that contains the current sorting column name, direction, and action. 2. **Sorted**: `Sorted` event is triggered after the sorting action is completed. It provides a way to perform any necessary operations after the sorting action has taken place. This event provides a parameter that contains the current sorting column name, direction, and action. -The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message +The following example demonstrates how the `Sorting` and `Sorted` events work when Sorting is performed. The `Sorting` event event is used to cancel the sorting of the OrderID column. The `Sorted` event is used to display a message. {% tabs %} {% highlight razor tabtitle="Index.razor" %} From 5e867ad2f9c7778e8b98f213bc6b34f18c7c3d32 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 22 May 2025 10:40:04 +0530 Subject: [PATCH 4/7] updated the md file --- blazor/datagrid/local-data.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/blazor/datagrid/local-data.md b/blazor/datagrid/local-data.md index 2aaa56f66b..c3cbc3297c 100644 --- a/blazor/datagrid/local-data.md +++ b/blazor/datagrid/local-data.md @@ -1208,6 +1208,9 @@ public class OrderData public DateTime? OrderDate { get; set; } } +{% endhighlight %} +{% endtabs %} + {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Datasource Dynamically in Blazor DataGrid](../images/blazor-datagrid-dynamic-datasource.gif) From f2ec9f8b0a7147436d55355d9a04216546f7399b Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Thu, 22 May 2025 11:57:50 +0530 Subject: [PATCH 5/7] updated the md file --- blazor/datagrid/local-data.md | 3 --- blazor/datagrid/template-pdf-export.md | 2 ++ 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/blazor/datagrid/local-data.md b/blazor/datagrid/local-data.md index c3cbc3297c..2aaa56f66b 100644 --- a/blazor/datagrid/local-data.md +++ b/blazor/datagrid/local-data.md @@ -1208,9 +1208,6 @@ public class OrderData public DateTime? OrderDate { get; set; } } -{% endhighlight %} -{% endtabs %} - {% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIXeCHJywphWgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Changing Datasource Dynamically in Blazor DataGrid](../images/blazor-datagrid-dynamic-datasource.gif) diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md index 2b1d072691..b1bcca2b79 100644 --- a/blazor/datagrid/template-pdf-export.md +++ b/blazor/datagrid/template-pdf-export.md @@ -11,6 +11,8 @@ documentation: ug The Syncfusion Blazor DataGrid offers the option to export the column, detail, and caption templates to an PDF document. The template contains images, hyperlinks, and customized text. +{% youtube "youtube:https://www.youtube.com/watch?v=-cjoxysUWcg"%} + ## Exporting with column template The PDF export functionality allows you to export Grid columns that include images, hyperlinks, and custom text to a PDF document. From ea1fa36bc4981a23c774837492a8fc729fd9ce97 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Mon, 2 Jun 2025 11:05:31 +0530 Subject: [PATCH 6/7] updated the md file --- blazor/datagrid/cell.md | 2 +- blazor/datagrid/events.md | 96 +++++++++---------- .../datagrid/getting-started-with-web-app.md | 8 +- blazor/datagrid/getting-started.md | 12 +-- blazor/datagrid/sorting.md | 2 +- 5 files changed, 60 insertions(+), 60 deletions(-) diff --git a/blazor/datagrid/cell.md b/blazor/datagrid/cell.md index 335c063d11..436cd78182 100644 --- a/blazor/datagrid/cell.md +++ b/blazor/datagrid/cell.md @@ -981,4 +981,4 @@ The following example demonstrates how to set the `GridLines` property based on > By default, the Grid renders with **Default** mode. -N> You can refer to the [Blazor Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore [Blazor Grid 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 e742f5d5d0..f387e3f956 100644 --- a/blazor/datagrid/events.md +++ b/blazor/datagrid/events.md @@ -18,7 +18,7 @@ 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 Syncfusion Blazor 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**. ## OnActionComplete -[OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionComplete) event triggers when Syncfusion Blazor 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**. ## OnActionFailure -[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) event triggers when any Syncfusion Blazor 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**. ## Created -[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) event triggers when the Syncfusion Blazor DataGrid 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**. ## 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 Syncfusion Blazor DataGrid properties before the Grid 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**. ## Destroyed -[Destroyed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Destroyed) event triggers when the Syncfusion Blazor DataGrid is destroyed. By using this event you can confirm that the Grid 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**. ## 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 Syncfusion Blazor 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**. ## 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 Syncfusion Blazor 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**. ## 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 Syncfusion Blazor 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 @@ -579,7 +579,7 @@ N> All the events should be provided in a single **GridEvents**. ## 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 Syncfusion Blazor 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 @@ -1659,7 +1659,7 @@ N> All the events should be provided in a single **GridEvents**. ## OnPdfExport -[OnPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnPdfExport) event triggers before Syncfusion Blazor 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**. ## PdfHeaderQueryCellInfoEvent -[PdfHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event triggers before Syncfusion Blazor 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**. ## PdfQueryCellInfoEvent -[PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfQueryCellInfoEvent) event triggers before Syncfusion Blazor DataGrid data is exported to PDF document. It can be used to customize the Grid 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**. ## PdfAggregateTemplateInfo -[PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event triggers before Syncfusion Blazor DataGrid data is exported to PDF document. It can be used to customize the Grid 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**. ## 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 Syncfusion Blazor 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**. ## OnExcelExport -[OnExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnExcelExport) event triggers before Syncfusion Blazor DataGrid data is exported to excel document. +[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**. ## ExcelHeaderQueryCellInfoEvent -[ExcelHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelHeaderQueryCellInfoEvent) event triggers before Syncfusion Blazor DataGrid data is exported to Excel document. It can be used to customize the header content in Excel document. +[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**. ## ExcelQueryCellInfoEvent -[ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelQueryCellInfoEvent) event triggers before Syncfusion Blazor DataGrid data is exported to Excel document. It can be used to customize the Grid content in Excel document. +[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**. ## ExcelAggregateTemplateInfo -[ExcelAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelAggregateTemplateInfo) event triggers before Syncfusion Blazor DataGrid data is exported to Excel document. It can be used to customize the Grid aggregate content in Excel document. +[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**. ## 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 document. It can be used to customize the Syncfusion Blazor DataGrid group caption content in Excel document. +[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**. ## ExportComplete -[ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event triggers once Syncfusion Blazor 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 @@ -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 6bf2edbe6d..2d55def682 100644 --- a/blazor/datagrid/getting-started-with-web-app.md +++ b/blazor/datagrid/getting-started-with-web-app.md @@ -25,7 +25,7 @@ You can create a **Blazor web app** using visual studio 2022 via [Microsoft Temp 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 Blazor Grid and Themes NuGet in the Blazor web app +## Install Blazor DataGrid and Themes NuGet in the Blazor web app 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/). @@ -243,11 +243,11 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% 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 Grid 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 -To bind data for the Syncfusion Blazor DataGrid , 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,7 +282,7 @@ To bind data for the Syncfusion Blazor DataGrid , you can assign a IEnumerable o ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Syncfusion Blazor DataGrid. +The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. 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). diff --git a/blazor/datagrid/getting-started.md b/blazor/datagrid/getting-started.md index 015a29e47a..858b86a9c0 100644 --- a/blazor/datagrid/getting-started.md +++ b/blazor/datagrid/getting-started.md @@ -68,7 +68,7 @@ cd BlazorApp {% endtabs %} -## Install 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. * Ensure you’re in the project root directory where your `.csproj` file is located. @@ -178,7 +178,7 @@ Add the Syncfusion Blazor DataGrid in the **~/Pages/Index.razor** file. ## Defining row data -To bind data for the Syncfusion Blazor DataGrid, 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 %} @@ -213,7 +213,7 @@ To bind data for the Syncfusion Blazor DataGrid, you can assign a IEnumerable ob ## Defining columns -The columns are automatically generated when columns declaration is empty or undefined while initializing the Syncfusion Blazor DataGrid. +The columns are automatically generated when columns declaration is empty or undefined while initializing the Grid. 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). @@ -376,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/sorting.md b/blazor/datagrid/sorting.md index eb92548315..869230b480 100644 --- a/blazor/datagrid/sorting.md +++ b/blazor/datagrid/sorting.md @@ -342,7 +342,7 @@ 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), 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. From abfcea6bfad5bc274bef692a409b5211386e2a54 Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 3 Jun 2025 10:51:20 +0530 Subject: [PATCH 7/7] updated the md file --- blazor-toc.html | 3 - blazor/datagrid/templates.md | 228 --------------------- blazor/datagrid/webassembly-performance.md | 2 +- 3 files changed, 1 insertion(+), 232 deletions(-) delete mode 100644 blazor/datagrid/templates.md diff --git a/blazor-toc.html b/blazor-toc.html index 56acca0afc..44ad0b59b5 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1893,9 +1893,6 @@
  • Cell
    • -
  • - Templates -
  • Editing
      diff --git a/blazor/datagrid/templates.md b/blazor/datagrid/templates.md deleted file mode 100644 index c340f7e024..0000000000 --- a/blazor/datagrid/templates.md +++ /dev/null @@ -1,228 +0,0 @@ ---- -layout: post -title: Templates in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Templates in Syncfusion Blazor DataGrid component and much more details. -platform: Blazor -control: DataGrid -documentation: ug ---- - -# Templates in Blazor DataGrid Component - -Blazor has templated components that accept one or more UI segments as input and can be rendered as part of the component during component rendering. DataGrid is a templated Blazor component that allows you to customize various parts of the UI using template parameters. It allows you to render custom components or content based on your own logic. - -The available template options in datagrid are as follows, - -* [Column template](./columns#column-template) - Used to customize cell content. -* [Header template](./columns#header-template) - Used to customize header cell content. -* [Row template](./row#row-template) - Used to customize row content. -* [Detail template](./row#detail-template) - Used to customize the detail cell content. - -## Template context - -Most of the templates used by datagrid are of type **RenderFragment** and they will be passed with parameters. You can access the parameters passed to the templates using implicit parameter named **context**. You can also change this implicit parameter name using **Context** attribute. - -For example, you can access the data of the column template using **context** as follows. - -```csharp - -@using Syncfusion.Blazor.Grids - - - - - - - - - - - - - - - -@code{ - public List Employees { get; set; } - - protected override void OnInitialized() - { - Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() - { - EmployeeID = x, - FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], - LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)], - Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", - "Inside Sales Coordinator" })[new Random().Next(4)], - HireDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public class EmployeeData - { - public int? EmployeeID { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Title { get; set; } - public DateTime? HireDate { get; set; } - } -} -``` - -The following screenshot represents the column Template. -![Blazor DataGrid with Column Template.](images/blazor-datagrid-column-template.png) - -## GridTemplates component - -If a component contains any **RenderFragment** type property then it does not allow any child components other than the render fragment property, which is [by design in Blazor](https://github.com/aspnet/AspNetCore/issues/10836). - -This prevents us from directly specifying templates such as **RowTemplate** and **DetailTemplate** as descendant of DataGrid component. Hence the templates such as **RowTemplate** and **DetailTemplate** should be wrapped around a component named **GridTemplates** as follows. - -N> From `v17.4.39`,the `ModelType` property has been removed from the DataGrid Component. - -```csharp - -@using Syncfusion.Blazor.Grids - - - - - @{ - var employee = (emp as EmployeeData); - - @employee.EmployeeID - - - - - - - - - - - - - - - - - - - - - - - - - -
      First Name @employee.FirstName
      Last Name@employee.LastName
      - Title - - @employee.Title -
      - Birth Date - - @employee.BirthDate.Value.ToShortDateString() -
      - - } -       -       - - - - -       - - - - -@code{ - public List Employees { get; set; } - - protected override void OnInitialized() - { - Employees = Enumerable.Range(1, 9).Select(x => new EmployeeData() - { - EmployeeID = x, - FirstName = (new string[] { "Nancy", "Andrew", "Janet", "Margaret", "Steven" })[new Random().Next(5)], - LastName = (new string[] { "Davolio", "Fuller", "Leverling", "Peacock", "Buchanan" })[new Random().Next(5)], - Title = (new string[] { "Sales Representative", "Vice President, Sales", "Sales Manager", - "Inside Sales Coordinator" })[new Random().Next(4)], - BirthDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public class EmployeeData - { - public int? EmployeeID { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Title { get; set; } - public DateTime? BirthDate { get; set; } - } -} -``` - -The following image represents the Row Template -![Blazor DataGrid with Row Template.](images/blazor-datagrid-rows.png) - -N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file diff --git a/blazor/datagrid/webassembly-performance.md b/blazor/datagrid/webassembly-performance.md index 426df8fd0a..a4f11155b5 100644 --- a/blazor/datagrid/webassembly-performance.md +++ b/blazor/datagrid/webassembly-performance.md @@ -112,7 +112,7 @@ public class OrderData >* `PreventRender` method accepts boolean argument that accepts true or false to disable or enable rendering respectively. >* `PreventRender` method can be used only after Grid completed initial rendering. Calling this method during initial rendering will not have any effect. -## Avoid unnecessary component renders after Grid events +## Avoid unnecessary component renders after Blazor DataGrid events When a callback method is assigned to the Syncfusion Blazor DataGrid events, then the **StateHasChanged** will be called in parent component of the Grid automatically once the event is completed.