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 NoDataOverlayContent property.

Controller

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

View

@(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")
)