RealGrid2 API
Interface
CellLayoutGroupItem

CellLayoutGroupItem

그룹 레이아웃 정보 모델

Signature:

export interface CellLayoutGroupItem extends CellLayoutItem

Extends: CellLayoutItem

Remarks

실제 컬럼이 아닌 화면 상에서 보이는 컬럼 묶음이다.

CellLayoutItem 을 상속한다.

[상위 클래스]

CellLayoutItem

Example

{
    name: "companyGroup",
    items: [
        {
            column: "Country",
            cellSpan: 3
        },
        20,20,
        {
            column: "CompanyName",
            cellSpan: 3
        },
        20,20,
    ],
    header: true
},

Properties

PropertyModifiersTypeDescription
childColumnMovableboolean하위 레이아웃의 이동여부
directionColumnLayoutDirection셀 배치 방향
expandableboolean하위 레이아웃확장 여부
expandedboolean레이아웃 확장 상태
headerCellLayoutGroupHeader | string | boolean헤더의 레이아웃 설정 정보
hideChildHeadersboolean하위 레이아웃의 헤더 숨김 여부
items(LayoutItem | number | string)[]하위 레이아웃 아이템들
movableboolean이동 가능 여부
resizableboolean너비 조정 가능 여부
tiedColumnstringCellLayoutGroupItem.hideChildHeaders가 true일때 그룹헤더 대신 표시할 컬럼을 지정한다.

Methods

MethodDescription
addLayout(source, index)하위 layout또는 컬럼을 추가한다.
removeLayout(layout)하위 layout을 제거한다.

Properties Desc

childColumnMovable

하위 레이아웃의 이동여부

direction

셀 배치 방향

expandable

하위 레이아웃확장 여부

Remarks:

하위 레이아웃을 접거나 펼쳐서 일부 레이아웃만 보이도록 한다.

Example:

var layout = [ {
     name: "group0",
     expandable: true,
     expanded: true,
     header:{text:"2018년도"}
     items:[{column: "합계", groupShowMode: "always"},
         {column: "1분기", groupShowMode: "expand"},
         {column: "2분기", groupShowMode: "expand"},
         {column: "3분기", groupShowMode: "expand"},
         {column: "4분기", groupShowMode: "expand"}
     ]
}, { ....
}, { ....
}]

expanded

레이아웃 확장 상태

Remarks:

레이아웃의 확장상태 true이면 하위 레이아웃중 CellLayoutItem.groupShowMode가 expand이거나 always인 레이아웃만 표시된다. false이면 collapse이거나 always인 레이아웃이 표시된다.

header

헤더의 레이아웃 설정 정보

Remarks:

string 또는 boolean 으로 text 또는 visible 속성에 부여 가능하다.

Example:

     ...
             header: {
                 text: 'group1',
                 visible: true
             },
     ...
 
    ...
             header: false,
     ...
 
    ...
             header: 'group3',
     ...

hideChildHeaders

하위 레이아웃의 헤더 숨김 여부

items

하위 레이아웃 아이템들

Remarks:

문자열 형태로 입력 시 해당 값을 column 으로 설정한 CellLayoutColumnItem 을 생성한다.

숫자 형태로 입력시 해당 값을 width 로 설정한 CellLayoutColumnItem 을 생성한다.

movable

이동 가능 여부

resizable

너비 조정 가능 여부

tiedColumn

CellLayoutGroupItem.hideChildHeaders가 true일때 그룹헤더 대신 표시할 컬럼을 지정한다.

Methods Desc

addLayout

하위 layout또는 컬럼을 추가한다.

Remarks:

그리드에 layout이 설정되어있지 않으면 사용할수 없다 GridBase.setColumnLayout()을 이용해서 layout을 설정후 사용한다. 그리드의 root에 추가하기 위해서는 GridBase.addLayout()을 사용한다.

Example:

const layout = gridView.layoutByName("group0");
layout.addLayout("column");

removeLayout

하위 layout을 제거한다.

Remarks:

그리드에 layout이 설정되어있지 않으면 사용할수 없다. 그리드 root의 layout을 제거하기 위해서는 GridBase.removeLayout()을 사용한다.

CellLayoutGroupHeaderCellLayoutHeader