nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.42k stars 398 forks source link

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

Open mas615 opened 3 months ago

mas615 commented 3 months ago

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

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

HIMZ5221 commented 2 months ago
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 commented 2 months ago

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