선택되어 있는 그리드 열을 다시 선택하면 선택이 해제되도록 하고 싶습니다.

VueJS 선택되어 있는 그리드 열을 다시 선택하면 선택이 해제되도록 하고 싶습니다.

추천0 비추천 0

페이지 정보

작성자 죠이러버

작성일 2021-04-28 15:21 조회 5,929회 댓글 0건

제품 버전 : 5.20211.781

컨트롤 이름 : FlexGrid

본문

관련링크

FlexGrid 를 열선택 모드로 설정해서 선택한걸 다시 누르면 선택이 해제되도록 하고 싶습니다.

onSelectionChanged event 처리기를 통해 자체적으로 구현을 해보았는데요.

선택 해제를 위해 flexGrid.select(-1, -1) 을 onSelectionChanged 처리기 내에서 수행하면 재귀적인 호출이 발생해서

해당문제를 해결하기 위해 여러가지 상태 변수가 계속 추가되면서 계속 코드가 복잡해 지더라구요.

게다가 마우스를 클릭할 때 선택이 되다보니, 선택후 마우스를 이동하면 다른 열이 선택되면서 여러가지 복잡한 상황이 발생해서요.

마우스 드래그 시에는 selection 이 안되게 처리한다던지 또는 mousedown 시에는 selection 이 발생 안되게 하고 mouseup 시에 해당 위치 열이 selection 되도록 설정할 수 있으면 좋을것 같은데 방법이 있을까요?

혹시 질문에 대해 참고가 되실까 해서 제가 작업했던 onSelectionChanged event 처리기 코드를 공유합니다. 현재는 마우스 드래그로 인한 selection 발생 시 여러가지 문제가 있어 비활성화 한 상태입니다.

   onSelectionChanged(val) {
      this.bSelectSomething = true;
      if (this.bMouseUpAfterSelection == false) return;
      if (this.flexGrid != null) {
        if (this.flexGrid.selection.col == -1 || this.flexGrid.selection.row == -1) return;
        if (this.currentSelection != null && this.currentSelection === this.flexGrid.selectedItems[0]) {
          console.log("[MainGrid]onSelectionChange selected twice:", this.currentSelection);
          let gapTimestamp = +new Date() - this.lastSelectTimestamp;
          if (gapTimestamp > 1500) {
            this.currentSelection = null;
            this.flexGrid.select(-1, -1);
            this.lastSelectTimestamp = +new Date();
          }
        } else {
          this.currentSelection = this.flexGrid.selectedItems[0];
          console.log("[MainGrid]onSelectionChange selected new:", this.currentSelection);
          console.log("[MainGrid]onSelectionChange select val:", this.flexGrid.selection);
          this.flexGrid.select(this.flexGrid.selection.row, -1);
          this.lastSelectTimestamp = +new Date(); //Math.floor(+new Date() / 1000);
        }
        this.$emit("on-main-select", this.currentSelection);
        this.bMouseUpAfterSelection = false;
      }
    },