SMART datagrid v1.4 > Examples
SMART datagrid 컬럼그룹은 관련된 컬럼들을 한데 모아서 다양한 형태로 배치할 수 있다. 컬럼그룹에는 하나 이상의 자식 컬럼들을 columns 속성을 통해 지정할 수 있는데, 컬럼그룹은 자식 컬럼들을 수평 혹은 수직으로 배치한다. 이 때, 컬럼그룹 또한 자식 컬럼으로 포함될 수 있으므로 복잡한 형태의 레이아웃이 가능해 진다.
이 번 예제에서는 Hello Grid 예제에서 다뤘던 데이터셋과 컬럼들을 다시 활용한다. 아래 코드에서 name이 CustomerGroup, DateGroup인 컬럼이 컬럼그룹인데, 설정 속성 중 columns가 존재하면 그리드가 컬럼그룹 설정 정보로 판단하고 ColumnGroup 객체를 생성한다. 또, type 값을 "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",
...
}
]
}
];
컬럼그룹의 배치 방향은 ColumnGroup.layout 속성으로 변경할 수 있다. 위 "Change Layout" 버튼을 클릭하면 *DateGroup"의 배치 방향을 수평, 수직으로 번갈아 변경한다.
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setLayout(column.layout() == 'vertical' ? 'horizontal' : 'vertical');
}
자식 컬럼들의 헤더나 푸터들을 표시하지 말아야 할 경우도 있다. 위 "Child Headers" 버튼을 클릭하면 ColumnGroup.childHeadersVisible 속성을 이용해서 "DateGroup"의 자식 컬럼 헤더들을 번갈아서 감추거나 표시한다. 또, "Child Footers" 버튼을 클릭하면 ColumnGroup.childFootersVisible 속성으로 "CustomerGroup"의 자식 컬럼 푸터들을 번갈아서 감추거나 표시한다.
var column = grdMain.columnByName('DateGroup');
if (column) {
column.setChildHeadersVisible(!column.childHeadersVisible());
}
GridBase.visitAllColumns, visitColumns 메소드를 이용하면 컬럼 그룹핑된 모든 컬럼에 대해 필요한 일을 할 수 있다.
모든 컬럼들 가져오기
표시 중인 컬럼들 가져오기