Column Group of SMART datagrid can gather the related columns together and place them in various forms. In the column group, one or more child columns can be specified through columns property, and the column group places them vertically or horizontally. At this point, the column group can also be included in the child columns, so a complex layout will become possible.
In this example, the data set and columns mentioned in Hello Grid example will be reused. In the code below, the columns with name as CustomerGroup and DateGroup are the column group, and if columns exist in the setting property, the grid will estimate them as the setting information of the column group and create ColumnGroup object. Also, you can specify type value as "group" to create the column group.
var columns = [
{
"name": "ProductName",
"fieldName": "product_name",
...
}, {
"name": "CustomerGroup",
"width": 200,
"layout": "vertical",
"columns": [
{
"name": "Country",
"fieldName": "country",
...
}, {
"name": "ChildGroup",
"layout": "horizontal",
"columns": [
{
"name": "CustomerId",
"fieldName": "customer_id",
...
}, {
"name": "CustomerName",
"fieldName": "customer_name",
...
}, {
"name": "Phone",
"fieldName": "phone",
...
}
]
}
}
]
}, {
"name": "Currency",
"fieldName": "currency",
...
}, {
"name": "DateGroup",
"type": "group",
"width": "200",
"columns": [
{
"name": "OrderDate",
"fieldName": "order_date",
...
}, {
"name": "ShipDate",
"fieldName": "ship_date",
...
}
]
}
];
The orientation of the column group can be changed through ColumnGroup.layout property. When click the "Change Layout" button above, the lorientation of *DateGroup" can be alternated vertically or horizontally.
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setLayout(column.layout() == 'vertical' ? 'horizontal' : 'vertical');
}
Sometimes, you should not display the headers or footers of the child columns. If click "Child Headers" button above, it will use ColumnGroup.childHeadersVisible property to alternately hide or display the child column headers of "DateGroup". If click "Child Footers" button, it will use ColumnGroup.childFootersVisible property to alternately hide or display the child column footers of "CustomerGroup".
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setChildHeadersVisible(!column.childHeadersVisible());
}
If use GridBase.visitAllColumns, visitColumns method, you can do the required operations in all columns which have done column grouping.
Get All Columns
Get Visible Columns