FlexGrid의 그룹화(Grouping)

그리드는 CollectionView 소스를 통해 그룹화(grouping)를 지원합니다.

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

국가 및 제품별로 데이터를 그룹화하는 예시입니다:

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