그룹화

그리드는 소스 CollectionView 소스를 통한 그룹화를 지원합니다.

GroupDescription 객체를 그리드의 collectionView.groupDescriptions에 추가하여 데이터를 하나 이상의 속성으로 그룹화합니다.

이 예제 에서는 데이터를 국가 및 제품별로 그룹화합니다.

import * as wjCore from '@grapecity/wijmo';
import * as wjGrid from '@grapecity/wijmo.grid';

// basic grouping
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});

중복 데이터를 표시하지 않기 위해 그룹화할 열을 숨길 수도 있습니다.

아래 예제에서는 데이터를 국가 및 제품별로 그룹화하고 이러한 열을 숨겨 더 심플한 모양을 만듭니다.

// hide columns being grouped on
var theGridHideCols = new wjGrid.FlexGrid('#theGridHideCols', {
    autoGenerateColumns: false,
    columns: [
        { binding: 'country', header: 'Country', visible: false },
        { binding: 'product', header: 'Product', visible: false },
        { binding: 'downloads', header: 'Downloads', width: '*' },
        { binding: 'sales', header: 'Sales', width: '*' },
        { binding: 'expenses', header: 'Expenses', width: '*' },
    ],
    itemsSource: new wjCore.CollectionView(data, {
        sortDescriptions: [ 'country', 'product' ],
        groupDescriptions: [ 'country', 'product' ]
    })
});