DxGrid.EmptyDataAreaTemplate Property

Specifies the template used to display an empty data area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment<GridEmptyDataAreaTemplateContext> EmptyDataAreaTemplate { get; set; }

Property Value

Type	Description
RenderFragment<GridEmptyDataAreaTemplateContext>	The empty data area template.

Remarks

The Grid displays an empty data area in the following cases:

• The Data property is unset or equals null.
• The Grid is bound to an empty data source.
• The Grid sends the first request to a remote data source and waits for a response.
• The Grid sends a request to group data when no grouping is applied and waits for a response from a remote data source.
• None of grid data items matches the current filter criteria or search text.

Define the EmptyDataAreaTemplate to customize content displayed in the empty data area. If you add only inline html elements to the template, the Grid applies default style settings of the empty data area to the template content.

The template context parameter includes the Grid property. This property allows you to access the Grid component and use its extensive API to identify the current component state. In the example below, the empty data area displays different text strings based on the Grid state:

<DxGrid Data="GridData" ShowFilterRow="true" ShowSearchBox="true">
    <Columns>
        <DxGridDataColumn FieldName="FirstName" />
        <DxGridDataColumn FieldName="LastName" />
        <DxGridDataColumn FieldName="Title" />
        <DxGridDataColumn FieldName="HireDate" />
    </Columns>
    <EmptyDataAreaTemplate>
        <b>@GetEmptyDataAreaMessage(context.Grid)</b>
    </EmptyDataAreaTemplate>
</DxGrid>

@code {
    IEnumerable<object> GridData { get; set; }
    // ...
    string GetEmptyDataAreaMessage(IGrid grid) {
        var hasFilter = !object.ReferenceEquals(grid.GetFilterCriteria(), null) || !string.IsNullOrEmpty(grid.SearchText);
        var waitingForData = !grid.WaitForDataLoadAsync().IsCompleted;

        if(grid.Data == null) // Checks whether the Grid contains data
            return "Please configure your grid";
        if(waitingForData) // Checks whether data is loading
            return "Loading data...";
        if((grid.Data as IEnumerable<object>).Count() == 0)
            return "The data source is empty.";
        if(hasFilter) // Checks whether all items are hidden by the filter
            return "No items match your search.";
        return "No data to display";
    }
}

Implements

EmptyDataAreaTemplate