FlexGrid에서 행 추가 및 제거

대부분의 경우 그리드에서 행을 추가하거나 제거하기 위한 코드를 작성할 필요가 없습니다. 기본적으로, 열 헤더 행 하나와 바인딩 항목 행이 하나씩 있습니다(그리드의 itemsSource 속성을 설정할 때 자동으로 추가됩니다.

사용자가 런타임에 행을 추가하거나 제거할 수 있도록 허용하려면, 다음 속성을 사용하십시오:

• allowAddNew: 이 속성을 true로 설정하면 그리드의 하단에 새 행 'template'이 표시됩니다. 사용자는 새 행 템플릿의 셀을 작성하여 itemsSource 배열에 새 행을 추가할 수 있습니다.
• allowRemove: 이 속성을 true로 설정하면 그리드에서 'Delete' 키를 처리하고 선택된 행을 제거합니다. 사용자는 행 헤더를 클릭하여 행을 선택한 다음, 'Delete'를 눌러 itemsSource 배열에서 바인딩된 항목을 제거할 수 있습니다.
• newRowAtTop: 이 속성을 true로 설정하면 그리드가 새 행 템플릿을 하단이 아닌 그리드 상단에 표시합니다.

아래 그리드를 통해 작동 방식을 확인하실 수 있습니다:

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

// generate some random data
var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
data = [];
for (var i = 0; i < countries.length; i++) {
    data.push({
        id: i,
        country: countries[i],
        downloads: Math.round(Math.random() * 20000),
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
    });
}

//enable allowAddNew and allowDelete in the FlexGrid
var theGrid = new wjGrid.FlexGrid('#theGrid', {
    itemsSource: data,
    allowAddNew: true,
    allowDelete: true
});