# Overlays
## Content
In a Grid control, overlay content refers to additional elements or content that are displayed on top of the grid to display contextual information when no data is loaded in the grid.
To display a string message or overlay in the Grid control when it is empty, the **noDataOverlayContent** property of the **FlexGrid** class is used to enhance the user experience.
Following code example shows how to display a message when no data is available in the Grid control:
```auto
var theGrid = new FlexGrid('#theGrid', {
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', width: '2*' },
{ binding: 'sales', header: 'Sales', width: '*', format: 'n2' },
{ binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' }
],
itemsSource: [ ]
});
// display no data overlay
theGrid.noDataOverlayContent = "No data available";
```
Addionally, a new property **overlayManager** is also available for users to do more customization of overlay content. To use the **overlayManager** property, users need to define a new class by inheriting from **overlayManager** class and override the required method(s) to customize its functionality.
> type=info
> **Limitation:**
> Specific templates are not supported. User needs to use the 'noDataOverlayContent' in interop implementations too.