행 데이터 수정
그리드의 gridView.editOptions.editable이 true이면 사용자는 행 편집을 할 수 있습니다. 편집 중 Esc키로 셀 편집을 취소할 수 있고, 셀 편집 중이 아닌 상태에서 Esc키를 누르면 행 편집이 취소됩니다.
또, 편집된 값들이 DataProvider에 전달된 시점(dataProvider.onRowUpdating())과 DataProvider에 저장 완료된 시점(dataProvider.onRowUpdated())에 각각 callback을 지정할 수 있습니다.
또한 개발자가 GridView.beginUpdateRow() 메소드를 통해 사용자가 편집을 시작할 수 있습니다.
그리드에서 편집을 가능하게 하려면 setEditOptions()을 사용하여 editable, updatable 속성을 true로 지정하면 됩니다. 해당 속성의 기본값은 true 입니다.
gridView.editOptions.editable = true;
gridView.editOptions.updatable = true;편집시 발생하는 이벤트들은 이벤트 발생 순서를 확인하세요.
편집 시작
beginUpdateRow()를 통한 편집
function btnBeginUpdateRow() {
var curr = gridView.getCurrent();
gridView.beginUpdateRow(curr.itemIndex);
gridView.showEditor();
gridView.setFocus();
}행 데이터 수정, 여러 행 데이터 수정
셀 데이터 수정이 필요한 경우 setValue()등을 통해 하나의 컬럼 셀 데이터를 수정할 수도 있지만 updateRow(), updateRows(), updateRowsByDataRow를 사용하여 일괄로 행 데이터를 수정할 수 있습니다.
function btnUpdateRow() {
var curr = gridView.getCurrent();
dataProvider.updateRow(curr.dataRow, {KorName: "수정이름", Gender: "수정", Age: 0, Phone: "수정전화번호", ProductId: "수정제품번호", KorCountry: "수정투자국가"});
}
function btnUpdateRows() {
var curr = gridView.getCurrent();
var datas = [
{KorName: "수정이름0", Gender: "수정0", Age: 0, Phone: "수정전화번호0", ProductId: "수정제품번호0", KorCountry: "수정투자국가0"},
{KorName: "수정이름1", Gender: "수정1", Age: 0, Phone: "수정전화번호1", ProductId: "수정제품번호1", KorCountry: "수정투자국가1"},
{KorName: "수정이름2", Gender: "수정2", Age: 0, Phone: "수정전화번호2", ProductId: "수정제품번호2", KorCountry: "수정투자국가2"},
{KorName: "수정이름3", Gender: "수정3", Age: 0, Phone: "수정전화번호3", ProductId: "수정제품번호3", KorCountry: "수정투자국가3"},
]
dataProvider.updateRows(curr.dataRow, datas, 0);
}function btnUpdateRowsByDataRow() {
var curr = gridView.getCurrent();
var datas = {
6: {KorName: "수정이름6", Gender: "수정6", Age: 6, Phone: "수정전화번호6", ProductId: "수정제품번호6", KorCountry: "수정투자국가6"},
8: {KorName: "수정이름8", Gender: "수정8", Age: 8, Phone: "수정전화번호8", ProductId: "수정제품번호8", KorCountry: "수정투자국가8"}
}
dataProvider.updateRowsByDataRow(datas);
}