안녕하세요 그레이프시티입니다.
문의 주신 formatItem 이벤트를 이용하여 TreeView 컨트롤의 노드에 HTML 요소를 추가하는 방법에 대해 답변 드립니다.
아래의 코드와 같이 createElement 메서드를 이용하여 특정 노드에 HTML 요소를 추가해 보시기 바랍니다.
function formatItem (s, e) {
if (e.dataItem.input) {
let input = wjCore.createElement('<input type="text"/>');
input.addEventListener("click", clickListener);
e.element.appendChild(input);
} else if (e.dataItem.button) {
let btn = wjCore.createElement("<button onclick='alert('')'>버튼</button>");
btn.addEventListener("click", clickListener);
e.element.appendChild(btn);
} else if (e.dataItem.select) {
let select = wjCore.createElement(
'<select name="job"><option value="">리스트박스</option><option value="옵션1">옵션1</option><option value="옵션2">옵션2</option><option value="옵션3">옵션3</option></select>'
);
select.addEventListener("click", clickListener);
e.element.appendChild(select);
}
};
이때, Input 과 같은 HTML 요소를 클릭 시 노드를 확장 시키는 TreeView 컨트롤의 클릭 이벤트로 인해 노드 내부에 생성된 요소에 포커스가 유지되지 않습니다.
HTML 요소에 포커스가 유지되기 위해서는 아래의 코드와 같이 이벤트 버블링을 방지하는 코드를 작성해 주시기 바랍니다.
function clickListener(e) {
e.stopPropagation();
}
- createElement API 문서
- formatItem API 문서
API 문서를 공유 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림