그리드 간 데이터 drag and drop이 가능한지 문의드립니다. > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

VueJS 그리드 간 데이터 drag and drop이 가능한지 문의드립니다.

페이지 정보

작성자 jw2504 작성일 22-01-17 09:06 조회 274회 댓글 0건
제품 버전 : 5.20212.812
컨트롤 이름 : Grid

본문


안녕하세요. 그리드 간 데이터 drag and drop 기능이 있는지 문의드립니다.


아래 TreeView 예제처럼 사용하고 싶은데 구현이 가능할까요?


https://demo.grapecity.co.kr/wijmo/docs/Topics/Nav/TreeView/Drag-Drop#between-trees

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

3 답변

VueJS Re: 그리드 간 데이터 drag and drop이 가능한지 문의드립니다.

페이지 정보

작성자 GCK루시 작성일 22-01-17 15:05 댓글 0건

본문

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


문의 주신 그리드 간의 데이터 이동을 위해서는 drag/drop 이벤트 핸들러를 사용하시면 됩니다. dragStart 할 때, 선택한 행 데이터를 저장하고 해당 그리드에 대한 정보를 저장합니다. 그 다음 drop 이벤트에서 행 데이터를 추가 할 그리드 collectionView의 컬렉션 모음인 sourceCollection에 행 아이템을 추가하고 기존 행 데이터에 대해서는 removeAt 메서드를 이용하여 삭제하시면 됩니다. 마지막으로 변경 사항이 반영되기 위해서 refresh 메서드를 이용하여 새로고침해주시기 바랍니다. 자세한 코드는 아래 샘플에서 확인하실 수 있습니다.


 


- sourceCollection : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html#sourcecollection

- hitTest : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo_grid.flexgrid.html#hittest

- removeAt : https://demo.grapecity.co.kr/wijmo/api/classes/wijmo.collectionview.html#removeat


도움말 문서를 같이 전달 드리며 다른 궁금한 점이 생기면, 문의 주시기 바랍니다. 


감사합니다. 

그레이프시티 드림 



* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

VueJS Re: 그리드 간 데이터 drag and drop이 가능한지 문의드립니다.

페이지 정보

작성자 jw2504 작성일 22-01-19 11:01 댓글 0건

본문

답변 감사합니다.


한가지 더 질문이 있습니다. 


예제를 그리드와 트리그리드로 변경해서 구현중인데요


일반그리드에서 트리그리드로 데이터를 drop했을때


플랫한 collectionview 데이터를 트리 구조로 처리해줄 수 있는 메소드나 방법이 있는지 궁금합니다.



<template>
  <div class="container-fluid">
    <p>첫 번째 FlexGrid 입니다.</p>
    <wj-flex-grid
      :alternatingRowStep="0"
      :allowDragging="true"
      :itemsSource="view"
      :initialized="initGrid"
    >
    </wj-flex-grid>
    <p>두 번째 FlexGrid 입니다.</p>
    <wj-flex-grid
      child-items-path="children"
      :itemsSource="viewTwo"
      :initialized="initGridTwo"
      :alternatingRowStep="0"
      :allowDragging="true"
    >
    </wj-flex-grid>
  </div>
</template>

<script>
import * as wjCore from "@grapecity/wijmo";
import * as wjGrid from "@grapecity/wijmo.grid";
import "@grapecity/wijmo.vue2.core";
import "@grapecity/wijmo.vue2.grid";
import { getData, getDataTwo } from "./data";
import { CollectionView } from "@grapecity/wijmo";
wjCore.setLicenseKey(window.evalkey);

