오버레이(Overlays)

Grid 컨트롤에서 오버레이 콘텐츠란, 그리드에 데이터가 로드되지 않았을 때 관련 정보를 사용자에게 보여주기 위해 그리드 위에 표시되는 추가 요소나 콘텐츠를 말합니다.

FlexGrid 클래스의 noDataOverlayContent 속성을 사용하면, 그리드에 데이터가 없을 때 메시지나 오버레이를 표시하여 사용자 경험을 향상시킬 수 있습니다.

다음 코드 예제는 Grid 컨트롤에 데이터가 없을 때 메시지를 표시하는 방법을 보여줍니다.

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를 사용해야 합니다.