SMART datagrid v1.4 > Examples
사용자가 직접 새로운 행을 기존 행들 사이에 추가하기 위해서는 그리드 GridBase.editOptions의 insertable이 true로 지정돼야 한다. 또, 마지막 행 다음에 추가하기 위해서는 appendable이 true로 지정돼야 한다. 두 속성 모두 기본값은 false이다.
우선 행 삽입을 하려면 삽입 위치의 행으로 포커스를 가져간 후 insert (mac에서는 ctr+alt+I) 키를 입력한다. 입력 완료 후 행 수정과 마찬가지로 추가를 완료하기 위해서는 키보드 방향키나 마우스로 포커스를 다른 행으로 이동시키면 된다.
아래 예제에서는 DataColumn.defaultValue, defaultExpression 속성을 이용해서 기본값을 설정한다.
(rand 연산자 등에 대해서는 수식 개요 페이지를 참조한다.)
입력 완료된 행 데이터는 GridDataSet으로 전달되고, 데이터행 추가가 완료되면 GridDataSet.onRowInserted이벤트가 발생한다. 또, 행 수정과 유사하게 그리드 행 삽입을 시작하기 직전에 GridBase.onInserting 이벤트가 발생하는데, 이 이벤트의 핸들러 내에서 명시적으로 false를 리턴하면 행 삽입을 시작할 수 없게 된다.
grdMain.onInserting = function (grid, rowIndex) {
if ($('#chkEventInsertable').is(':checked')) {
return false;
}
};
appendable이 true면 마지막 행에서 아래 방향키를 눌러서 행 추가를 시작할 수 있다. 이벤트 등 나머지는 삽입의 경우와 동일하다.
또, GridBase.edit를 호출해서 행 수정을 시작하는 것과 마찬가지로, GridBase.insert, GridBase.append를 호출해서 각각 행 삽입과 추가를 시작할 수 있고, 행 추가가 완료되고 데이터셋으로 전달한 값이 전달돼서 데이터행이 실제 생성되면 GridDataSet.onRowInserted 이벤트가 발생한다.
dsMain.onRowInserted = function (ds, row) {
console.log('Data row inserted at ' + row);
};