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

FlexGrid Cell 내용 삭제, 행높이 자동 적용, 셀 변경내용 비교 관련 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS FlexGrid Cell 내용 삭제, 행높이 자동 적용, 셀 변경내용 비교 관련 문의

페이지 정보

작성자 jaylee 작성일 2024-05-23 09:33 조회 76회 댓글 1건
제품 버전 : 5.20232.939

본문

1. Cell 내용 삭제기능 문의

    - FlexGrid option

        alternatingRowStep={0}

        showMarquee={true}

        headersVisibility={HeadersVisibility.All}

        autoGenerateColumns={false}

        showSelectedHeaders={HeadersVisibility.None}

        allowDragging={AllowDragging.None}

        allowSorting={AllowSorting.None}

        allowResizing={AllowResizing.ColumnsAllCells}

        autoRowHeights={true}

        selectionMode={'CellRange'}


    - del키를 눌러 Cell 내용 삭제 시 Cell의 dataType이 Number인 Cell의 내용이 삭제 되지 않습니다.

        ㄴ Row selected시키고 삭제하면 삭제 됨

        

    - 기 내용이 존재하는 Row의 selected가 되어있지 않고 내용이 없는 빈행 추가 하고 빈행을 selected시켰을 때 beginningEdit Handler를 수행하지 않음...

        ㄴ 이 역시도 기 내용이 존재하는 행을 selected 시키고 del키를 눌렀을 시 beginningEdit Handler 를 수행하면서 정상 로직 수행


        ● 행추가 로직

          const gridRows = grid.rows

          const addedRow = new Row({})

          

          gridRows.insert(gridRows.length, addedRow)

          addedRow.isSelected = true


          grid?.refresh(true)

          

        ● Cell 내용삭제 로직

            : 삭제 기능의 경우 del키 입력시 기본적으로 selected된 Row의 내용이 삭제되어서 custom 해서 사용중입니다.

              beginningEdit Handler 에서 deleteKeyInHandler 호출 하여 사용 하고 있습니다.

            

            const getCellRange = (grid: FlexGridInstance): CellRange[] => {

              return grid.selectedRanges

            }


            const getSelectedCellRangeIndex = (

              grid: FlexGridInstance

            ): {start: {row: number; col: number}; end: {row: number; col: number}} => {

              const selectedRng: CellRange[] = getCellRange(grid)


              return {

                start: {

                  row:

                    selectedRng[0]._row2 > selectedRng[0]._row

                      ? selectedRng[0]._row

                      : selectedRng[0]._row2,

                  col:

                    selectedRng[0]._col2 > selectedRng[0]._col

                      ? selectedRng[0]._col

                      : selectedRng[0]._col2

                },

                end: {

                  row:

                    selectedRng[0]._row > selectedRng[0]._row2

                      ? selectedRng[0]._row

                      : selectedRng[0]._row2,

                  col:

                    selectedRng[0]._col > selectedRng[0]._col2

                      ? selectedRng[0]._col

                      : selectedRng[0]._col2

                }

              }

            }


            const deleteKeyInHandler = (

              grid: FlexGridInstance,

              e: CellRangeEventArgs,

              init?: {

                Object: Object

                String: string

                Number: number

                Boolean: boolean

                Date: string

                Array: []

              }

            ) => {

              if (e.data.key === 'Delete') {

                e.cancel = true


                const defaultInitData = init || {

                  Object: null,

                  String: '',

                  Number: 0,

                  Boolean: false,

                  Date: moment.now(),

                  Array: []

                }


                const selectedRng = getSelectedCellRangeIndex(grid)


                const startRow = selectedRng.start.row

                const endRow = selectedRng.end.row


                const startCol = selectedRng.start.col

                const endCol = selectedRng.end.col


                for (let r = startRow; r <= endRow; r++) {

                  for (let c = startCol; c <= endCol; c++) {

                    if (grid.cells.columns.getColumn(c).isVisible) {


                      switch (grid.cells.columns.getColumn(c).dataType) {

                        case DataType.Number:

                          grid.setCellData(r, c, defaultInitData.Number)

                          break

                        case DataType.String:

                          grid.setCellData(r, c, defaultInitData.String)

                          break

                        case DataType.Boolean:

                          grid.setCellData(r, c, defaultInitData.Boolean)

                          break

                        case DataType.Date:

                          grid.setCellData(r, c, defaultInitData.Date)

                          break

                        case DataType.Array:

                          grid.setCellData(r, c, defaultInitData.Array)

                          break

                        case DataType.Object:

                          grid.setCellData(r, c, defaultInitData.Object)

                      }

                    }

                  }

                }

              }

            }



