DevExtreme dxDataGrid 활용 정리

 

 

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는 데이터 표시와 관리에 강력한 기능을 제공하지만, 세부적인 스타일링이나 조건부 제어는 이벤트 기반 접근이 필요합니다. 위의 예시들을 활용하면 다양한 상황에서 유연하게 대응할 수 있습니다.