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

FlexGrid header 체크박스 생성 문의 > Q&A | 토론

본문 바로가기

Wijmo

Q&A | 토론

ReactJS FlexGrid header 체크박스 생성 문의

페이지 정보

작성자 jaylee 작성일 2024-05-22 18:26 조회 122회 댓글 0건
제품 버전 : 5.20241.9
컨트롤 이름 : FlexGrid

본문

  

  동적으로 생성된 FlexGrid header에 체크박스를 생성하여 체크시 기능에 대해 

  문의 드립니다. (header에 여러개의 체크박스 생성)

  FlexGrid 왼편체크박스와  header에 생성된 체크박스를 동시에 체크시에  해당 row, col에      text값이 자동 입력되고  왼편체크박스를 해제 하거나  header 체크박스 해제하며 입력됬던   해당 row, col에 text값이 지워지는 예제가 필요합니다.



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

댓글목록

등록된 댓글이 없습니다.

6 답변

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS엘라 작성일 2024-05-23 09:00 댓글 2건

본문

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


문의하신 내용에 대한 확인 요청 드립니다.


첨부해주신 이미지를 보면, 가장 왼편에 체크박스가 설정된 열이 다른 열에 비해 너비가 좁은 일반 열로 확인됩니다.


이와 관련하여 왼편에 체크박스가 설정된 열이 일반 열인지 또는 행의 헤더 영역인지 확인 부탁드립니다.


정확한 답변을 위해 요청드리오니 체크박스를 설정하시고자 하는 영역을 자세히 설명해 주시면 확인 후 안내 드리겠습니다.


감사합니다.

메시어스 드림


댓글목록

jaylee님의 댓글

jaylee 작성일

안녕하세요.  
왼편 설정된 열이 일반열만 생각했는데,  행의 헤더 영역인 경우  모두 필요합니다.
감사합니다.

MESCIUS엘라님의 댓글의 댓글

MESCIUS엘라 작성일

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

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

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

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-05-28 14:45 댓글 1건

본문

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

 

FlexGrid에서 원하는 동작을 수행하기 위해 click 이벤트 리스너를 그리드의 hostElement에 추가하고 rowHeader(Selector) 및 columnHeader 체크박스의 상태에 따라 셀 값을 업데이트할 수 있습니다. 


만일 일반 셀에서도 구현하고 싶은 경우, 아래 코드 부분을 주석 해제한 뒤, 적용해보시기 바랍니다.

