컬럼 레이아웃
그리드의 setColumns() 호출로 컬럼 셋을 설정한 후 실행 시간에 컬럼 셋을 변경하고 싶다면, 다시 setColumns()를 호출할 수 있습니다. 하지만, 최초 설정된 컬럼셋의 일부를 표시하거나, 그룹핑을 다시 하거나, 배치를 변경하고자 하는 경우, setColumns()를 다시 호출하지 않고 기존 컬럼 셋을 활용해서 컬럼들의 배치만을 재설정할 수 있습니다.
linearizeColumns() 함수를 호출해서 컬럼 그룹들을 모두 제거하고 데이터 값을 표시하는 컬럼들만 일렬로 배치합니다.
1
2
3
gridView.restoreColumns();
gridView.linearizeColumns();
gridView.setFocus();
다시 원래대로 복원할 수도 있습니다.
1
2
gridView.restoreColumns();
gridView.setFocus();
setColumnLayout() 함수를 통해 컬럼 layout을 최초 설정한 컬럼들의 이름들로 지정할 수 있습니다.
1
2
3
4
5
6
var layout = [
"OrderID", "EmployeeID", "OrderDate", "CompanyName", "CustomerID"
];
gridView.setColumnLayout(layout);
gridView.setFocus();
registerColumnLayouts() 함수로 실행 시간에 지정할 컬럼 layout들을 미리 저장한 후, setColumnLayout() 함수로 layout 이름을 지정해서 변경할 수 있습니다.
layout1, layout2로 컬럼 레이아웃을 만들어 봅니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
var layouts = [{
name: "layout1",
columns: [
"OrderID", "EmployeeID", "OrderDate"
]
}, {
name: "layout2",
columns: [{
"header": "Order",
"orientation": "vertical",
"width": 150,
"columns": [
{
"header": "IDs",
"orientation": "horizontal",
"width": 200,
"columns": [
"OrderID",
"EmployeeID"
]
},
"OrderDate"
]
}]
}];
gridView.registerColumnLayouts(layouts);
registerColumnLayouts()으로 설정한 컬럼 레이아웃으로 설정하기.
1
2
3
gridView.restoreColumns();
gridView.setColumnLayout("layout1");
gridView.setFocus();
1
2
3
gridView.restoreColumns();
gridView.setColumnLayout("layout2");
gridView.setFocus();
saveColumnLayout 함수로 현재 상태를 저장한 후, 저장된 값을 가져와서 setColumnLayout 함수로 layout을 변경할 수 있습니다.
1
var dispCols = gridView.saveColumnLayout();
1
gridView.setColumnLayout(dispCols);