Overlays

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

This example demonstrates how to use the no-data-overlay-content property.

Controller

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

View

<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>