작성일 2021-08-24 17:36 조회 2,843회
댓글 0건
그리드에서 헤더를 클릭했을때 별도 이벤트와 구분자를 받아서 함수 처리가 가능한지요?
그리드 헤더 글자 옆에 이미지를 추가하고 이미지를 클릭할때 이벤트를 발생하여 팝업을 호출 하거나
혹은 컬럼을 숨김 처리를 할 수있는지 문의 합니다.
등록된 댓글이 없습니다.
1 답변
작성일 2021-08-26 09:45 댓글 0건
안녕하세요 그레이프 시티입니다.
문의 주신 특정 그리드 열 헤더에 이미지 삽입 후, 이벤트 처리에 대한 문의 답변 드립니다.
해당 기능을 구현하기 위해서 먼저 itemFormatter 속성에서 특정 컬럼 헤더 조건문을 통과한 셀의 innerHTML에 img 태그를 사용하여 기존 값과 함께 이미지를 추가할 수 있습니다.
그 다음, 그리드 hostElement의 mousedown 이벤트 내에서 주어진 포인트에 대한 정보를 주는 hitTest를 통해 해당 이미지를 클릭했는지를 classList.contains() 메서드를 통해 확인하실 수 있습니다. 이미지를 클릭했다면 그리드의 기본 동작인 정렬을 취소하고 구현하고자 하는 코드를 입력하여 주시길 바랍니다. 아래 코드를 참고하시길 바랍니다.
itemFormatter(panel, r, c, cell) {
if (panel.cellType == wjGrid.CellType.ColumnHeader && c == 1) {
let _old = cell.innerHTML;
cell.innerHTML =
`<img src='${image}' id='img' class="imageAdd" onClick={this.click} />` +
_old;
}
}
initialized(grid) {
this.grid = grid;
console.log(grid.columnHeaders.getCellElement(0, 0), "??");
grid.addEventListener(grid.hostElement, "mousedown", (e) => {
let ht = grid.hitTest(e);
var col = ht.col;
if (e.target.classList.contains("imageAdd")) {
grid.allowSorting = false;
// 코드를 입력하여 주시길 바랍니다.
} else {
grid.allowSorting = true;
}
});
}
(...)
<FlexGrid
itemsSource={this.state.data}
itemFormatter={this.itemFormatter.bind(this)}
initialized={this.initialized.bind(this)}
>
</FlexGrid>
다른 궁금한 점이 생기면, 문의 주시기 바랍니다.
감사합니다.
그레이프시티 드림
* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.
등록된 댓글이 없습니다.
