# Overlays

## Content

# **No Data Overlay**

The `noDataOverlayContent` property enables FlexGrid to display custom overlay content when the grid contains no data rows.
This feature can be used to:

* Display informational messages
* Explain why the grid is empty
* Provide guidance or next steps to users

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/image-20260423-062546-20260515.89a69a.png?verticalAlign=bottom&caption=Assigning%20a%20value%20to%20the%20noDataOverlayContent%20property%20displays%20a%20custom%20message%20when%20no%20data%20is%20available%20in%20the%20grid.)
This example demonstrates how to use the `NoDataOverlayContent` property.

## Controller

```auto
public ActionResult Filter()
{
    return View(Sales.GetData(15));
}
```

## View

```auto
@(Html.C1().FlexGrid<Sale>()
    .Id("filteringGrid")
    .AutoGenerateColumns(false)
    .Bind(Model)
    .PageSize(25)
    .IsReadOnly(true)
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID"));
        columns.Add(column => column.Binding("Start"));
        columns.Add(column => column.Binding("End").Format("t"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product"));
        columns.Add(column => column.Binding("Color"));
        columns.Add(column => column.Binding("Amount").Format("c"));
        columns.Add(column => column.Binding("Amount2").Format("c"));
        columns.Add(column => column.Binding("Discount").Format("p0"));
        columns.Add(column => column.Binding("Active"));
    })
    .Filterable(f => f.DefaultFilterType(FilterType.Both))
    .NoDataOverlayContent("No data to display.")
    .CssClass("grid")
)
```