TransposedMultiRow Styling Records, Groups and Cells

대부분의 어플리케이션에서 각 레코드와 그룹의 시작이나 끝나는 위치를 표시합니다. TransposedMultiRow 컨트롤은 각 그룹의 첫 번째 및 마지막 행/열에 있는 셀 요소에 CSS 클래스 이름을 추가하여 이를 가능하게 합니다. 클래스 이름은 wj-record-start, wj-record-end, wj-group-start, wj-group-end 입니다.

아래 예시에서는 CSS 규칙에서 이러한 클래스 이름을 사용하여 레코드 및 그룹 구분 기호 모양을 사용자 정의하는 방법을 보여줍니다. 또한 표준 cssClass 속성으로 그룹 내 특정 셀의 모양을 사용자 정의하는 방법도 보여줍니다.

/* custom styling for a MultiRow */

.multirow-css .wj-cell.wj-record-end:not(.wj-header) {
    border-bottom: 1px solid #000; /* thin black lines between records */
}
.multirow-css .wj-cell.wj-group-end {
    border-right: 2px solid #00b68c; /* thick green lines between groups */
}
.multirow-css .wj-cell.id {
    color: #c0c0c0;
}
.multirow-css .wj-cell.amount { 
    color: #014701;
    font-weight: bold;
}
.multirow-css .wj-cell.email {
    color: #0010c0;
    text-decoration: underline;
}                            

/* custom styling for a TransposedMultiRow */

.wj-transposed-multirow .wj-cell.wj-record-end:not(.wj-header) {
    border-bottom: 1px solid #000; /* thin black lines between records */
}
.wj-transposed-multirow .wj-cell.wj-group-end {
    border-right: 2px solid #00b68c; /* thick green lines between groups */
}
.wj-transposed-multirow .wj-cell.id {
    color: #c0c0c0;
}
.wj-transposed-multirow .wj-cell.amount { 
    color: #014701;
    font-weight: bold;
}
.wj-transposed-multirow .wj-cell.email {
    color: #0010c0;
    text-decoration: underline;
}

cssClass 속성은 layoutDefinition에 추가할 수 있습니다.

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' }
            ]
        }
    ]    
});