You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
description: Checkout and learn here all about Create custom Grid component in Syncfusion Blazor DataGrid component and more.
3
+
title: Create a custom Grid component in Blazor DataGrid | Syncfusion
4
+
description: Learn how to build a reusable custom Grid component that wraps SfGrid in Blazor to share default paging, sorting, and layout settings across the application.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
10
# Create custom Blazor DataGrid
11
11
12
-
You can create a custom DataGrid by rendering the `SfGrid`as a new razor component. It helps to create your own custom component when you want to create multiple Grids with same configuration or with default configuration throughout your application.
12
+
Create a reusable custom Grid component by wrapping the `SfGrid`in a Razor component. This approach helps apply consistent defaults (for example, paging and sorting) and common settings across multiple Grids without repeating configuration.
13
13
14
-
This is demonstrated in the following example by creating a custom Grid called CustomGrid, where `SfGrid`is rendered with some basic default properties such as `GridPageSettings` etc., which will be reflected in all the Grids rendered using the CustomGrid:
14
+
The following example creates a `CustomGrid` wrapper that renders `SfGrid` with default properties such as `GridPageSettings`. Any unmatched attributes passed to `CustomGrid` are forwarded to the inner `SfGrid`, and content placed inside `CustomGrid` is projected as columns via `ChildContent`.
title: CSS isolation for Blazor DataGrid Component | Syncfusion
4
-
description: Checkout and learn here all about applying styles by using CSS isolation in Syncfusion Blazor DataGrid component and more.
4
+
description: Check out how to apply styles using CSS isolation in the Syncfusion Blazor DataGrid component with ::deep selectors and scoped wrapper patterns.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
10
# CSS isolation for Blazor DataGrid
11
11
12
-
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`.
12
+
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**.
13
13
14
-
To enable CSS isolation for the Grid, it is recommended to wrap the **SfGrid** inside a standard HTML <div> element. This setup helps properly scope the styles when using the **::deep** combinator, which is required to target nested child elements within the isolated styles.
14
+
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.
15
15
16
-
Below is an example of implementing a simple Grid inside the `Index.razor` file:
17
-
18
-
```csharp
16
+
Below is an example of implementing a simple Grid inside the **Index.razor** file:
> Please find the sample in this [GitHub location](https://github.com/SyncfusionExamples/How-to-Getting-Started-Blazor-DataGrid-Samples/tree/master/CSS_Isolation).
N> More information on CSS Isolation is available[here](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/css-isolation?view=aspnetcore-8.0#child-component-support).
Copy file name to clipboardExpand all lines: blazor/datagrid/how-to/custom-helper-function-inside-loop-with-template.md
+7-8Lines changed: 7 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
-
title: Use custom helper inside the loop with templates in Blazor DataGrid | Syncfusion
4
-
description: Learn here all about place cancel icon in search bar in Syncfusion Blazor DataGrid.
3
+
title: Use Custom Helper with Templates in Blazor DataGrid | Syncfusion
4
+
description: Learn how to use a custom helper method inside a column template loop to render a star rating in the Syncfusion Blazor DataGrid.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
10
# Use custom helper inside the loop with templates
11
11
12
-
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid allows you to use custom helpers inside the loop with [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?#Syncfusion_Blazor_Grids_GridColumn_Template) property of a column. This feature enables you to create complex templates that can incorporate additional helper functions.
12
+
The Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid supports using custom helpers inside the loop within a column [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Template). This enables building flexible templates that incorporate additional logic and helper functions.
13
13
14
-
The **customer rating** column includes a custom template defined using `Template`. Inside this template, iterates through the item array and generates `<span>` tag, displayed as stars using the CSS below:
14
+
The following example renders a customer rating column with a custom template. Inside the template, the code iterates over a fixed range and generates star elements. The **IsRatingGreater** helper method determines which stars to highlight.
15
15
16
16
```css
17
17
.e-grid.rating.star:before {
@@ -24,20 +24,19 @@ The **customer rating** column includes a custom template defined using `Templat
24
24
}
25
25
```
26
26
27
-
The class is dynamically assigned based on the result of the `isRatingGreater` method, highlighting the star using the CSS below:
27
+
The highlighted state is applied based on the result of the `IsRatingGreater` method:
28
28
29
29
```css
30
30
.e-grid.rating.star.checked {
31
31
color: #ffa600;
32
32
}
33
33
```
34
34
35
-
This is demonstrated in the following example.
36
-
37
35
{% tabs %}
38
36
{% highlight razor tabtitle="Index.razor" %}
39
37
40
38
@using Syncfusion.Blazor.Grids
39
+
@using System.Linq
41
40
42
41
<SfGridDataSource="@Orders"Height="300px">
43
42
<GridColumns>
@@ -48,7 +47,7 @@ This is demonstrated in the following example.
48
47
@{
49
48
var rating = (context as Order)?.Rating ?? 0;
50
49
}
51
-
<div class="rate">
50
+
<div class="rate" aria-label="@($"{rating} out of 5 stars")">
Copy file name to clipboardExpand all lines: blazor/datagrid/how-to/customize-empty-grid-display-message.md
+3-6Lines changed: 3 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,16 @@
1
1
---
2
2
layout: post
3
3
title: Customize Empty Record Template in the Blazor DataGrid | Syncfusion
4
-
description: Learn here all about customize the empty record template in Syncfusion Blazor DataGrid.
4
+
description: Learn how to customize the EmptyRecordTemplate in the Syncfusion Blazor DataGrid to show a custom message or content when no records are available.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
10
# Customize the empty record template in Blazor DataGrid
11
11
12
-
The empty record template feature in the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid allows you to use custom content such as images, text, or other components, when the Grid doesn't contain any records to display. This feature replaces the default message of 'No records to display' typically shown in the Grid.
13
-
14
-
To activate this feature, set the [EmptyRecordTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_EmptyRecordTemplate) feature of the Grid. The `EmptyRecordTemplate` feature expects the HTML element or a function that returns the HTML element.
15
-
16
-
The following example demonstrates how an image and text can be rendered as a template to indicate that the Grid has no data to display:
12
+
The empty record template in the Syncfusion<supstyle="font-size:70%">®</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.
13
+
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.
Copy file name to clipboardExpand all lines: blazor/datagrid/how-to/define-events-programmatically.md
+25-20Lines changed: 25 additions & 20 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,48 +1,53 @@
1
1
---
2
2
layout: post
3
3
title: Define events in Blazor DataGrid Component | Syncfusion
4
-
description: Checkout and learn here all about defining events programmatically in the Syncfusion Blazor DataGrid component and more.
4
+
description: Learn how to define GridEvents programmatically in the Syncfusion Blazor DataGrid using a component reference and EventCallbackFactory.
5
5
platform: Blazor
6
6
control: DataGrid
7
7
documentation: ug
8
8
---
9
9
10
-
# Define the GridEvents programmatically in Blazor DataGrid
10
+
# Define Grid events programmatically in Blazor DataGrid
11
11
12
-
In the Syncfusion<supstyle="font-size:70%">®</sup> Blazor DataGrid, events are typically defined using the GridEvents child Razor component. As an alternative, Grid events can also be configured programmatically by accessing the Grid instance through a component reference. This method is useful when events need to be assigned dynamically during the application lifecycle.
12
+
In the Syncfusion<supstyle="font-size:70%">®</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.
13
13
14
-
To define events programmatically:
14
+
> Note: Assigning **Grid.GridEvents**programmatically replaces any events declared via the `<GridEvents>` markup for that Grid instance.
15
15
16
-
* Set a reference to the Grid using the `@ref` directive.
17
-
* After the Grid is rendered, assign the `GridEvents` property within the `OnAfterRenderAsync` lifecycle method.
18
-
* Use the `EventCallbackFactory` to create event handlers, ensuring they are correctly bound to the component context.
16
+
To define events programmatically:
19
17
20
-
The following example demonstrates how to configure the [DataBound](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_DataBound) event programmatically to perform custom logic after the Grid's data has been populated:
18
+
- Set a reference to the Grid using the **@ref** directive.
19
+
- After the Grid is rendered, assign the **GridEvents** property within the **OnAfterRenderAsync** lifecycle method (guarded by **firstRender**).
20
+
- Use the **EventCallbackFactory** to create event handlers bound to the component context.
0 commit comments