Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
302 changes: 183 additions & 119 deletions blazor/datagrid/connecting-to-adaptors/custom-adaptor.md

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion blazor/datagrid/connecting-to-adaptors/graphql-adaptor.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Blazor Data Grid with GraphQL using Custom Adaptor | Syncfusion
title: Blazor Data Grid with GraphQL | Syncfusion
description: Build Blazor apps with GraphQL and Syncfusion Data Grid to enable CRUD, filtering, sorting, paging, and grouping for seamless data operations.
control: DataGrid
platform: blazor
Expand Down
20 changes: 10 additions & 10 deletions blazor/datagrid/events.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ documentation: ug

# Events in Blazor DataGrid

This section lists the events available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and when they are triggered for various Grid actions.
This section lists the events available in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid and when they are triggered for various DataGrid actions.

Events are assigned to the Grid by using a single **GridEvents** component. When configuring Grid events, specify the generic type via the **TValue** parameter to match the Grid’s data model.

N> All events should be configured within a single **GridEvents** component.

## OnActionBegin

[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) triggers when a Grid action starts ([sorting](https://blazor.syncfusion.com/documentation/datagrid/sorting), [filtering](https://blazor.syncfusion.com/documentation/datagrid/filtering), [paging](https://blazor.syncfusion.com/documentation/datagrid/paging), [grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping), [editing](https://blazor.syncfusion.com/documentation/datagrid/editing), and more). Use this to inspect or adjust action parameters before execution.
[OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionBegin) triggers when a DataGrid action starts ([sorting](https://blazor.syncfusion.com/documentation/datagrid/sorting), [filtering](https://blazor.syncfusion.com/documentation/datagrid/filtering), [paging](https://blazor.syncfusion.com/documentation/datagrid/paging), [grouping](https://blazor.syncfusion.com/documentation/datagrid/grouping), [editing](https://blazor.syncfusion.com/documentation/datagrid/editing), and more). Use this to inspect or adjust action parameters before execution.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -109,7 +109,7 @@ N> All events should be configured within a single **GridEvents** component.

## OnActionFailure

[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) triggers when a Grid action fails. Use it to log or display error details. In the following example, an invalid URL is configured to demonstrate the failure event.
[OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnActionFailure) triggers when a DataGrid action fails. Use it to log or display error details. In the following example, an invalid URL is configured to demonstrate the failure event.

```cshtml
@using Syncfusion.Blazor
Expand Down Expand Up @@ -195,7 +195,7 @@ N> All events should be configured within a single **GridEvents** component.

## Created

[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) triggers once the Grid is created. Use it for one-time initialization that depends on the Grid being ready.
[Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_Created) triggers once the Grid is created. Use it for one-time initialization that depends on the DataGrid being ready.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -240,7 +240,7 @@ N> All events should be configured within a single **GridEvents** component.

## OnLoad

[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnLoad) triggers before the Grid rendering starts, allowing customization of Grid properties prior to rendering.
[OnLoad](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnLoad) triggers before the DataGrid rendering starts, allowing customization of DataGrid properties prior to rendering.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -285,7 +285,7 @@ N> All events should be configured within 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 Grid is destroyed. Use it to 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 DataGrid is destroyed. Use it to confirm that the DataGrid gets completely destroyed.
```cshtml
@using Syncfusion.Blazor.Grids

Expand Down Expand Up @@ -329,7 +329,7 @@ N> All events should be configured within a single **GridEvents** component.

## OnDataBound

[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) triggers before data is bound to the Grid. Use it to adjust query/columns based on incoming data.
[OnDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnDataBound) triggers before data is bound to the DataGrid. Use it to adjust query/columns based on incoming data.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -374,7 +374,7 @@ N> All events should be configured within a single **GridEvents** component.

## DataBound

[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) triggers after the data source is populated in the Grid. Use it for final UI adjustments after binding.
[DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) triggers after the data source is populated in the DataGrid. Use it for final UI adjustments after binding.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -419,7 +419,7 @@ N> All events should be configured within a single **GridEvents** component.

## RowDataBound

[RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) triggers before each row element is appended to the Grid. Use it to style or transform row content.
[RowDataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_RowDataBound) triggers before each row element is appended to the DataGrid. Use it to style or transform row content.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down Expand Up @@ -1004,7 +1004,7 @@ N> All events should be configured within a single **GridEvents** component.

## QueryCellInfo

[QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) triggers before a cell element is appended to the Grid. Use it to customize cell content, attributes, or styles.
[QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) triggers before a cell element is appended to the DataGrid. Use it to customize cell content, attributes, or styles.

```cshtml
@using Syncfusion.Blazor.Grids
Expand Down
2 changes: 1 addition & 1 deletion blazor/datagrid/how-to/css-isolation-for-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

CSS isolation allows defining component-specific styles by creating a **.razor.css** file that matches the name of the **.razor** file. This ensures that the styles apply only to the intended component without affecting other parts of the application. For example, to apply styles to an **Index** component, create a file named **Index.razor.css** in the same folder as **Index.razor**.

To enable CSS isolation for the Grid, it is recommended to wrap the `SfGrid` inside a standard HTML div element (optionally with a custom class). This setup helps properly scope the styles when using the **::deep** combinator, which is required to target nested child elements rendered by the Grid within isolated styles.
To enable CSS isolation for the DataGrid, it is recommended to wrap the `SfGrid` inside a standard HTML div element (optionally with a custom class). This setup helps properly scope the styles when using the **::deep** combinator, which is required to target nested child elements rendered by the Grid within isolated styles.

Below is an example of implementing a simple Grid inside the **Index.razor** file:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Customize the empty record template in Blazor DataGrid

The empty record template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables rendering custom content such as images, text, or other components when the Grid has no records to display. This replaces the default “No records to display” message.
The empty record template in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid enables rendering custom content such as images, text, or other components when the DataGrid has no records to display. This replaces the default “No records to display” message.
Define the template using the [EmptyRecordTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_EmptyRecordTemplate) within `<GridTemplates>`. In Blazor, this is a Razor fragment (RenderFragment), allowing any valid Razor markup or components. The empty record template is shown whenever the data source results in zero rows, including initial load, after filtering or searching yields no matches, or after deletions remove all rows.

{% tabs %}
Expand Down
4 changes: 2 additions & 2 deletions blazor/datagrid/how-to/define-events-programmatically.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Define Grid events programmatically in Blazor DataGrid

In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, events are typically defined using the [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#) child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This approach is useful when events need to be assigned dynamically during the application lifecycle.
In the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid, events are typically defined using the [GridEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#) child Razor component. As an alternative, DataGrid events can also be configured programmatically by accessing the DataGrid instance through a component reference. This approach is useful when events need to be assigned dynamically during the application lifecycle.

> Note: Assigning **Grid.GridEvents** programmatically replaces any events declared via the `<GridEvents>` markup for that Grid instance.
> Note: Assigning **Grid.GridEvents** programmatically replaces any events declared via the `<GridEvents>` markup for that DataGrid instance.

To define events programmatically:

Expand Down
8 changes: 4 additions & 4 deletions blazor/datagrid/how-to/enable-or-disable-grid.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ documentation: ug

# Enable or disable Blazor DataGrid and its actions

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be dynamically enabled or disabled by toggling a button. This is useful to restrict user interaction with the Grid during certain application states or processes. The approach below disables interaction at the UI level by applying a CSS class to a wrapper and setting an attribute for styling or accessibility.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid can be dynamically enabled or disabled by toggling a button. This is useful to restrict user interaction with the DataGrid during certain application states or processes. The approach below disables interaction at the UI level by applying a CSS class to a wrapper and setting an attribute for styling or accessibility.

To implement this:

* Define a CSS class on the wrapper (`.grid-wrapper.disabled`) to visually and functionally disable the Grid.
* Define a CSS class on the wrapper (`.grid-wrapper.disabled`) to visually and functionally disable the DataGrid.

```css
.grid-wrapper.disabled {
Expand All @@ -23,8 +23,8 @@ To implement this:
cursor: not-allowed;
}
```
* Bind a boolean flag (`isGridDisabled`) to update the wrapper class and an attribute (for example, `aria-disabled`) on the Grid or wrapper.
* Use a button to toggle the flag and control the Grid state.
* Bind a boolean flag (`isGridDisabled`) to update the wrapper class and an attribute (for example, `aria-disabled`) on the DataGrid or wrapper.
* Use a button to toggle the flag and control the DataGrid state.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid displays it
This customization involves the following steps:

* Create a custom overlay spinner container and position it over the DataGrid.
* Hide the built‑in Grid spinner by applying CSS.
* Hide the built‑in DataGrid spinner by applying CSS.
* Using the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event to detect when the Grid has finished loading and hide the custom spinner.

The `DataBound` event is triggered after the DataGrid has fully bound its DataSource and completed UI rendering, making it the appropriate event for removing the custom loading indicator.
Expand Down Expand Up @@ -50,7 +50,7 @@ public Task DataBoundHandler()
}

```
### Wrap the Grid and apply the logic
### Wrap the DataGrid and apply the logic

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Blazor DataGrid inside the tab with specific height

By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid occupies the full size of its parent element when the Grid [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) properties are set to 100%. When placing the same Grid inside the [SfTab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component, however, it may consider the entire page height and render without a horizontal scrollbar.
By default, the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid occupies the full size of its parent element when the DataGrid [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Width) properties are set to 100%. When placing the same DataGrid inside the [SfTab](https://blazor.syncfusion.com/documentation/tabs/getting-started-webapp) component, however, it may consider the entire page height and render without a horizontal scrollbar.

To ensure the Grid scrolls within the Tab content area (keeping the tab header fixed), override the Tab content height with CSS so the Grid receives a well-defined parent height.
To ensure the DataGrid scrolls within the `SfTab` content area (keeping the tab header fixed), override the `SfTab` content height with CSS so the DataGrid receives a well-defined parent height.

> Notes:
- The parent container of the Tab must have an explicit height (for example, a fixed pixel height or a flex container with a resolved height).
Expand Down
6 changes: 3 additions & 3 deletions blazor/datagrid/how-to/resize-grid-in-various-dimension.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ documentation: ug

# Resize the Blazor DataGrid in various dimensions

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid fills its parent container. Therefore, changing the parent’s dimensions adjusts the Grid size automatically. This example shows how to resize the Grid externally using inputs and a button to modify the parent container’s width and height.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports dynamic resizing to enhance data presentation across different layouts. The DataGrid can be resized by adjusting the dimensions of its parent container. This example shows how to resize the Grid externally using inputs and a button to modify the parent container’s width and height. This will effectively resize the DataGrid along with its parent container.

> - When using `Height="100%"` for the Grid, ensure the parent container has an explicit height (pixels or a resolved flex height).
> - Setting `Width="100%"` on the Grid ensures it follows the parent width exactly.
> - When using `Height="100%"` for the DataGrid, ensure the parent container has an explicit height (pixels or a resolved flex height).
> - Setting `Width="100%"` on the DataGrid ensures it follows the parent width exactly.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ documentation: ug

# Sending Context as additional Parameters in Blazor DataGrid Events

The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports passing the current row context to event handlers. This approach is useful for updating Grid fields based on interactions inside the edit dialog, enabling immediate, in-place updates to the bound data.
The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid supports passing the current row context to event handlers. This approach is useful for updating DataGrid fields based on interactions inside the edit dialog, enabling immediate, in-place updates to the bound data.

To implement this, follow these steps:

1. Place the [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the Grid's `GridEditSettings.Template` to customize the edit form.
1. Place the [ComboBox](https://blazor.syncfusion.com/documentation/combobox/getting-started-with-web-app) inside the DataGrid's [GridEditSettings.Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEditSettings.html#Syncfusion_Blazor_Grids_GridEditSettings_Template) to customize the edit form.

2. Bind the ComboBox’s `ValueChange` event to a handler method.

3. The handler receives:
* args: Event arguments that include the new ComboBox value and the selected item.
* context: The template context cast to the row type (Order) and stored in a local variable (order).

4. Inside the handler, update properties of the current row (for example, ShipCity and ShipCountry) based on the selected ComboBox value. Because the Grid is bound to the same data object instance, changes are reflected immediately in the Grid UI.
4. Inside the handler, update properties of the current row (for example, ShipCity and ShipCountry) based on the selected ComboBox value. Because the DataGrid is bound to the same data object instance, changes are reflected immediately in the DataGrid UI.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
Expand Down
Loading