Skip to main content
All docs
V24.2

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

DxGrid.EmptyDataAreaTemplate Property

Specifies the template used to display an empty data area.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

#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 following code snippet, the empty data area displays different text strings based on the Grid state:

Customize Empty Data Area Content

razor
<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";
    }
}
See Also