HTML 템플릿 렌더러 - Input 작성

데이터 값이 HTML 인 경우 그대로 출력하며, 사용자가 임의로 labelFunction 에서 HTML 템플릿 리터럴을 작성할 수 있습니다.(innerHTML 처리)

// HTML 형식을 스트링으로 작성해서 반환하면 그대로 그리드의 셀로 출력됩니다.
labelFunction: function (rowIndex, columnIndex, value, headerText, item, dataField, cItem) { // HTML 템플릿 작성
	// 빈 값에도 입력창을 유지하고 HTML 속성에 들어갈 문자는 안전하게 변환합니다.
	const inputValue = String(value ?? "").replace(/[&<>"']/g, (ch) => ({
	    "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;"
	}[ch]));
	const width = cItem.width - 12;
	return (`
		<input type="text"
			enterkeyhint="done"
			class="my_template_input"
			style="width: ${width}px;"
			value="${inputValue}"
			onblur="myInputHandler(${rowIndex}, this.value, event);"
			onkeydown="if(event.keyCode === 9) event.preventDefault();"
		>
	`);
}

템플릿 렌더러로 작성된 데이터 수정도 Undo(Ctrl+Z), Redo(Ctrl+Y) 를 지원합니다.

HTML 템플릿은 행 높이를 벗어날 수 없습니다. 예를 들어 br 태그로 개행을 한다해도 지정된 행 높이를 벗어 날 수 없습니다.(그리드의 rowHeight 속성으로 높이를 크게 하십시오.)

■ 단점 : 사용자가 HTML 템플릿을 작성하였기 때문에 엑셀 저장, 그룹핑, 필터링, 정렬 등에 제약을 받습니다. (dataField 값 기준으로 처리됩니다.)

■ TemplateRenderer 와 CustomRenderer 의 사용 목적은 동일합니다. 다만, 개발적 방법론, 재사용성에서 차이가 있습니다.

다만, 요즘 추세를 고려하면 TemplateRenderer 보다는 CustomRenderer 사용을 권장합니다.

동일한 기능의 CustomRenderer - Input 작성 데모 보기