Angular 마스터-디테일 그리드

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

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

    Angular Grid Master-Detail Example

    구성

    마스터-디테일 모드로 표시되도록 igxGrid 구성하려면 igxGridDetail 지시문으로 표시된 그리드 내부의 템플릿을 지정해야 합니다.

     <igx-grid ... >
         <ng-template igxGridDetail let-dataItem>
              <!-- Custom detail template content here -->
        </ng-template>
    </igx-grid>

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

        <igx-grid ... >
         <ng-template igxGridDetail let-dataItem>
            <div *ngIf="dataItem.Category">
                <header>{{dataItem.Category.CategoryName}}</header>
                <span>{{dataItem.Category.Description}}</span>
            </div>
        </ng-template>
    </igx-grid>

    API

    확장 상태는 다음을 통해 제어할 수 있습니다. expansionStates의 입력 igxGrid. 상태는 키-값 쌍[행 식별자, 확장 상태]에 저장됩니다. 이 속성은 현재 확장 상태를 가져오거나 설정하고 양방향 바인딩을 지원합니다.

      <igx-grid [(expansionStates)]='expansionState' >
    ...
  </igx-grid>

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

    키보드 탐색

    • 세부 정보 행에 초점이 맞춰진 경우:

      • Arrow Up- 한 행 위로 이동하여 이전 행의 셀에 초점을 맞춥니다.
      • Arrow Down- 한 행 아래로 이동하여 다음 행의 셀에 초점을 맞춥니다.
      • Tab- 초점을 맞출 수 있는 요소가 있는 경우 템플릿 내에서 초점을 맞출 수 있는 다음 요소로 초점을 이동할 수 있고, 그렇지 않으면 다음 그리드 행으로 이동할 수 있습니다.
      • Shift + Tab- 포커스를 이전 행으로 이동합니다.

    • 확장기가 있는 데이터 행에 포커스가 있는 경우:

      • Alt + Arrow Right/ Down- 행을 확장합니다.
      • Alt + Arrow Left/Down- 행을 축소합니다.

    Known Issues and Limitations

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

    API References