DevExtreme dxDataGrid 활용 정리
이번 글에서는 DevExtreme dxDataGrid를 사용하면서 자주 쓰이는 기능과 팁들을 정리했습니다. JavaScript와 함께 동적으로 데이터를 제어하거나 UI를 커스터마이징할 때 유용합니다.
1. 특정 셀 숨기기
cellTemplate을 활용하여 조건에 따라 셀을 숨길 수 있습니다.
columns: [
{
dataField: "Phone",
cellTemplate: function(container, options) {
if (options.data.IsHidden) {
container.text(""); // 숨김 처리
} else {
container.text(options.value);
}
}
}
]
2. 특정 컬럼 숨기기/보이기
var grid = $("#gridContainer").dxDataGrid("instance");
// 컬럼 숨기기
grid.columnOption("Phone", "visible", false);
// 다시 보이기
grid.columnOption("Phone", "visible", true);
3. 조건에 맞는 항목 값 추출
JavaScript에서 filter와 map을 조합하면 조건에 맞는 데이터를 쉽게 뽑을 수 있습니다.
const namesWithY = dataSource
.filter(item => item.status === "Y")
.map(item => item.name);
4. 조건에 맞는 항목의 Key 추출
const yKeys = Object.keys(row).filter(key => row[key] === "Y");
5. 전체 그리드에서 Y 값이 있는 컬럼 찾기
const yKeysAll = dataSource
.map(row => Object.keys(row).filter(key => row[key] === "Y"))
.flat();
const uniqueYKeys = [...new Set(yKeysAll)];
6. 조건에 맞는 컬럼만 보이게 설정
const grid = $("#gridContainer").dxDataGrid("instance");
// 모든 컬럼 숨기기
grid.getVisibleColumns().forEach(col => {
grid.columnOption(col.dataField, "visible", false);
});
// Y가 나온 컬럼만 보이게
uniqueYKeys.forEach(key => {
grid.columnOption(key, "visible", true);
});
7. 문자열 첫 글자만 추출
const str = "Hello";
console.log(str.charAt(0)); // "H"
console.log(str[0]); // "H"
console.log(str.slice(0,1)); // "H"
8. dxDataGrid에서 배경색 변경
columnOption으로는 스타일 변경이 불가능합니다. 대신 onCellPrepared 또는 onRowPrepared 이벤트를 사용해야 합니다.
onCellPrepared: function(e) {
if (e.rowType === "data" && e.column.dataField === "status") {
if (e.value === "Y") {
e.cellElement.css("background-color", "#d1ffd1");
}
}
}
onRowPrepared: function(e) {
if (e.rowType === "data" && e.data.status === "Y") {
e.rowElement.css("background-color", "#e0f7fa");
}
}
마무리
dxDataGrid는 데이터 표시와 관리에 강력한 기능을 제공하지만, 세부적인 스타일링이나 조건부 제어는 이벤트 기반 접근이 필요합니다. 위의 예시들을 활용하면 다양한 상황에서 유연하게 대응할 수 있습니다.
