밴드형 바디 레이아웃 기본

한 행의 데이터를 그룹형 헤더에서 정의한 구조대로 바디에도 표현합니다.

bodyLayoutMode: "band" 설정 그리고 원하는 크기의 rowHeight 을 설정하십시오. (데모는 rowHeight: 120 설정)

칼럼 레이아웃을 정의 할 때 그룹형 헤더는 dataField 설정만으로 해당 값을 표시하지 않습니다. (헤더의 그룹만 형성함)

bodyLayoutMode: "band" 설정과 그룹형 헤더 칼럼에 dataField: "team", bodyCell: true를 지정하면 소속(team) 값도 칼럼 레이아웃 구조와 동일하게 바디에 표시됩니다.

// 밴드형 바디를 활성화합니다.
const gridProps = {     
    bodyLayoutMode: "band", // 밴드형 바디 레이아웃 설정
    rowHeight: 120, // 행 높이 지정. (밴드형에 맞게 지정) 
};

// bodyCell: true인 소속과 직급도 하위 셀 위에 표시됩니다.
const columnLayout = [{
    headerText: "소속", dataField: "team", bodyCell: true // 바디에 출력,
    children: [
        { headerText: "이름", dataField: "name" },
        {
            headerText: "직급", dataField: "position", bodyCell: true // 바디에 출력,
            children: [
                { headerText: "나이", dataField: "age" },
                { headerText: "생년월일", dataField: "birth" }
            ]
        }
    ]
}];

밴드형에서 체크를 해제하면 해당 상위 바디 셀만 숨깁니다. 전체 칼럼 보기에서는 bodyCell 설정과 관계없이 표시합니다.

setProp()으로 bodyLayoutMode를 바꾸고 refresh()로 적용합니다. 행 높이는 별도로 설정합니다.