Celllayoutgroupitem

CellLayoutGroupItem

Group Layout Information Model

Signature:

export interface CellLayoutGroupItem extends CellLayoutItem

Extends: CellLayoutItem

Remarks

It is not an actual column, but a group of columns visible on the screen.

Inherits CellLayoutItem.

[Superclass]

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	Whether to move the sub-layout
direction	ColumnLayoutDirection	Cell placement direction
expandable	boolean	Whether to expand child layout
expanded	boolean	Layout Extension Status
header	CellLayoutGroupHeader \| string \| boolean	About header layout settings
hideChildHeaders	boolean	Whether to hide the header of the sub-layout
items	(LayoutItem \| number \| string)[]	Sub-layout items
movable	boolean	Availability
resizable	boolean	Width adjustable
tiedColumn	string	When CellLayoutGroupItem.hideChildHeaders is `true`, specifies the column to be displayed instead of the group header.

Methods

Method	Type	Description
addLayout(source, index)	addLayout?(source: ConfigObject \| string, index?: number): CellLayoutItem;	Add a sub-layout or column.
removeLayout(layout)	removeLayout?(layout: LayoutItem \| string): void;	Remove child layout.

Properties Desc

childColumnMovable

Whether to move the sub-layout

Type - boolean

direction

Cell placement direction

Type - ColumnLayoutDirection

expandable

Whether to expand child layout

Type - boolean

Remarks:

Collapse or expand sub-layouts so that only part of the layout is visible.

Example:

var layout = [ {
 name: "group0",
 expandable: true;
 expanded: true,
 header:{text:"2018"}
 items:[{column: "Total", groupShowMode: "always"},
 {column: "Q1", groupShowMode: "expand"},
 {column: "Q2", groupShowMode: "expand"},
 {column: "Q3", groupShowMode: "expand"},
 {column: "Q4", groupShowMode: "expand"}
 ]
}, { ....
}, { ....
}]

expanded

Layout Extension Status

Type - boolean

Remarks:

If the expansion state of the layout is true, then CellLayoutItem.groupShowMode among the child layouts is expand or Only layouts that are always are displayed. If false, a layout of collapse or always is displayed.

header

Header layout settings information

Type - CellLayoutGroupHeader | string | boolean

Remarks:

It can be assigned to the text or visible property as string or boolean.

Example:

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

hideChildHeaders

Whether to hide the header of the sub-layout

Type - boolean

items

Sub-layout items

Type - (LayoutItem | number | string)[]

Remarks:

When input in string form, CellLayoutColumnItem is created with the corresponding value set to column.

When entered in number form, CellLayoutColumnItem is created with the value set to width.

movable

Is it possible to move?

Type - boolean

resizable

Width adjustable?

Type - boolean

tiedColumn

When CellLayoutGroupItem.hideChildHeaders is true, specifies the column to be displayed instead of the group header.

Type - string

Method Desc

addLayout

Add a sub-layout or column.

[Parameter list]

source - ConfigObject | string

Setting of column name or layout to be added

index - number

If the position to be inserted is omitted, it is added at the end.

[Return Value] - CellLayoutItem

Remarks:

It cannot be used if the layout is not set in the grid. Use GridBase.setColumnLayout() to set the layout. To add to the root of the grid, use GridBase.addLayout().

Example:

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

removeLayout

Remove child layout.

[Parameter List]

layout - LayoutItem | string

Name or layout object of the layout to be removed

[Return Value] - void

Remarks:

It cannot be used if layout is not set in the grid. To remove the layout of the grid root, use GridBase.removeLayout().

CellLayoutGroupHeader CellLayoutHeader