오늘의 이야기

 

📌 dxDataGrid 편집 & Selection 관련

dxDataGrid

 

1. JSON 문자열 처리

서버에서 JSON 문자열을 받으면 JSON.parse()로 객체로 변환해야 값 추출이 가능합니다.

var jsonString = '[{"id":1,"name":"Electronics"},{"id":2,"name":"Books"}]';
var data = JSON.parse(jsonString);
var values = data.map(item => item.name);
console.log(values); // ["Electronics", "Books"]
  

2. editCellTemplate에서 SelectBox 구성

셀 편집 시 서버에서 가져온 데이터를 SelectBox로 표시하려면:

{
  dataField: "categoryId",
  caption: "Category",
  editCellTemplate: function(cellElement, cellInfo) {
    $.getJSON("/api/categories", function(result) {
      $("<div>").dxSelectBox({
        dataSource: result,
        valueExpr: "id",
        displayExpr: "name",
        value: cellInfo.value,
        onValueChanged: function(e) {
          cellInfo.setValue(e.value); // 값 반영
        }
      }).appendTo(cellElement);
    });
  }
}
  

3. 값이 반영되지 않을 때

• cellInfo.setValue() 호출 누락


• valueExpr/displayExpr 필드명 불일치


• 비동기 데이터 로딩 시 SelectBox 초기화 문제

4. Batch 모드 저장

여러 셀을 수정 후 한 번에 저장하려면 editing.mode = "batch"와 saveEditData()를 사용합니다.

var grid = $("#gridContainer").dxDataGrid("instance");
grid.saveEditData();   // 저장 실행
grid.cancelEditData(); // 취소 실행
  

5. Selection과 연동

SelectBox 선택 시 기본 selection 체크박스도 자동으로 체크되게 하려면:

onValueChanged: function(e) {
  cellInfo.setValue(e.value);
  var grid = $("#gridContainer").dxDataGrid("instance");
  grid.selectRows([cellInfo.key], true); // 기본 체크박스 자동 체크
}
  

6. 기본 Selection Box 활용

그리드 자체에서 제공하는 체크박스를 쓰려면:

$("#gridContainer").dxDataGrid({
  dataSource: yourData,
  selection: {
    mode: "multiple",
    showCheckBoxesMode: "always"
  }
});
  

✅ 결론

- JSON 문자열은 반드시 JSON.parse()로 객체화
- editCellTemplate에서 SelectBox 사용 시 cellInfo.setValue() 필수
- Batch 모드에서는 saveEditData()로 저장
- SelectBox 선택 시 selectRows() 호출로 기본 selection 체크박스 자동 반영
- 기본 selection box는 selection.showCheckBoxesMode = "always"로 활성화