React Master-Detail Grid

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

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

    React Grid Master-Detail Example

    Configuration

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

    <IgrGrid detailTemplate={masterDetailTemplate} autoGenerate="false" data={nwindData}>

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

    const masterDetailTemplate = ({dataContext}:{dataContext: IgrGridMasterDetailContext}) => {
    const data = dataContext.implicit;
    return (
        <div className="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로 내보낼 수 없습니다.
    검색 기능은 세부 정보 템플릿의 요소를 강조 표시하지 않습니다.

    API References