kendo grid에서 2개의 header를 하나로 합치기

Kendo UI Grid에서 각 칼럼의 헤더를 완전히 숨기고, 그룹 헤더만 보이게 하려면 각 칼럼의 헤더를 숨기기 위한 CSS 스타일링을 추가해야 합니다. 이를 통해 헤더의 공간과 테두리도 제거할 수 있습니다.

아래 예제는 헤더를 CSS로 완전히 숨기는 방법입니다:

$("#grid").kendoGrid({
    dataSource: {
        data: [
            { column1: "Data 1", column2: "Data 2" },
            { column1: "Data 3", column2: "Data 4" },
        ],
        schema: {
            model: {
                fields: {
                    column1: { type: "string" },
                    column2: { type: "string" },
                }
            }
        },
        pageSize: 20
    },
    pageable: true,
    columns: [
        {
            title: "Grouped Header", // 그룹 헤더
            headerAttributes: { style: "text-align: center;" },
            columns: [
                { field: "column1", headerTemplate: "<div class='hidden-header'></div>" }, // 숨겨진 헤더
                { field: "column2", headerTemplate: "<div class='hidden-header'></div>" }  // 숨겨진 헤더
            ]
        }
    ]
});

// CSS로 개별 헤더 숨기기
<style>
    .hidden-header {
        display: none; /* 헤더 텍스트와 공간을 숨김 */
    }
    .k-header > .k-link { /* Kendo Grid의 헤더 링크 숨기기 */
        padding: 0; 
        border: none; 
    }
</style>

코드 설명

• headerTemplate: "<div class='hidden-header'></div>": 헤더 템플릿에 빈 <div> 요소를 추가하고, 이를 CSS로 숨깁니다.
• .hidden-header { display: none; }: CSS를 이용해 텍스트와 공간을 완전히 숨깁니다.
• .k-header > .k-link { padding: 0; border: none; }: Kendo Grid 헤더의 기본 패딩과 테두리를 제거하여 헤더가 시각적으로 완전히 사라지게 합니다.

이 방법을 사용하면 헤더가 완전히 사라져 공간을 차지하지 않으며, 그룹 헤더만 보이게 됩니다.