그리드 아이템 편집 기본 가이드

그리드 및 그리드 데이터부의 editable 속성 값 예시 화면이다.

editable 속성은 사용자의 컬럼 데이터부 아이템 데이터 편집 가능 여부를 설정한다.

combobox/calendar/spinnumber_editable 속성은 편집 상태에서 각 입력 방식의 아이템 값을 사용자의 키 입력을 통한 변경 가능 여부를 지정한다.

그리드의 seteditable API 호출시 컬럼별/아이템별 editable 상태 정보는 유지된다.

그리드, 컬럼, 아이템별 editable 관련 API 호출 순서에 따라 적용된다.

예시

템플릿 위치: /HTML5/COMPONENT/GRID/grid_edit_basic

템플릿 파일

화면 스크립트

// 화면 로드 이벤트
function screen_on_load()
{
	// 그리드 editable 상태 헤더에 표시
	this.DisplayGridEditable();
}

// "seteditable" 버튼 이벤트
function btn_seteditable_on_click(objInst)
{
	// 그리드 editable 속성 토글 처리
	// 그리드의 seteditable API 호출시 컬럼별/아이템별 editable 상태 정보는 유지된다.
	// 그리드, 컬럼, 아이템별 editable 관련 API 호출 순서에 따라 적용된다.
	this.grd.seteditable(!this.grd.geteditable());

	// 그리드 editable 상태 헤더에 표시
	this.DisplayGridEditable();
}

// "setcolumneditable" 버튼 이벤트
function btn_setcolumneditable_on_click(objInst)
{
	// 컬럼 editable 속성 토글 처리
	this.grd.setcolumneditable(0, !this.grd.getcolumneditable(0));

	// 그리드 editable 상태 헤더에 표시
	this.DisplayGridEditable();
}

// "setitemeditable" 버튼 이벤트
function btn_setiitemeditable_on_click(objInst)
{
	// 아이템 editable 속성 토글 처리
	this.grd.setitemeditable(1, 0, !this.grd.getitemeditable(1, 0));
}

// 그리드 editable 상태 헤더에 표시
function DisplayGridEditable()
{
	var i, count;

	// 그리드 editable 속성 값을 그리드 헤더에 표시
	if (this.grd.geteditable()) {
		this.grd.setheadertext(0, 0, "그리드 editable 속성: true");
	}
	else {
		this.grd.setheadertext(0, 0, "그리드 editable 속성: false");
	}

	count = this.grd.getcolumncount();

	// 그리드 컬럼 데이터부 editable 속성 값을 그리드 헤더에 표시
	for (i = 0; i < this.grd.getcolumncount(); i++) {
		if (this.grd.getcolumneditable(i)) {
			this.grd.setheadertext(2, i, "true");
		}
		else {
			this.grd.setheadertext(2, i, "false");
		}
	}
}

// "setitemeditstartex" 버튼 이벤트
function btn_setitemeditstartex_on_click(objInst)
{
	this.grd.setitemeditstartex(0, 0, true, true);
}

// "setnextitemeditstart" 버튼 이벤트
function btn_setnextitemeditstart_on_click(objInst)
{
	var select_row, select_column;

	select_row = this.grd.getselectrow();
	select_column = this.grd.getselectcolumn();

	this.grd.setnextitemeditstart(select_row, select_column, true, false);
}

// "setitemeditsel" 버튼 이벤트
function btn_setitemeditsel_on_click(objInst)
{
	// 텍스트의 맨끝으로(블럭지정 안됨) 커서 이동
	this.grd.setitemeditsel(-1, -1);
}

/**
 * 그리드 아이템이 편집 상태가 시작/종료 시점에 발생하는 이벤트
 *
 * @param {Object} objInst 그리드 컴포넌트 인스턴스
 * @param {number} nRow 그리드 행 인덱스 (Zero-Based)
 * @param {number} nColumn 그리드 열 인덱스 (Zero-Based)
 * @param {boolean} bShowEdit 편집 시작/종료 여부
 */
function grd_on_itemeditshow(objInst, nRow, nColumn, bShowEdit)
{
	factory.consoleprint("on_itemeditshow> Start");
	factory.consoleprint("on_itemeditshow> Grid Object Name = " + objInst.getname());
	factory.consoleprint("on_itemeditshow> nRow = " + nRow);
	factory.consoleprint("on_itemeditshow> nColumn = " + nColumn);
	factory.consoleprint("on_itemeditshow> bShowEdit = " + bShowEdit);
}

/**
 * 그리드 아이템이 편집 완료 시점에 발생하는 이벤트
 *
 * @param {Object} objInst 그리드 컴포넌트 인스턴스
 * @param {number} nRow 그리드 행 인덱스 (Zero-Based)
 * @param {number} nColumn 그리드 열 인덱스 (Zero-Based)
 * @param {string} strPrevItemText 편집전 아이템 값
 *
 * @returns {number} 키 처리 방식
 * 	0 - 편집만 완료하고, 포커스가 이동하지 않음
 * 	1 - 그리드 내에서 다음으로 편집이 가능한 아이템으로 포커스 이동
 * 	2 - 편집된 값을 취소하고, 포커스가 이동하지 않음
 */
function grd_on_itemeditcomplete(objInst, nRow, nColumn, strPrevItemText)
{
	factory.consoleprint("on_itemeditcomplete> Start");
	factory.consoleprint("on_itemeditcomplete> Grid Object Name = " + objInst.getname());
	factory.consoleprint("on_itemeditcomplete> nRow = " + nRow);
	factory.consoleprint("on_itemeditcomplete> nColumn = " + nColumn);
	factory.consoleprint("on_itemeditcomplete> strPrevItemText = " + strPrevItemText);

	return 1;
}

목차

그리드 아이템 편집 기본 가이드

예시

화면 스크립트