데이터 수정

그리드의 gridView.editOptions.editable이 true이면 사용자는 행 편집을 할 수 있습니다. 편집 중 Esc키로 셀 편집을 취소할 수 있고, 셀 편집 중이 아닌 상태에서 Esc키를 누르면 행 편집이 취소됩니다.
또, 편집된 값들이 DataProvider에 전달된 시점(dataProvider.onRowUpdating())과 DataProvider에 저장 완료된 시점(dataProvider.onRowUpdated())에 각각 callback을 지정할 수 있습니다.

또한 개발자가 GridView.beginUpdateRow() 메소드를 통해 사용자가 편집을 시작할 수 있습니다.

편집 가능 설정

그리드에서 편집을 가능하게 하려면 setEditOptions()을 사용하여 editable, updatable 속성을 true로 지정하면 됩니다. 해당 속성의 기본값은 true 입니다.

gridView.setEditOptions({
  editable: true,
  updatable: true
});

편집

beginUpdateRow()를 통한 편집

var curr = gridView.getCurrent();
gridView.beginUpdateRow(curr.itemIndex);
gridView.showEditor();
gridView.setFocus();

DataProvider에 편집 값이 전달된 시점

그리드에서 편집이 완료되면 편집된 값들은 dataProvider에 전달이 됩니다. 이때 dataProvider.onRowUpdating() 이벤트가 발생하며 false를 리턴하면 편집이 취소 됩니다.

dataProvider.onRowUpdating = function(provider, row) {
  var item = gridView.getEditingItem(); // 현재 편집 중인 행 정보와 값을 가져옵니다.
  if (item) {
    if (item.values["Age"] <= 100) {
      setTimeout(function() {
        alert("Age must be greater than 100 !");
      }, 10);
      return false; // false를 리턴하면 DataProvider에 저장되지 않습니다.
    }
  }
  return true;
};

DataProvider에 편집 값이 저장 완료된 시점

편집이 완료되면 dataProvider.onRowUpdating() 발생 후 dataProvider에 저장이 완료되면 dataProvider.onRowUpdated()가 발생 합니다.

dataProvider.onRowUpdated = function(provider, row) {
  var r = provider.getJsonRow(row);
  alert(JSON.stringify(r));
};