CellLayoutGroupItem
그룹 레이아웃 정보 모델
Signature:
export interface CellLayoutGroupItem extends CellLayoutItem
Extends: CellLayoutItem
Remarks
실제 컬럼이 아닌 화면 상에서 보이는 컬럼 묶음이다.
CellLayoutItem 을 상속한다.
[상위 클래스]
Example
{
name: "companyGroup",
items: [
{
column: "Country",
cellSpan: 3
},
20,20,
{
column: "CompanyName",
cellSpan: 3
},
20,20,
],
header: true
},
Properties
Property | Type | Description |
---|---|---|
childColumnMovable | boolean | 하위 레이아웃의 이동여부 |
direction | ColumnLayoutDirection | 셀 배치 방향 |
expandable | boolean | 하위 레이아웃확장 여부 |
expanded | boolean | 레이아웃 확장 상태 |
header | CellLayoutGroupHeader | string | boolean | 헤더의 레이아웃 설정 정보 |
hideChildHeaders | boolean | 하위 레이아웃의 헤더 숨김 여부 |
items | (LayoutItem | number | string)[] | 하위 레이아웃 아이템들 |
movable | boolean | 이동 가능 여부 |
resizable | boolean | 너비 조정 가능 여부 |
tiedColumn | string | CellLayoutGroupItem.hideChildHeaders가 true 일때 그룹헤더 대신 표시할 컬럼을 지정한다. |
Methods
Method | Type | Description |
---|---|---|
addLayout(source, index) | addLayout?(source: ConfigObject | string, index?: number): CellLayoutItem; | 하위 layout또는 컬럼을 추가한다. |
removeLayout(layout) | removeLayout?(layout: LayoutItem | string): void; | 하위 layout을 제거한다. |
Properties Desc
childColumnMovable
하위 레이아웃의 이동여부
Type
- boolean
direction
셀 배치 방향
Type
- ColumnLayoutDirection
expandable
하위 레이아웃확장 여부
Type
- boolean
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
레이아웃 확장 상태
Type
- boolean
Remarks:
레이아웃의 확장상태 true
이면 하위 레이아웃중 CellLayoutItem.groupShowMode가 expand
이거나 always
인 레이아웃만 표시된다. false
이면 collapse
이거나 always
인 레이아웃이 표시된다.
header
헤더의 레이아웃 설정 정보
Type
- CellLayoutGroupHeader | string | boolean
Remarks:
string
또는 boolean
으로 text 또는 visible 속성에 부여 가능하다.
Example:
...
header: {
text: 'group1',
visible: true
},
...
...
header: false,
...
...
header: 'group3',
...
hideChildHeaders
하위 레이아웃의 헤더 숨김 여부
Type
- boolean
items
하위 레이아웃 아이템들
Type
- (LayoutItem | number | string)[]
Remarks:
문자열 형태로 입력 시 해당 값을 column 으로 설정한 CellLayoutColumnItem 을 생성한다.
숫자 형태로 입력시 해당 값을 width 로 설정한 CellLayoutColumnItem 을 생성한다.
movable
이동 가능 여부
Type
- boolean
resizable
너비 조정 가능 여부
Type
- boolean
tiedColumn
CellLayoutGroupItem.hideChildHeaders가 true
일때 그룹헤더 대신 표시할 컬럼을 지정한다.
Type
- string
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()을 사용한다.