# 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/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/image-20260423-062546-20260515.b46377.png?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 `no-data-overlay-content` property.

## **Controller**

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

## **View**

```auto
<c1-flex-grid id="filteringGrid" auto-generate-columns="false" is-read-only="true"
              selection-mode="Row" sorting-type="SingleColumn" class="grid"
              no-data-overlay-content="No data to display.">
    <c1-items-source page-size="25" read-action-url="@Url.Action("Filter_Bind")"></c1-items-source>
    <c1-flex-grid-column binding="ID"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Start"></c1-flex-grid-column>
    <c1-flex-grid-column binding="End" format="t"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Country"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Product"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Color"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column>
    <c1-flex-grid-column binding="Active"></c1-flex-grid-column>
</c1-flex-grid>
```