DevExpress DxDataGrid에서 셀 편집 제어 및 포커스 설정

 

DevExpress DxDataGrid에서 셀 편집 제어 및 포커스 설정

datagrid

 

이번 글에서는 DxDataGrid에서 행이 추가된 이후 특정 셀의 편집을 막고, 커서를 원하는 컬럼으로 이동시키는 방법에 대해 살펴봅니다.

🎯 특정 셀 편집 막기

행이 추가된 후 특정 셀을 편집 불가능하게 만들기 위해선 행에 플래그를 추가하거나 조건부 설정이 필요합니다.

onRowInserting: function(e) {
  // 행 데이터 설정
  e.data.isNewRow = true;
}

이후 그리드 설정에서 셀 편집을 막는 방법:

cellPrepared: function(e) {
  if (e.rowType === "data" && e.data.isNewRow && e.column.dataField === "ComboColumn") {
    e.cellElement.css("pointer-events", "none");
    e.cellElement.css("background-color", "#f0f0f0");
  }
}

🧭 커서를 두 번째 컬럼으로 이동시키기

새 행이 삽입된 후 두 번째 컬럼으로 커서를 이동시키려면 editCell 메서드를 사용합니다.

onRowInserting: function(e) {
  setTimeout(function () {
    const grid = $("#gridContainer").dxDataGrid("instance");
    const rowIndex = grid.getVisibleRows().length - 1;
    grid.editCell(rowIndex, "SecondColumn"); // 컬럼 이름은 실제 dataField로!
  }, 0);
}

📌 요약

• 편집 제한: 셀의 pointer-events를 제거하여 마우스 입력 차단
• 포커스 이동: 새 행 추가 후 editCell로 특정 셀에 커서 설정

DxDataGrid의 커스터마이징은 정말 유연해서 다양한 시나리오에 대응할 수 있습니다. 위 예제를 바탕으로 더 발전시킨 기능도 얼마든지 구현할 수 있어요. 필요하시다면 팝업 편집 모드나 서버 연동 방식에 대한 내용도 추가로 알려드릴게요!