export default {
  name: "HelloWorld",
  data() {
    return {
      flex: null,
      flexTwo: null,
      original: null,
      view: new wjCore.CollectionView(getData(10)),
      viewTwo: new CollectionView([
      {
        country: "Country",
        children: [
          {
            country: "Europe",
            children: [
              {
                country: "UK",
                children: [
                  { country: "UK-1", product: "UK-1 product" },
                  {
                    country: "UK-2",
                    children: [{ country: "UK-2-1", product: "UK-2-1 product" }]
                  }
                ]
              },
              { country: "Italy" }
            ]
          },
          {
            country: "Asia",
            children: [{ country: "Korea" }, { country: "Japan" }]
          }
        ]
      }
    ])
    };
  },
  methods: {
    initGrid: function (grid) {
      this.flex = grid;
    },
    initGridTwo: function (grid) {
      this.flexTwo = grid;
    },
    // make grid rows draggable
    _makeDragSource: function (s) {
      // make rows draggable
      s.itemFormatter = (panel, r, c, cell) => {
        if (panel.cellType == wjGrid.CellType.Cell) {
          cell.draggable = true;
        }
      };
      // disable built-in row drag/drop
      s.addEventListener(
        s.hostElement,
        "mousedown",
        (e) => {
          if (s.hitTest(e).cellType == wjGrid.CellType.Cell) {
            e.stopPropagation();
          }
        },
        true
      );
      // handle drag start
      s.addEventListener(
        s.hostElement,
        "dragstart",
        (e) => {
          let ht = s.hitTest(e);
          if (ht.cellType == wjGrid.CellType.Cell) {
            s.select(
              new wjGrid.CellRange(ht.row, 0, ht.row, s.columns.length - 1)
            );
            this.original = s; // drag가 시작된 그리드
            e.dataTransfer.effectAllowed = "copy";
            e.dataTransfer.setData("text", ht.row.toString());
          }
        },
        true
      );
    },
    // enable drop operations on an element
    _makeDropTarget: function (s) {
      s.hostElement.addEventListener("dragover", (e) => {
        let dragRow = e.dataTransfer.getData("text");
        if (dragRow != null) {
          e.dataTransfer.dropEffect = "copy";
          e.preventDefault();
        }
      });
      s.hostElement.addEventListener("drop", (e) => {
        let hti = s.hitTest(e);
        let dragRow = e.dataTransfer.getData("text");
        if (dragRow != null) {
          let item = this.original.rows[parseInt(dragRow)].dataItem;

          s.collectionView.sourceCollection.splice(hti.row, 0, item); // 행 추가
          this.original.collectionView.removeAt(parseInt(dragRow)); // 드래그 시작 그리드 해당 행 삭제

          s.collectionView.refresh();
          e.preventDefault();
        }
      });
    },
  },
  mounted: function () {
    this._makeDragSource(this.flex);
    this._makeDragSource(this.flexTwo);
    this._makeDropTarget(this.flex);
    this._makeDropTarget(this.flexTwo);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
/* fixed grid height */
.wj-flexgrid {
  height: 300px;
}

/* some extra cell padding */
.wj-flexgrid .wj-cell {
  padding: 8px;
}
</style>

댓글목록

등록된 댓글이 없습니다.

VueJS Re: 그리드 간 데이터 drag and drop이 가능한지 문의드립니다.

페이지 정보

작성자 GCK루시 작성일 22-01-21 13:28 댓글 0건

본문

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


Wijmo FlexGrid와 TreeGrid 간에 drag/drop을 하기 위해서 각 컨트롤에 대한 이벤트 핸들러를 추가하여 구현해 주셔야 합니다. 아래 샘플을 공유 드리오니 참고 부탁 드립니다.



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


감사합니다. 

그레이프시티 드림 


* 그레이프시티(GrapeCity)는 개발자를 위하여 ComponentOne(컴포넌트원), Spread(스프레드), ActiveReports(액티브리포츠), SpreadJS(스프레드JS), Wijmo(위즈모)와 같은 엑셀 스프레드시트 리포팅 그리드와 차트 등 다양한 종류의 .NET JavaScript(자바스크립트) 컴포넌트 툴을 생산하고있는 개발툴 전문 회사 입니다.

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2022 GrapeCity inc.