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

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

Methods

MethodTypeDescription
addLayout(source, index)addLayout?(source: ConfigObject | string, index?: number): CellLayoutItem;하위 layout또는 컬럼을 추가한다.
removeLayout(layout)removeLayout?(layout: LayoutItem | string): void;하위 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.groupShowModeexpand이거나 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.hideChildHeaderstrue일때 그룹헤더 대신 표시할 컬럼을 지정한다.


Methods Desc

addLayout

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

[매개변수 목록]

source - ConfigObject | string

컬럼명 또는 추가될 layout의 설정

index - number

삽입될 위치 생략하면 마지막에 추가된다.

[반환값] - CellLayoutItem

Remarks:

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

Example:

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

removeLayout

하위 layout을 제거한다.

[매개변수 목록]

layout - LayoutItem | string

제거할 layout의 이름 또는 layout객체

[반환값] - void

Remarks:

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