TransposedMultiRow 레이아웃 정의

TransposedMultiRow 컨트롤은 전치 레이아웃을 사용하여 데이터를 표시하기 위해 FlexGrid 컨트롤을 확장합니다. 여기서 열은 데이터 항목을 나타내고 행은 TransposedGrid 컨트롤과 같이 아이템 속성을 나타냅니다.

그러나 TransposedGrid 컨트롤과 달리 TransposedMultiRow 컨트롤은 여러 열을 사용하여 각 데이터 아이템을 나타냅니다. 최소한의 수직 스크롤로 많은 수의 행을 표시할 수 있는 형식과 같은 인터페이스를 만들 수 있습니다.

MultiRow 컨트롤과 마찬가지로 TransposedMultiRow 컨트롤도 layoutDefinition 속성을 사용하여 레이아웃을 사용자 정의할 수 있습니다. 이 속성은 MultiRow 컨트롤에서와 동일한 의미와 용도를 갖지만, 전치로 인해 결과 보기는 다르게 나타납니다.

layoutDefinition 속성은 그리드에 있는 셀의 레이아웃을 지정합니다. 셀 그룹 객체의 배열이 포함되어 있습니다. 각 셀 그룹은 그룹이 병합되어야 하는 열 수와, 각 그룹을 구성하는 셀을 지정합니다.

아래 이미지는 셀 그룹이 어떻게 해석되고 그리드 레이아웃으로 변환되는지 보여줍니다:

그룹은 3개의 그리드 열이 병합되어 있습니다. 다르게 병합된 6개 셀을 포함하고 있습니다. 레이아웃을 생성할 때 그리드는 각 행에 최대한 많은 셀을 맞추고, 그룹 병합이 되면 다음 행으로 래핑합니다. 각 행의 마지막 셀은 자동으로 확장되어 그룹의 colspan을 채웁니다. 이 프로세스는 문단 생성을 위한 텍스트 래핑과 유사합니다.

layoutDefinition 객체의 모든 그룹에 동일한 프로세스가 적용됩니다.

모든 그룹이 준비되면, 그리드는 모든 그룹의 최대 colspan까지 레코드당 열 수를 계산하고 필요에 따라 너비를 채우기 위해 각 그룹에 열을 추가합니다. 결과적으로 각 레코드의 열 수는 동일합니다. 각 레코드의 행 수가 동일한 MultiRow 컨트롤과 유일한 차이입니다.

Code Example

import { TransposedMultiRow } from '@grapecity/wijmo.grid.transposedmultirow';

var multirow = new TransposedMultiRow('#trnMultirow', {
    itemsSource: appData.orders,
    layoutDefinition: [
        {
            header: 'Order', colspan: 3, cells: [
                { binding: 'id', header: 'ID', rowspan: 2, cssClass: 'id' },
                { binding: 'amount', header: 'Amount', format: 'c', rowspan: 2, cssClass: 'amount' },
                { binding: 'date', header: 'Ordered' },
                { binding: 'shippedDate', header: 'Shipped' }
            ]
        },
        {
            header: 'Customer', colspan: 3, cells: [
                { binding: 'customer.name', header: 'Name' },
                { binding: 'customer.address', header: 'Address', rowspan: 2 },
                { binding: 'customer.city', header: 'City', dataMap: cityMap },
                { binding: 'customer.email', header: 'EMail', rowspan: 2, cssClass: 'email' },
                { binding: 'customer.state', header: 'State', width: 45 },
                { binding: 'customer.phone', header: 'Phone' },
                { binding: 'customer.zip', header: 'Zip' },
            ]
        },
        {
            header: 'Shipper', colspan: 3, cells: [
                { binding: 'shipper.name', header: 'Shipper' },
                { binding: 'shipper.email', header: 'EMail', cssClass: 'email' },
                { binding: 'shipper.express', header: 'Express' }
            ]
        }
    ]    
});

셀은 width 속성을 제외한 모든 일반적인 Column 속성을 지원합니다. 이 속성은 layoutDefinition 객체에서 지정할 수 있지만, 그리드에서는 각 행의 셀이 동일한 너비를 가져야 한다고 가정하기 때문에 이를 무시합니다.