! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

PureJS SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

페이지 정보

작성자 올트NHJ 작성일 2023-08-16 12:08 조회 709회 댓글 0건
제품 버전 : 5.20231.888
컨트롤 이름 : FlexGrid

본문

그리드의 셀 선택이 바뀌는 경우에 처리를 하기 위하여 selectionChanged 이벤트 핸들러를 등록하였습니다. (참고: 포커스 변경 처리 문의)


그런데 해당 핸들러 등록 시 cellTemplate 에 링크가 걸려있는 경우 selectionChanged 이벤트가 발생하면 해당 링크가 동작하지 않습니다. (cellTemplate 에 anchor 태그 구현 및 CellMaker.makeLink 로 링크 생성 시 동일)

해당 이벤트가 발생하지 않으면 정상적으로 링크가 동작합니다.


확인 부탁드립니다.

  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

5 답변

PureJS Re: SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2023-08-16 16:54 댓글 0건

본문

안녕하세요 그레이프시티입니다. 


문의하신 이슈가 저희 쪽에서 재현이 되지 않아 정확한 원인 파악이 어려운 상황입니다.  아래 저희 데모를 공유드리오니 문제가 되는 코드와 비교하여 저희 쪽으로 재현 가능한 샘플을 공유해주실 수 있으실까요? 공유해주신 샘플을 바탕으로 재현 및 디버깅 후 답변 드릴 수 있도록 하겠습니다.


- 하이퍼링크 데모


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

PureJS Re: SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 올트NHJ 작성일 2023-08-17 10:13 댓글 0건

본문

첨부파일

문의 관련하여 캡쳐 영상 및 구현 코드 공유합니다.


selectionChanged 이벤트 핸들러는 아래와 같이 구현했고요, 선택되었을 시 행 컬러를 바꾸는 코드입니다.

gridOptions.selectionChanged = function (grid, evt) {
    if (evt.panel.cellType === wijmo.grid.CellType.Cell) {
        if (!!curSelectedRow) {
            curSelectedRow.cssClass = null;
        }
        if (evt.row >= 0) {
            curSelectedRow = contentGridEl.rows[evt.row];
            curSelectedRow.cssClass = 'cur-selected-row';
        }
    }
};


첨부한 영상에 보이는 링크는 아래와 같이 CellMaker.makeLink() 를 통해 구현했고요, 코드에는 보이지 않지만 해당 링크 클릭 시 상세정보 모달이 노출됩니다.

col.cellTemplate = wijmo.grid.cellmaker.CellMaker.makeLink({
    click: function (e, ctx) {
        let param = {
            row: ctx.row.index,
            col: ctx.col.index,
            binding: ctx.col.binding,
            dataItem: ctx.item,
        };
        parentObj.onGridEvent('cellLinkClicked', param);
    },
});


영상에서 보시면 처음 링크를 클릭하면 selectionChanged 이벤트가 발생하면서 행 색깔이 바뀝니다.

이때 링크는 동작하지 않고요 selectionChanged 이벤트가 발생하지 않도록 클릭한 셀을 다시 클릭해야 cellTemplate 에 구현한 링크가 동작합니다.


동시에 동작하는 방법이 없는지 문의 드립니다.


댓글목록

등록된 댓글이 없습니다.

PureJS Re: SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 GCK루시 작성일 2023-08-21 15:16 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의하신 이슈의 경우, selectionChanged 이벤트에서 cssClass 속성을 설정할 때 FlexGrid가 새로고침되면서 셀의 클릭 이벤트가 무시되어 발생된 것으로 확인됩니다. 따라서, 선택한 행을 강조 표시해야 하는 경우 cssClass 속성을 설정하는 방법이 아닌 아래 코드와 같이 CSS를 설정해보시기 바랍니다.

.wj-cells .wj-cell.wj-state-active, .wj-cells .wj-cell.wj-state-multi-selected{
  background-color: red;
}


더불어 selectionChanged 이벤트에서 강조 표시 외에 cssClass 속성을 설정해야 하는 특정 요구사항이 있으시다면 관련 use case를 알려주시기 바랍니다. 해당 use case에 따라 안내 드리도록 하겠습니다.


다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

PureJS Re: SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

추천0 이 글을 추천하셨습니다 비추천0

페이지 정보

작성자 flexcheck 작성일 2023-09-11 11:52 댓글 1건

본문

위 코드와 같이 css 설정해보면 선택된 셀에만 색이 변경되는데

예를 들어 1행에 아무 셀을 click 했을 때 1행 전부 색이 변경되어야 합니다.

selector로 check 할 때는 blue / cell 선택 했을 때는 red로 색이 다르게 표현되어야 합니다.


그래서 selectionChanged로 선택된 셀의 행 전체에 class를 추가 했더니 

FlexGrid가 새로고침 되어 wijmo.grid.cellmaker.CellMaker.makeLink

로 링크 연결된 셀을 다시 클릭해야 cellTemplate 에 구현한 링크가 동작합니다. 



링크 연결된 셀을 한번 click할 때,

행 전체 색깔도 바뀌고 연결된 링크로 이동하는 동작이 동시에  이루어지게 하고 싶습니다.

댓글목록

flexcheck님의 댓글

flexcheck 작성일

기존 담당자가 퇴사하여 다른 아이디로 문의합니다.

PureJS Re: SelectionChanged 이벤트 핸들러 등록 시 cellTemplate 링크 동작 문의

추천0 이 글을 추천하셨습니다 비추천0 채택채택

페이지 정보

작성자 GCK루시 작성일 2023-09-12 11:17 댓글 0건

본문

안녕하세요 그레이프시티입니다.


문의하신 내용에 대해 답변드립니다.


1. Selector 적용 시 행이 아닌 셀 영역만 선택되는 이슈 문의

=>Selector 적용 시 selectionMode 와 관련하여 아래 Q&A 글을 참고하여 주시기 바랍니다.


그리드 내 Selector 추가시 셀 드래그 불가


2. Selector 클릭과 셀 영역 클릭을 구분하여 셀 변경 방법

=>해당 기능의 경우, 그리드 hostElement에 클릭 이벤트를 이용하여 Selector의 체크 박스 클릭 시, 행의 cssClass 속성을 설정하여 배경색을 지정해주시면 됩니다.


아래 코드를 참고하여 주시길 바랍니다.


.js

    var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
	(....)

    var selector = new Selector(theGrid);
    theGrid.selectionMode = "Row"

    theGrid.hostElement.addEventListener("click",function(e){
        var ht = theGrid.hitTest(e); // 클릭한 영역 정보 가져오기
        
        if(ht.panel.cellType === wijmo.grid.CellType.RowHeader && ht.target.type ==='checkbox'){ // 클릭한 곳이 행 머리글이고 체크박스이면
            if(theGrid.rows[ht.row].isSelected){ //체되었다면
                theGrid.rows[ht.row].cssClass = "clicked_selector" // 클래스 추가
            } else { //체크해제 되었다면
                theGrid.rows[ht.row].cssClass = null // 클래스 null 설정
            }
        }
    })

.css

.wj-cells .wj-cell.wj-state-active, .wj-cells .wj-cell.wj-state-multi-selected{
  background-color: red;
}


.clicked_selector{
  background-color: blue !important;
}


- selectionMode API 문서

- hitTest API 문서

- cssClass API 문서


관련 API 문서를 공유드리며 다른 궁금한 점이 생기면 문의주시기 바랍니다.


감사합니다.

그레이프시티 드림

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.