selectorRef.current.column = 0; // Selector 사용할 열 지정
(....)

 if (ht.panel) {
       (....)
          (cellType === wjGrid.CellType.Cell &&
          /hasClass(target, 'wj-column-selector')) ||


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

(샘플에서 헤더의 체크박스를 모두 클릭 시, 헤더에 속한 셀의 값이 1000으로 변경되는 것을 확인할 수 있습니다)


 


 

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

 

감사합니다.

메시어스 드림


댓글목록

jaylee님의 댓글

jaylee 작성일

안녕하세요. 샘플 감사합니다. 잘 참조하고 있습니다.
그런데 소스에 샘플을 적용하다보니,  한가지 문제가 발생하는데요.
grid.rows.forEach 문을 태우는 순간 header에 생성된 체크박스의  체크가  풀려버리는
현상이 계속 발생해서요.  체크했을 때  유지 시킬 수 있는 방법은 없는지 궁금합니다.
감사합니다. 

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-06-03 13:16 댓글 1건

본문

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


문의하신 현상이 저희 쪽에서 재현이 되지 않아 정확한 원인 파악 및 답변이 어렵습니다. 따라서 저희가 공유드린 샘플를 바탕으로 재현 가능한 샘플 프로젝트를 공유해주신다면 재현 및 디버깅 후 안내드리겠습니다.


감사합니다.

메시어스 드림

댓글목록

jaylee님의 댓글

jaylee 작성일

샘플로 주신 소스는 Grid initialized 속성에 이벤트를 사용하였는데
이쪽 업무는 header부분이 가변적으로 늘어나는 경우와 header체크박스가 들어가면 안되는 경우까지
고려하니 조회될때 마다 header체크박스를 생성해줘야 해서 
FlexGrid의 loadedRows 속성에 넣게 되었습니다. 
그러다보니 브라우저 속도도 느려지고 동작이 원할하지 않아 문제가 있는 것 같습니다.
이런경우 loadedRows가 아닌 어떤 속성에 넣어야 되는지 궁금합니다.


const onloadedRows = useEvent(grid => {      
    let colIdx = confirmCnt + 5
    grid.formatItem.addHandler((s: any, e: any) => {
      if (e.panel == s.columnHeaders) {
        const totalCols = grid.cells._cols.length

        if (confirmCnt > 0) {           
          if (e.col > 1 && e.col < totalCols && e.row === 2) {
            e._cell.innerHTML = ''
          }         
          if (e.col > 4 && e.col < colIdx && e.row === 2) {           
            if ((e.col - 4) % 8 != 0) {
              //체크박스  생성 및 초기화화
              e.cell.innerHTML =
                `<input class= "customHeaderChk" type = "checkbox" ${
                  e.col.chechedHeader ? 'checked' : ''
                }>` + e.cell.innerHTML
            }
          }
        } else {
          if (e.col > 1 && e.col < totalCols && e.row === 2) {
            e._cell.innerHTML = ''
          }
        }

        grid.hostElement.addEventListener('click', function (e: any) {
          var ht = grid.hitTest(e) //지정된 포인트에 대한 정보를 포함하는 wijmo.grid.HitTestInfo 개체를 가져
          let isChecked = false
          
          const updateColumnValues = () => {
            grid.rows.forEach((row: any, idx: number) => {
              grid.columns.forEach((col: any, jdx: number) => {
                if (jdx > 4) {
                  if (idx % 4 === 0) { 
                    if (row.isSelected === true) {
                      isChecked = true
                    } else {
                      isChecked = false
                    }
                  }

                  if (idx % 4 === 3) {
                    if (isChecked === true && col.checkedHeader === true) {
                      grid.setCellData(idx, jdx, 'FIXED')
                    } else {
                      grid.setCellData(idx, jdx, '')
                    }
                  }
                }
              })
            })
            //grid.refresh()
          }

          if (ht.panel) {
            const {cellType} = ht.panel
            if (
              cellType === CellType.ColumnHeader &&
              hasClass(e.target, 'customHeaderChk')  
            ) {
              if (cellType == CellType.ColumnHeader) {
                grid.columns[ht.col].checkedHeader = e.target.checked
              }

              updateColumnValues()
            }
          } 
          
        })
      }
    })
  })

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-06-05 12:42 댓글 1건

본문

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


공유해주신 코드 상으로는 별도로 설정되어 있어야 할 이벤트들이 중복으로 들어가 있는 것으로 확인됩니다. (loadedRows 이벤트 안에 formatItem 이벤트,  formatItem 이벤트안에 click 이벤트)


또한 loadedRows 이벤트를 이용하는 경우가 아래의 이유 때문이라는 것으로 이해했습니다.

1. 가변적으로 header가 늘어남

2. 특정 header에만 체크박스가 설정되어야 함


formatItem 이벤트는 셀을 나타내는 요소가 생성되었을 때 즉 셀을 그려줘야할 때 발생합니다. 따라서 동적으로 헤더가 변경됐을 때도 해당 이벤트가 발생합니다. 더불어 특정 header에만 체크박스를 설정하고 싶은 경우, 아래 코드와 같이 조건문을 통해 제어할 수 있습니다.


      let row = s.rows[e.row],
        col = s.columns[e.col];

      if (
        e.panel.cellType === wjGrid.CellType.ColumnHeader &&
        e.row === s.columnHeaders.rows.length - 1 && // 열 헤더의 맨 하단 행만
        e.col > 0
      ) {


따라서 loadedRows 이벤트 안에 이벤트를 설정하지 마시고 formatItem 및 click 이벤트를 이전에 공유드린 샘플과 같이 각각 설정해서 사용해보시기 바랍니다.


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


감사합니다.

메시어스 드림

댓글목록

jaylee님의 댓글

jaylee 작성일

안녕하세요. 여러 도움주셔서 감사합니다.

말씀하신데로 적용하려다 보니 몇가지 문의사항이 있습니다.

initialized 속성에 grid.hostElement.addEventListener('click') 이벤트는
넣었습니다.

initialized 속성에 grid.formatItem.addHandler 도 넣으려 했으나
조회가 될때마다 가변적인 header칼럼갯수를 담은 변수(confirmCnt)에 값이 안들어와서  
onloadedRows 속성에 예전처럼 설정할 수 밖에 없었는데요.
onloadedRows 말고 다른 방법이 있는지 궁금합니다.

그리고 현재설정상태에서 left checkbox 선택후 header checkbox를 선택/해제시 문제없이 동작을 하는데
header checkbox 설정후 left checkbox를 선택/해제하면 header checkbox가 
모두 해제되버리는 문제가 발생하는데요.
header checkbox 체크/해제할때마다 grid.formatItem.addHandler 이벤트를 타면서
header checkbox를 모두 초기화 시켜버리는 것 같습니다.
이부분 또한 해결방법이 없는지 궁금합니다.

그리고 한가지 더 문의사항이 있는데요.
조회버튼을 클릭하여 조회가 완료되는 시점을 catch할 수 있는 이벤트나 속성이 있는지 궁급합니다.
조회완료때마다 체크박스를 없애고 다시 설정하는 부분(e._cell.innerHTML = '')이
grid.formatItem.addHandler 이벤트에 들어있어 header checkbox , left checkbox 변동이
생길때마다 계속 e._cell.innerHTML = '' 이부분이 실행되어서 문제가 되는 것도 같습니다.

감사합니다.
--------------------------------------------------------------------------------
const initGrid = useEvent(grid => {    // =>> initialized 속성에 입력
    
    grid.hostElement.addEventListener('click', function (e: any) {
      var ht = grid.hitTest(e)  
      let isChecked = false

      const updateColumnValues = () => {
        grid.rows.forEach((row: any, idx: number) => {
          grid.columns.forEach((col: any, jdx: number) => {
            if (jdx > 4) {
              if (idx % 4 === 0) {
                if (row.isSelected === true) {
                  isChecked = true
                } else {
                  isChecked = false
                }
              }

              if (idx % 4 === 3) {
                if (isChecked === true && col.checkedHeader === true) {
                  grid.setCellData(idx, jdx, 'FIXED')
                } else {
                  grid.setCellData(idx, jdx, '')
                }
              }
            }
          })
        })
        //grid.refresh()
      }

      if (ht.panel) {
        const {cellType} = ht.panel

        if (
          (cellType === CellType.ColumnHeader && hasClass(e.target, 'customHeaderChk')) ||          
          (cellType === CellType.RowHeader && hasClass(e.target, 'wj-column-selector')) ||          
          (cellType === CellType.TopLeft &&
            hasClass(e.target, 'wj-column-selector-group'))
        ) {
          if (cellType == CellType.ColumnHeader) {
            grid.columns[ht.col].checkedHeader = e.target.checked
          }

          updateColumnValues()
        }
      }
    })
  })

  const onloadedRows = useEvent(grid => {  // =>> loadedRows 속성에 입력
    grid.formatItem.addHandler((s: any, e: any) => {
      let colIdx = confirmCnt + 5

      let col = s.columns[e.col]

      if (
        e.panel.cellType === CellType.ColumnHeader &&        
        e.row === 2 &&
        e.col > 4
      ) {
        const totalCols = grid.cells._cols.length

        if (confirmCnt > 0) {
          if (e.col > 4 && e.col < totalCols && e.row === 2) {
            e._cell.innerHTML = ''
          }

          if (e.col > 4 && e.col < colIdx && e.row === 2) {
            if ((e.col - 4) % 8 != 0) {
              //체크박스  생성 및 초기화화
              e.cell.innerHTML =
                `<input class= "customHeaderChk" type = "checkbox" ${
                  col.checkedHeader ? 'checked' : ''
                }>` + e.cell.innerHTML
            }
          }
        } else {
          if (e.col > 4 && e.col < totalCols && e.row === 2) {
            e._cell.innerHTML = ''
          }
        }
      }
    })
  })

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-06-10 15:21 댓글 1건

본문

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

 

이전에 안내드린 것과 같이 loadedRows 이벤트 안에 addHandler를 통해 formatItem 이벤트를 직접적으로 추가 및 설정하는 코드는 추천드리지 않습니다. 


더불어 Wijmo FlexGrid는 가상화를 통해 데이터의 일부만 추적 및 렌더링하여 document 트리에서 DOM 요소의 수를 줄이고 성능을 크게 향상 시켰습니다.

FlexGrid는 viewRange 속성을 통해 데이터의 표시 가능한 부분을 나타낼 수 있으며 사용자가 화면의 크기를 조정하거나 그리드를 스크롤 이동 등 그리드 뷰 변화 시 viewRange가 업데이트되고 그리드가 하위 DOM 요소를 업데이트합니다.

 

이러한 그리드 가상화 특성상 일반적으로 사용자 정의를 해주는 formatItem 이벤트를 이용하지 않고 체크박스 설정 시, 기존의 체크박스와 체크박스 상태 자체가 유지되지 않는 결과를 가질 수 있습니다.


열 헤더에 체크박스 설정 후 행 헤더 선택/해제 시 헤더들의 체크박스가 모두 해제되는 현상과 관련되어 만일 loadedRows 이벤트 안에 formatItem을 설정하시고 계신다면 이전에 공유드린 샘플과 같이 수정하시기 바랍니다


추가적으로 confirmCnt와 같은 변수가 들어오지 않는다고 언급하셨는데 공유드린 샘플을 바탕으로 현상이 재현되는 간단한 샘플 프로젝트 파일과 디테일한 단계를 저희 쪽으로 공유해주신다면 재현 및 디버깅 후 안내드리겠습니다.


더불어 _가 붙는 속성은 내부 로직을 위한 속성이므로 아래 코드와 같이 공식 API 문서에 있는 속성을 우선으로 사용하시기를 권고드립니다.

const totalCols = grid.cells._cols.length
=> const totalCols = s.columns.length
e._cell.innnerHTML => e.cell.innerHTML 


마지막으로 조회 완료 시점을 문의하셨는데 그리드에 새로운 데이터가 바인딩된 시점에 대한 이벤트를 문의하신 것이 맞다면 Wijmo FlexGrid의 itemSourceChanged 이벤트가 있으며 참고 부탁드립니다.


그 외에 이벤트 리스트는 아래 링크에서 확인하실 수 있습니다.

- FlexGrid events API


 

감사합니다.

메시어스 드림

댓글목록

jaylee님의 댓글

jaylee 작성일

안녕하세요.

 left checkbox 체크/해제 시에 header checkbox가 풀려버리는 현상의 원인은 찾았습니다.
 다른 곳에 원인이 있었는데
 FlexGrid의 initialized 속성에 포함된 함수 = >>
 "selectRef.current = new Selector(grid, {
      itemChecked: (s: any, e: any) =>
      setCheckedItems(grid.rows.filter((r: any) => r.isSelected))
    }) "
 이 함수가 원인이였습니다.
