221017 삽질

👷‍♂️ AUI Grid 맨 끝행으로 드래그 앤 드랍이 안됨

저번 삽질 이어서 삽질하기.. 살펴보니 이 부분만 이러고 아임트라이얼 다른 부분은 끝 행으로 드래그 앤 드랍이 잘 된다. 잘 되는 코드를 살펴보자. 정상 작동하는 VariableMetadataList.js의 auiGridProps와 문제가 되는 CriteriaGrid의 auiGridProps를 비교해보자.

// 정상 작동 VariableMetadataList
useLayoutEffect(() => {
  const auiGridProps = {
    rowHeight: 34,
    showRowNumColumn: false,  // no 표시
    wrapSelectionMove: false,
    enableSorting: false,
    headerHeights: [45],
    editable: true,
    wordWrap: true,
    height: 500,
    tooltipSensitivity: 0,
    noDataMessage: "No data.",
    enableCellMerge: true,
    showSelectionBorder: true,
    selectionMode: "multipleCells",
    enableDrag: lock !== 2,
    enableDragByCellDrag: lock !== 2,
    enableDrop: lock !== 2,

    //고정 열
    fixedColumnCount: 5,
    triggerSelectionChangeOnCell: true,
    softRemovePolicy: "exceptNew",
    simplifySelectionEvent: true,
    rowStyleFunction: function (rowIndex, item) {
      if (`${item.order}`.includes("-")) {
        return "gridRow-style";
      }
      return null;
    }

    //고정 행
    // fixedRowCount: 1,
    //자동 높이 조절
    // autoGridHeight : true
  };

  gridRef.current = window.AUIGrid.create("#variableMetadata_grid", columnLayout, auiGridProps);

  return () => {
    window.AUIGrid.destroy("#variableMetadata_grid");
  }
  // eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

근데!!! 정상 작동하는 속성 그대로 넣어줘도 안됨.. 속성 문제 아님😥 머선 문제인고.. 아닛 근데 EndPointSearchList.js와 비교해서 하나씩 살펴보니 기존 속성에서 wordWrap만 false로 바꿔주니 기능은 정상 작동하는 것을 확인했다.

다만 그럼 행 높이가 모두 같아져 버린다.... wordWrap 속성이 필요할 것 같은데 wordWrap 속성을 가진 채 마지막 행으로 끌어내릴 수 있는 방법은 없는 것인가🤔 WhereClause 그리드에서는 가변 높이도 되고 드래그 앤 드랍도 되니 이 부분을 꼼꼼히 살펴보도록 하자. useLayoutEffect 문제도 아니다. 확인해본 속성들은

- rowHieght
- headerHiehgts
- triggerSelectionChangeOnCell
- wrapSelectionMove

자동으로 높이를 조정하는 autoGridHeight 속성의 경우 wordWrap이 true인 경우 무시된다라고 써있어서 wordWrap 대신 autoGridHeight을 써도 자동으로 높이가 맞춰지지 않을까 했는데.. !

...🥺 행 높이도 조절 안되고 전체 높이도 옹졸해졌다. rowStyleFunction로 행 자체 스타일에 padding 옵션을 줘도 안됨.

근데 또 이상한 건 스크롤이 생기면 마지막 행으로 드래그가 된다..?

여기까지 정리해보면

1. 스크롤이 있을 때는 됨
2. 스크롤이 없을 때, 전체 박스 높이가 실제 행들의 높이가 아닌 경우

스크롤이 있을 때, 맨 마지막 행으로 드래그 됨.

스크롤이 없을 때, 맨 마지막 행으로 드래그 안 됨.

스크롤이 없을 때, 전체 박스 높이가 실제 행들의 높이인 경우 맨 마지막 행으로 드래그 됨.

💡 결론
wordWrap 속성을 false로 하고 말줄임표 이용하기

기존 columnLayout의 inclusion, exclusion 필드의 style, renderer, labelFuction 속성을 죽여버렸다.😋

속성들을 죽인 이유는 테이블 한 칸 안에 pre 태그를 한 번더 렌더링하면서 그리드의 말줄임표 스타일이 안 먹었기 때문.. 한 줄만 보여주고 나머지는 말줄임표로 숨기고 싶을 땐

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

요런 스타일이 필요하다. 이렇게 해주면 다음과 같이!! 나쁘지 않게 테이블이 그려진다.

해결해야할 마지막 문제는 테이블의 모든 내용이 지워지면 아예 테이블 형태가 사라져 못생겨진다.