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

버튼을 통한 행 제거 > Q&A | 토론

본문 바로가기

PureJS 버튼을 통한 행 제거

페이지 정보

작성자 개미 작성일 2021-11-25 15:05 조회 2,448회 댓글 0건
제품 버전 : 5.20211.794
컨트롤 이름 : 행 제거

본문

delete 키를 통한 행 삭제 말고 버튼을 통해 행삭제 처리를 하고 싶습니다.

그리드에서 delete 키를 누르면 window.onkeydown 이벤트에 안걸리는것 같은데 어떻게 구현해야 할까요..?

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

댓글목록

등록된 댓글이 없습니다.

2 답변

PureJS Re: 버튼을 통한 행 제거

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

페이지 정보

작성자 GCK루시 작성일 2021-11-26 12:10 댓글 1건

본문

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


문의 주신 내용에 답변 드립니다.

1. 버튼 클릭을 통해 그리드 행 삭제

=> 해당 기능을 구현하기 위해서 그리드의 선택 모드를 행으로 설정 후, 그리드 클릭이 변경될 때마다 발생하는 selectionChanged 이벤트를 통해 선택된 행의 인덱스를 할당합니다. 

선택된 행의 인덱스와 함께 버튼 클릭 시, collectionView에서 컬렉션으로부터 특정 인덱스에 있는 항목을 삭제하는 removeAt 메서드를 이용하여 그리드 행을 삭제하실 수 있습니다. 

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

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


2. 그리드에 delete 키 클릭 시, keyDown 이벤트 문의

=> 먼저, 그리드 컨트롤을 호스팅하는 DOM 요소를 가져오는 hostElement 속성에 접근하여 이벤트 핸들러를 부착해줍니다. 이벤트 핸들러 keyDown 이벤트를 추가하고 해당 이벤트 발생시 전달되는 이벤트 키코드를 통해 delete 키를 입력했는지 확인하실 수 있습니다.

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




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


감사합니다. 

그레이프시티 드림 


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


댓글목록

개미님의 댓글

개미 작성일

단일행은 그렇게 처리가 되는데 여러개의 행을 한번에 지우려면 어떻게 처리해야하나요?

PureJS Re: 버튼을 통한 행 제거

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

페이지 정보

작성자 GCK루시 작성일 2021-12-06 11:00 댓글 0건

본문

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


그리드의 여러 행을 선택 후, 삭제하기 위해서는 CollectionView의 remove 메서드를 사용하시면 됩니다. 먼저 그리드의 selectionMode를 ListBox로 설정하여 ctrl+ click으로 여러 행을 선택할 수 있도록 설정합니다. 그 다음, 버튼 클릭 시 해당 이벤트 내에서 selectedItems 속성을 통해 그리드에 선택된 데이터 항목을 가져옵니다. 마지막으로 해당 배열에 대해서 반복문을 통해 remove 메서드를 실행하면 여러 행이 한 꺼번에 삭제되는 것을 확인하실 수 있습니다. 

자세한 코드는 아래 샘플을 참고하시기 바랍니다.


document.getElementById('remove').addEventListener("click",function(){
    var selection = theGrid.selectedItems;
    selection.forEach((selected)=>{
      theGrid.collectionView.remove(selected)
    })
  })

 

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

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


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


감사합니다. 

그레이프시티 드림 



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

댓글목록

등록된 댓글이 없습니다.

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