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

셀 내 줄바꿈이 가능한지 문의드립니다. #2055

Open
mas615 opened this issue Aug 8, 2024 · 2 comments
Open

셀 내 줄바꿈이 가능한지 문의드립니다. #2055

mas615 opened this issue Aug 8, 2024 · 2 comments
Labels

Comments

@mas615
Copy link

mas615 commented Aug 8, 2024

안녕하세요, tui-grid 4.21.22를 사용중입니다.
우선 이렇게 좋은 라이브러리를 만들어주셔서 감사합니다.

다름이아니라 grid로 만들어진 셀의 내용을 수정할때 줄바꿈이 안되는데, 엑셀처럼 Alt+Enter등으로 줄바꿈이 가능해지는 설정이 따로 있는지 문의드립니다!
감사합니다!
image

@mas615 mas615 added the Question label Aug 8, 2024
@HIMZ5221
Copy link

HIMZ5221 commented Aug 20, 2024

class CustomTextareaEditor {
        constructor(props) {
            var options = props.columnInfo.editor.options;
            const el = document.createElement('textarea');

        el.rows = "1"

            if (options) {
                el.maxLength = options.maxLength;
                if (options.rows) el.rows = options.rows;
            }

            props.value = props.value == null ? '' : props.value;
            el.value = String(props.value);

            // textarea의 크기를 내용에 맞게 자동으로 조절
            el.style.overflow = 'hidden';
            el.style.resize = 'none';
            el.style.minHeight = '21px';
            el.addEventListener('input', function() {
                //this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });
            el.addEventListener('focus', function() {
                //this.style.height = 'auto';
                this.style.height = (this.scrollHeight) + 'px';
            });

            this.el = el;
        }

        getElement() {
            return this.el;
        }

        getValue() {
            return this.el.value;
        }

        mounted() {
            this.el.select();
        }
    }


//그리드 컬럼 옵션
{
    header     : '비고', name  : 'remark',
    editor     : {
        type    : CustomTextareaEditor,
        options : {maxLength : 300}
    },
},

Shift + Enter 로 다음줄 넘어갈 수 있습니다.

@mas615
Copy link
Author

mas615 commented Aug 20, 2024

@HIMZ5221 정말 정말 감사드립니다!!ㅠㅠ 바로 적용해보니까 적용 되었습니다!

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