{/* Do not edit this file. It is automatically generated by API Documenter. */}


## CellLayoutGroupItem

Group Layout Information Model

**Signature:**

```typescript
export interface CellLayoutGroupItem extends CellLayoutItem
```
**Extends:** [CellLayoutItem](/refs/Interface/CellLayoutItem)

## Remarks

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

Inherits [CellLayoutItem](/refs/Interface/CellLayoutItem).

\[Superclass\]

[CellLayoutItem](/refs/Interface/CellLayoutItem)

## Example


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

## Properties

| Property | Type | Description |
| --- | --- | --- |
| [childColumnMovable](/refs/Interface/CellLayoutGroupItem#childcolumnmovable) | boolean | Whether to move the sub-layout |
| [direction](/refs/Interface/CellLayoutGroupItem#direction) | [ColumnLayoutDirection](/refs/realgrid#columnlayoutdirection) | Cell placement direction |
| [expandable](/refs/Interface/CellLayoutGroupItem#expandable) | boolean | Whether to expand child layout |
| [expanded](/refs/Interface/CellLayoutGroupItem#expanded) | boolean | Layout Extension Status |
| [header](/refs/Interface/CellLayoutGroupItem#header) | [CellLayoutGroupHeader](/refs/Interface/CellLayoutGroupHeader) \| string \| boolean | About header layout settings |
| [hideChildHeaders](/refs/Interface/CellLayoutGroupItem#hidechildheaders) | boolean | Whether to hide the header of the sub-layout |
| [items](/refs/Interface/CellLayoutGroupItem#items) | ([LayoutItem](/refs/realgrid#layoutitem) \| number \| string)\[\] | Sub-layout items |
| [movable](/refs/Interface/CellLayoutGroupItem#movable) | boolean | Availability |
| [resizable](/refs/Interface/CellLayoutGroupItem#resizable) | boolean | Width adjustable |
| [tiedColumn](/refs/Interface/CellLayoutGroupItem#tiedcolumn) | string | When [CellLayoutGroupItem.hideChildHeaders](/refs/Interface/CellLayoutGroupItem#hidechildheaders){/* */} is `true`{/* */}, specifies the column to be displayed instead of the group header. |

## Methods

| Method | Type | Description |
| --- | --- | --- |
| [addLayout(source, index)](/refs/Interface/CellLayoutGroupItem#addlayout) | addLayout?(source: [ConfigObject](/refs/realgrid#configobject) \| string, index?: number): [CellLayoutItem](/refs/Interface/CellLayoutItem){/* */}; | Add a sub-layout or column. |
| [removeLayout(layout)](/refs/Interface/CellLayoutGroupItem#removelayout) | removeLayout?(layout: [LayoutItem](/refs/realgrid#layoutitem) \| string): void; | Remove child layout. |

## Properties Desc

### childColumnMovable

Whether to move the sub-layout

`Type` - boolean

<hr/>

### direction

Cell placement direction

`Type` - [ColumnLayoutDirection](/refs/realgrid#columnlayoutdirection)

<hr/>

### expandable

Whether to expand child layout

`Type` - boolean

**Remarks:**

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

**Example:**


```js
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"}
 ]
}, { ....
}, { ....
}]
```

<hr/>

### expanded

Layout Extension Status

`Type` - boolean

**Remarks:**

If the expansion state of the layout is `true`{/* */}, then [CellLayoutItem.groupShowMode](/refs/Interface/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.

<hr/>

### header

Header layout settings information

`Type` - [CellLayoutGroupHeader](/refs/Interface/CellLayoutGroupHeader) \| string \| boolean

**Remarks:**

It can be assigned to the [text](/refs/Interface/CellLayoutHeader#text) or [visible](/refs/Interface/CellLayoutHeader#visible) property as `string` or `boolean`.

**Example:**


```js
 ...
 header: {
    text: 'group1',
    visible: true
 },
 ...

 ...
 header: false;
 ...

 ...
 header: 'group3',
 ...
```

<hr/>

### hideChildHeaders

Whether to hide the header of the sub-layout

`Type` - boolean

<hr/>

### items

Sub-layout items

`Type` - ([LayoutItem](/refs/realgrid#layoutitem) \| number \| string)\[\]

**Remarks:**

When input in string form, [CellLayoutColumnItem](/refs/Interface/CellLayoutColumnItem) is created with the corresponding value set to [column](/refs/Interface/CellLayoutColumnItem#column).

When entered in number form, [CellLayoutColumnItem](/refs/Interface/CellLayoutColumnItem) is created with the value set to [width](/refs/Interface/CellLayoutItem#width).

<hr/>

### movable

Is it possible to move?

`Type` - boolean

<hr/>

### resizable

Width adjustable?

`Type` - boolean

<hr/>

### tiedColumn

When [CellLayoutGroupItem.hideChildHeaders](/refs/Interface/CellLayoutGroupItem#hidechildheaders){/* */} is `true`{/* */}, specifies the column to be displayed instead of the group header.

`Type` - string

<hr/>

## Method Desc

### addLayout

Add a sub-layout or column.

**\[Parameter list\]**

`source` - [ConfigObject](/refs/realgrid#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](/refs/Interface/CellLayoutItem)

**Remarks:**

It cannot be used if the layout is not set in the grid. Use [GridBase.setColumnLayout()](/refs/Class/GridBase#setcolumnlayout){/* */} to set the layout. To add to the root of the grid, use [GridBase.addLayout()](/refs/Class/GridBase#addlayout){/* */}.

**Example:**


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

<hr/>

### removeLayout

Remove child layout.

**\[Parameter List\]**

`layout` - [LayoutItem](/refs/realgrid#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()](/refs/Class/GridBase#removelayout){/* */}.

<hr/>