tui tree grid 사용시 컬럼명 체크박스 표시 관련 문의

[jkh1208]

tui tree grid에서 컬럼 헤더에 컬럼명과 checkbox 형태를 아래 사진과 같이 구현하고 싶은데 제가 해본 결과로는 생성이 안되어 문의드립니다.

사진과 같이 그리드 헤더에 컬럼명과 checkbox 2개 행을 만들고 merge시키고 데이터영역도 checkbox로 설정하고 싶습니다. 사진과 같이 구현하고 싶은데 방법이 있으면 부탁드리겠습니다.

제가 구현하려는 내용은

1. 컬럼명 + checkbox 형태 컬럼 헤더 영역입니다.
2. 조회해온 row 데이터 checkbox 셋팅
3. 1.에서 checkbox를 선택하면 데이터도 전체 체크
4. 2에 checkbox 값 변경입니다.

아래는 제가 테스트해본 소스 입니다. const strGrid = new tui.Grid({ el: document.getElementById(gridElementId), bodyHeight: strBodyHeight, columns: { header: '조회여부', type: 'checkbox', name: 'inqYn', validation: { required: true }, editor: 'checkbox' }, //editingEvent : 'click', treeColumnOptions: { name: 'menuNm', // 트리 구조를 표시할 열 useCascadingCheckbox: true, useIcon: true // 아이콘 사용 여부 } });

[HIMZ5221]

[HIMZ5221]

customHeader 를 자유롭게 커스텀 해보시길 바랍니다. CustomRenderer 도 정의하셔야 합니다.

header    : {
            complexColumns : [
                {
                    header     : '헤더',
                    name       : '헤더',
                    childNames : ['select']
                },
            ]
        },
        columns   : [
            {
                header: 'Select',
                name: 'select',
                renderer: {
                    type: CustomRenderer
                },
                customHeader: (() => {
                    const headerCheckbox = document.createElement('input');
                    headerCheckbox.type = 'checkbox';
                    headerCheckbox.addEventListener('change', (e) => {
                        const checked = e.target.checked;
                        grid2.getData().forEach((row, index) => {
                            grid2.setValue(index, 'select', checked);
                        });
                    });
                    return headerCheckbox;
                })()
            },
]