컬럼 레이아웃(컬럼 그룹핑)
그리드의 setColumns() 호출로 컬럼 셋을 설정한 후 실행 시간에 컬럼 셋을 변경하고 싶다면, 다시 setColumns()를 호출할 수 있습니다. 하지만, 최초 설정된 컬럼셋의 일부를 표시하거나, 그룹핑을 다시 하거나, 배치를 변경하고자 하는 경우, setColumns()를 다시 호출하지 않고 기존 컬럼 셋을 활용해서 컬럼들의 배치만을 재설정할 수 있습니다.
컬럼 그룹핑 시 각 컬럼간 끝나는 경계가 다른 경우는 SPAN 문서를 참조하시기 바랍니다.
layout1 = [
{
name: "companyGroup",
direction: "horizontal",
items: [
"Country",
"CompanyName"
],
header: {
text: "Company",
}
},
"OrderID",
"CustomerID",
"EmployeeID",
"OrderDate",
"Phone"
];
gridView.setColumnLayout(layout1);
layout2 = [
"OrderID",
{
column: "CustomerID",
width: 200
},
{
name: "companyGroup",
direction: "horizontal",
items: [
"Country",
"CompanyName"
],
header: {
text: "Company"
}
},
{
column: "EmployeeID"
},
"OrderDate",
"Phone"
];
gridView.setColumnLayout(layout2);
layout3 = [
"OrderID",
"CustomerID",
{
name: "companyGroup",
direction: "vertical",
width: 250,
items: [
"Country",
"CompanyName"
],
header: {
text: "Company"
}
},
"EmployeeID",
"OrderDate",
"Phone"
];
gridView.setColumnLayout(layout3);
layout4 = [
"OrderID",
"CustomerID",
{
name: "companyGroup",
direction: "vertical",
width: 250,
items: [
{
name: "countryGroup",
direction: "horizontal",
items: [
{
column: "Country",
width: 100
},
{
column: "Phone",
width: 100
}
],
header: {
text: "Country Group"
}
},
"CompanyName"
],
header: {
text: "Company Group"
}
},
"EmployeeID",
"OrderDate",
"Phone2"
];
gridView.setColumnLayout(layout4);
layout5 = [{
name: "Group1",
direction: "horizontal",
width: 200,
items: [{
name: "Group2",
direction: "vertical",
items: [{
column: "OrderID",
width: 100
}]
}, {
name: "Group3",
direction: "vertical",
items: [{
column: "CustomerID",
width: 100
}]
}]
}, {
name: "Group4",
direction: "vertical",
width: 100,
items: [{
column: "Country"
}]
},
"OrderDate",
"EmployeeID",
"Phone"
];
gridView.setColumnLayout(layout5);
layout6 = [{
name: "Group1",
direction: "horizontal",
width: 200,
items: [{
name: "Group2",
direction: "vertical",
items: [{
column: "OrderID",
width: 100
}]
}, {
name: "Group3",
direction: "vertical",
items: [{
column: "CustomerID",
width: 100
}]
}]
}, {
name: "Group4",
direction: "horizontal",
width: 200,
items: [{
name: "Group2",
direction: "vertical",
header: {visible: false},
items: [{
column: "Country",
width: 100
}]
}, {
name: "Group3",
direction: "vertical",
header: {visible: false},
items: [{
column: "OrderDate",
width: 100
}]
}]
},
"EmployeeID",
"Phone"
];
gridView.setColumnLayout(layout6);