2. 행 높이 자동 적용 문의


    - 그리드의 설정은 1번 문의 내용과 동일합니다.

    

    - cell 내의 input의 갯수가 늘어났을때 행의 높이가 자종 조절되게 하고 싶습니다.

    

        내용 :

            formatItem 을 이용해서 셀 안에 Html input 컴포넌트를 넣고

                const cellElement = e.cell

                cellElement.appendChild(HTMLInputElement)

                

            input 내에서 엔터 입력시 input을 하나씩 추가하는 기능을 개발했습니다.

                input..addEventListener('keyup', function (ev: KeyboardEvent) {

                    if(ev.code === 'Enter' || ev.code === 'NumpadEnter'){

                        ... cellElement 에 input을 추가하는 로직

                    }

                }

            

            input을 추가시 행 높이가 자동으로 늘어 나야 하는데 테스트 결과 아래와 같은 문제가 발생했습니다.

      

            case1. collectionview를 아래처럼 refresh를 했을 시 그리드가 갱신이 되면서 행높이 조절이 자동으로 되는데 추가한 행이 삭제 되는 현상이 발생 합니다.

                    grid.collectionView.refresh() : collection에 item이 grid의 Rows와 갯수가 달라서 나는 현상 같음....

            

            case2. collectionview를 refresh를 하지 않았을 때 그리드가 갱신이 되지 않아서 행의 높이가 조절 되지 않습니다. 

                    당연히 추가된 행은 삭제지도 않습니다.

                    input 추가 이벤트 후 다른 Cell의 내용을 편집 후 에 행 높이가 조절이 됩니다.

             


3. 변경전 데이터 비교

    - cell의 변경 전 과 후 데이터를 비교하고 싶습니다.


    변경 전 데이터 비교를 위해 다음과 같은 로직으로 oldVal과 newVal을 가져와 

    비교해 보았더니 내용이 같았습니다.

    

    CollectionView 의 초기화(new CollectionView(itemsSource)) 시점은 initializedGrid와 itemsSource의 변경 시점입니다.


    const oldVal = grid.getCellData(e.row, e.col, false)

    let newVal = ''


    if (grid.activeEditor) {

      newVal = grid.activeEditor.value

    } else {

      newVal = grid.activePanel.getCellData(e.row, e.col, false)

    }

    


감사합니다.

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

댓글목록

MESCIUS엘라님의 댓글

MESCIUS엘라 작성일

안녕하세요 메시어스입니다.

문의하신 내용은 확인 중에 있으며 업데이트 되는 대로 답변 드리겠습니다.

감사합니다.
메시어스 드림

1 답변

ReactJS Re: FlexGrid Cell 내용 삭제, 행높이 자동 적용, 셀 변경내용 비교 관련 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-05-28 09:58 댓글 0건

본문

안녕하세요 메시어스입니다.


오랜 기간 기다려주신 점 감사드리며 문의하신 내용에 대해 답변드립니다.


1. 셀 삭제 문의

=> 문의하신 내용의 경우, 셀에 빈 값일 때, beginningEdit 이벤트가 발생하지 않아 해당 현상이 나타난 것으로 확인됩니다.


따라서 beginngEdit 이벤트가 아닌 그리드 hostElement에 keydown 이벤트를 추가 및 delete 키를 입력 시 셀 삭제 함수를 호출하도록 설정하시기 바랍니다.


추가적으로 CollectionView의 sourceCollection이 아닌 그리드 Row를 행 컬렉션에 추가할 경우, 그리드 리렌더링 때 예상치 못한 동작이 나타날 수 있기 때문에 sourceCollection에 항목을 추가하여 그리드 행도 생성될 수 있도록 처리하는 것을 추천드립니다.


자세한 코드는 아래 샘플에서 확인할 수 있습니다.


 


2. 행 높이 자동 조절 문의

=> 그리드 셀에 input 요소를 추가하기 위해서는 각 열 셀 input 입력 요소 정보를 저장하고 이를 기반으로 input 요소를 렌더링해야 합니다. 


그 다음 셀 텔플릿을 이용하여 input 요소의 접근 및 키 이벤트를 추가한 뒤, 해당 이벤트 내에서 행의 크기를 조절하는 autoRowSize 메서드를 호출하여 행의 높이를 조절할 수 있습니다.


자세한 코드는 아래 샘플에서 확인할 수 있습니다.



3. cell 변경 전 후 데이터 비교의 경우

=> 일반적으로 cell의 변경 전 후 데이터 비교를 하는 경우, cell 편집을 기준으로 데이터 변경을 파악할 수 있는 cellEditEnding 이벤트를 사용하여 데이터를 비교할 수 있습니다. 


- cellEditEnding 이벤트 API


만일 원하시는 기능과 이벤트 역할이 상이하다면 저희 쪽으로 좀 더 구체적으로 구현하고자 하는 단계(collectionView 초기화 다음 또는 itemsSource에 새로 바인딩할 때인지 등)에 대해 설명 부탁드립니다. 해당 설명을 바탕으로 재현 및 디버깅 후 안내드리겠습니다.


감사합니다.

메시어스 드림



댓글목록

등록된 댓글이 없습니다.

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