draggable: true일 때 draggable 컬럼 hidden 방법

[Devhyein]

Version 4.21.15

Additional context 안녕하세요. 컬럼의 순서를 변경하기 위해 draggable: true 옵션을 사용하고 있습니다. 행의 순서는 변경하지 않고 컬럼 순서만 변경해야 해서 제일 왼쪽의 drag 아이콘이 보이는 컬럼을 삭제하고 싶습니다.

처음에는 아래 방법으로 lside를 삭제했더니 frozenColumn영역과, row_check영역에 같이 삭제되어 다른 방법을 찾고 있습니다.

            const lsideArea = this.$refs.tuiGrid.querySelector('.tui-grid-lside-area');
            if (lsideArea && lsideArea.parentNode) {
                lsideArea.parentNode.removeChild(lsideArea);
                const rsideArea = this.$refs.tuiGrid.querySelector('.tui-grid-rside-area');
                rsideArea.classList.add('tui-grid-remove-lside');
            }

해당 컬럼을 삭제할 수 있는 방법이 있거나, row가 아닌 column만 drag할 수 있는 옵션이 있다면 알려주시면 감사하겠습니다

---

Hello, I am using the draggable: true option to change the order of columns. Since I only want to change the order of columns, not rows, I would like to remove the column with the drag icon that appears on the far left.

At first, I tried deleting the lside with the following method, but it also deleted the frozen column area and the row_check area, so I'm looking for a different approach.

            const lsideArea = this.$refs.tuiGrid.querySelector('.tui-grid-lside-area');
            if (lsideArea && lsideArea.parentNode) {
                lsideArea.parentNode.removeChild(lsideArea);
                const rsideArea = this.$refs.tuiGrid.querySelector('.tui-grid-rside-area');
                rsideArea.classList.add('tui-grid-remove-lside');
            }

If there's a way to remove just that column or if there is an option to enable dragging only for columns and not rows, I would appreciate your guidance.

[HIMZ5221]

tui-grid.js 튜닝이 필요합니다. hidden : true로 설정 시, 컬럼드래그가 잘 시작되지 않는 버그가 존재합니다.

//두번째 파라메터 draggable 추가
rowHeaderInfos.push(createDraggableRowHeader(rowHeaderColumn,draggable));

//두번째 파라메터 draggable 추가
function createDraggableRowHeader(rowHeaderColumn,draggable) {
                    var renderer = common_1.isObject(rowHeaderColumn)
                        ? rowHeaderColumn.renderer
                        : {type : rowHeaderDraggable_1.RowHeaderDraggableRenderer};
                    var draggableColumn = {
                        name         : '_draggable',
                        header       : '',
                        hidden       : false,
                        resizable    : false,
                        align        : 'center',
                        valign       : 'middle',
                        renderer     : createRendererOptions(renderer),
                        baseWidth    : ROW_HEADER,
                        minWidth     : ROW_HEADER,
                        fixedWidth   : true,
                        autoResizing : false,
                        escapeHTML   : false,
                        headerAlign  : 'center',
                        headerVAlign : 'middle',
                      //두번째 파라메터 사용
                        ...draggable
                    };
                    return draggableColumn;
                }

const grid2 = new tui.Grid({
        el        : document.getElementById('grid2'),
        draggable : {  //기존 boolean 타입에서, 객체타입으로
            hidden : false, //또는 true
            header : "드래그"
        },

[HIMZ5221]