저장 및 삭제시 체크한 건만 object에 담기위한 함수인데
이함수 때문에 left checkbox 체크/해제 시에 header checkbox가 풀려버리는 현상이 발생하는데요.

left checkbox 선택한 건을 위와 같은 filter를 사용 안하고 데이타를 담을 수 있는 방법이 있는지 
문의드립니다.

감사합니다.

ReactJS Re: FlexGrid header 체크박스 생성 문의

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

페이지 정보

작성자 MESCIUS루시 작성일 2024-06-13 14:03 댓글 0건

본문

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


공유해주신 코드를 바탕으로 저희 쪽에서 재현하고자 했으나 두 가지 경우(loadedRows 안에 formatItem 이벤트가 있을 때 또는 loadedRows 이벤트와 별도로 formatItem 이벤트만 설정할 때) 모두 말씀하신 현상이 안타깝게도 재현이 되지 않습니다. 


다만 filter 메서드를 사용하지 않고 선택된 행에 대한 정보를 설정하기 위해서는 map과 selectedRows 속성을 이용해주시면 됩니다. 현재 선택된 행에 대한 정보를 설정할 수 있는 selectedRows를 통해 행 헤더를 클릭하여 원하시는 기능을 구현할 수 있습니다.


  selectorRef.current = new Selector(grid, {
      itemChecked: (s, e) =>
        setCheckedItem(
          grid.selectedRows.map((r) => {
            if (r.isSelected) {
              return r;
            }
          })
        ),
    });


감사합니다.

메시어스 드림

댓글목록

등록된 댓글이 없습니다.

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