Web Components 마스터-세부 사항 그리드

IgcGridComponent 구성 요소는 콘텐츠를 확장/축소하여 특정 행에 대한 추가 세부 정보를 표시하는 세부 템플릿 지정을 지원합니다. 지정되면 각 레코드는 마스터 역할을 하며, 확장 시 현재 레코드에 대한 상황별 데이터가 포함된 사용자 정의 가능한 세부 정보 템플릿을 표시합니다.

이 모드는 마스터-디테일 스타일 데이터를 계층 구조로 표시해야 할 때 유용합니다.

Web Components Grid Master-Detail Example

구성

마스터-디테일 모드로 표시되도록 IgcGridComponent 구성하려면 그리드에 대한 템플릿을 지정해야 합니다.

constructor() {
  var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
  this._bind = () => {
    grid.data = this.customersData;
    grid.detailTemplate = this.masterDetailTemplate;
  }
  this._bind();
}

템플릿의 컨텍스트는 마스터 레코드 데이터이므로 마스터 레코드의 값을 세부 템플릿에 표시할 수 있습니다. 예를 들어:

    public masterDetailTemplate = (ctx: IgcGridMasterDetailContext) => {
        var data = ctx.implicit;
        return html` <div class="contact-container">
        <span><strong>Name:</strong> ${data.ContactName}</span> <br/>
        <span><strong>Title:</strong> ${data.ContactTitle}</span> <br/>
        <span><strong>Company:</strong> ${data.CompanyName}</span> <br/>
    </div>`;
    }

API

확장 상태를 제어하기 위한 추가 API 메소드도 공개됩니다.

세부 정보 행에 초점이 맞춰진 경우:
- 🡑- 이전 행의 셀에 초점을 맞춰 한 행 위로 이동합니다.
- 🡓- 한 행 아래로 이동하여 다음 행의 셀에 초점을 맞춥니다.
- 탭- 초점을 맞출 수 있는 요소가 있는 경우 템플릿 내에서 초점을 맞출 수 있는 다음 요소로 초점을 이동할 수 있고, 그렇지 않으면 다음 그리드 행으로 이동할 수 있습니다.
- Shift + Tab- 포커스를 이전 행으로 이동합니다.
확장기가 있는 데이터 행에 포커스가 있는 경우:
- Alt + 🡒 or Alt + 🡓 - expands the row.
- Alt + 🡐 or Alt + 🡑 - collapses the row.

Known Issues and Limitations

알려진 제한 사항	설명
다음 초점 요소가 표시되는 뷰 포트 외부에 있는 경우 사용자 정의 세부 사항 템플릿 내부의 탭 탐색이 마스터 그리드 스크롤 위치를 업데이트하지 못할 수 있습니다.	사용자 정의 세부 템플릿 내부의 탭 탐색은 브라우저에 달려 있습니다.
세부정보 보기 내에서 그리드를 템플릿으로 만들 때`<igc-column>` 정의에 따라 상위 그리드도 해당 열을 렌더링합니다.	중첩된 그리드에 대해 autoGenerate=true를 사용하면 이 문제를 피할 수 있습니다. 해당 열의 일부 측면을 수정해야 하는 경우`ColumnInit` 이벤트를 사용할 수 있습니다.
세부정보 템플릿은 Excel로 내보내지지 않습니다.	세부 정보 템플릿에는 모든 유형의 콘텐츠가 포함될 수 있으므로 기본적으로 Excel로 내보낼 수 없습니다.
검색 기능은 세부 정보 템플릿의 요소를 강조 표시하지 않습니다.

Web Components 마스터-세부 사항 그리드

Web Components Grid Master-Detail Example

구성

API

키보드 탐색

Known Issues and Limitations

API References