# 오버레이(Overlays)

## Content

Grid 컨트롤에서 오버레이 콘텐츠란, 그리드에 데이터가 로드되지 않았을 때 관련 정보를 사용자에게 보여주기 위해 그리드 위에 표시되는 추가 요소나 콘텐츠를 말합니다.
**FlexGrid** 클래스의 **noDataOverlayContent** 속성을 사용하면, 그리드에 데이터가 없을 때 메시지나 오버레이를 표시하여 사용자 경험을 향상시킬 수 있습니다.

![overlays](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/d89a3071-4d2f-415e-8f24-da90cf1c02d5/overlays.b803a5.png)

<span style="color: rgb(41, 42, 46); font-family: 'Atlassian Sans', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Ubuntu, system-ui, 'Helvetica Neue', sans-serif; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: pre-wrap; background-color: rgb(255, 255, 255); text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">다음 코드 예제는 Grid 컨트롤에 데이터가 없을 때 메시지를 표시하는 방법을 보여줍니다.</span>

```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";
```


또한, 오버레이 콘텐츠를 보다 자유롭게 커스터마이즈할 수 있도록 **overlayManager** 라는 새로운 속성도 제공됩니다. **overlayManager** 속성을 사용하기 위해서는 **overlayManager** 클래스를 상속받아 새로운 클래스를 정의하고, 원하는 기능을 위해 필요한 메서드를 오버라이드해야 합니다.

> type=info
> **제한사항:**
> 특정 템플릿은 지원되지 않습니다. 인터롭(interop) 구현 시에도 `noDataOverlayContent`를 사용해야 합니다.