Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

draggable: true일 때 draggable 컬럼 hidden 방법 #2068

Open
Devhyein opened this issue Sep 23, 2024 · 2 comments
Open

draggable: true일 때 draggable 컬럼 hidden 방법 #2068

Devhyein opened this issue Sep 23, 2024 · 2 comments
Labels

Comments

@Devhyein
Copy link

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
Copy link

HIMZ5221 commented Sep 28, 2024

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
Copy link

스크린샷 2024-09-28 192223

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants