SMART datagrid v1.4 > Examples
labelField는 데이터 룩업의 가장 간편한 구현 방식이다. 컬럼셀들에 표시되는 값을 본래 연결된 데이터필드의 값 대신, labelField 속성으로 지정한 필드의 값을 표시한다.
아래 그리드에서 "국가통화" 컬럼은 "country_currency"라는 필드를 labelField로 지정하고 있다.
이 때, 데이터셋을 처음 로드한 후 편집이 이루어지는 경우라면 적절한 동기화가 필요한데, 데이터셋 수준에서는 GridDataSet.onRowUpdated나 onRowInserted 이벤트에서 label field의 값을 변경하고, 편집 중인 그리드행에서 동기화는 GridBase.onEditCellUpdated 이벤트 내에서 label field에 해당하는 값을 변경해서 처리할 수 있다. AutoFill을 이용하여 데이터를 변경 한 경우 onAutoFilled 이벤트에서 값을 처리할 수 있다.
dsMain.onRowUpdated = function (ds, row) {
ds.setValue(row, 'country_currency', ds.getValue(row, 'country') + '_' + ds.getValue(row, 'currency'));
};
dsMain.onRowInserted = function (ds, row) {
ds.setValue(row, 'country_currency', ds.getValue(row, 'country') + '_' + ds.getValue(row, 'currency'));
};
grdMain.onEditCellUpdated = function (grid, row, fieldIndex, newValue, oldValue) {
var f1 = dsMain.getFieldIndex('country');
var f2 = dsMain.getFieldIndex('currency');
if (fieldIndex == f1 || fieldIndex == f2) {
row.setValue(dsMain.getFieldIndex('country_currency'), row.getValue(f1) + '_' + row.getValue(f2));
}
}
grdMain.onAutoFilled = function (grid, selection, dir, idx1, idx2) {
var r1 = Math.min(idx1.rowIndex);
var r2 = Math.max(idx2.rowIndex);
var f1 = dsMain.getFieldIndex('country');
var f2 = dsMain.getFieldIndex('currency');
for (var r = r1; r <= r2; r++) {
row = grid.getRow(r);
row.setValue(dsMain.getFieldIndex('country_currency'), row.getValue(f1) + '_' + row.getValue(f2));
}
};
labelField가 동작하기 위해서는 DataColumn.lookupDisplay가 true로 지정돼야 한다. 또, 계산필드를 사용하면 보다 쉽게 구현할 수 있다.