컬럼 레이아웃(컬럼 그룹핑)
그리드의 setColumns() 호출로 컬럼 셋을 설정한 후 실행 시간에 컬럼 셋을 변경하고 싶다면, 다시 setColumns()를 호출할 수 있습니다. 하지만, 최초 설정된 컬럼셋의 일부를 표시하거나, 그룹핑을 다시 하거나, 배치를 변경하고자 하는 경우, setColumns()를 다시 호출하지 않고 기존 컬럼 셋을 활용해서 컬럼들의 배치만을 재설정할 수 있습니다.
컬럼 그룹핑 시 각 컬럼간 끝나는 경계가 다른 경우는 SPAN (opens in a new tab) 문서를 참조하시기 바랍니다.
컬럼 레이아웃은 보이지 않는 컬럼도 visible: false로 지정해서 레이아웃을 구성해야 합니다.
속성 설정을 생략할 경우에는 컬럼명만 문자형으로 나열하면 됩니다.
''setColumnLayout() 함수로 레이아웃 변경 시 행 그룹핑은 해제됩니다.''
''레이아웃 변경 후 groupBy() 함수로 재적용 해야합니다.''
layout1 = [
{
name: "companyGroup",
direction: "horizontal",
//hideChildHeaders: true,
items: [
"Country",
"CompanyName"
],
header: {
text: "Company",
}
},
{column: "UnitPrice2", visible: false},//컬럼 속성 적용
{column: "Phone2", visible: false},
{column: "ProductName", visible: false},
{column: "QuantityPerUnit", visible: false},
{column: "Quantity", visible: false},
{column: "UnitPrice", visible: false},
{column: "Country2", visible: false},
"OrderID", //컬럼 속성 생략시 기본값 적용
"CustomerID",
"EmployeeID",
"OrderDate",
"Phone"
];
gridView.setColumnLayout(layout1);
function showColumns() {
gridView.layoutByName("Quantity").visible = true;
gridView.layoutByName("UnitPrice").visible = true;
gridView.layoutByName("QuantityPerUnit").visible = true;
}
function hideColumns() {
gridView.layoutByName("Quantity").visible = false;
gridView.layoutByName("UnitPrice").visible = false;
gridView.layoutByName("QuantityPerUnit").visible = false;
}위의 데모와 달리 Group 안에 속한 컬럼들의 헤더를 숨겨 Group 헤더만 표시한 데모입니다.
hideChildLayout = [
{
name: "companyGroup",
direction: "horizontal",
hideChildHeaders: true, //<<-------
items: [
"Country",
"CompanyName"
],
header: {
text: "Company",
}
},
"OrderID",
"CustomerID",
"EmployeeID",
"OrderDate",
"Phone"
]
gridView.setColumnLayout(hideChildLayout);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);layout = [
{
name: 'Group1',
direction: 'horizontal',
items: [
{
name: 'OrderID',
items: ['OrderID'],
header: { visible: false },
},
{
name: 'CustomerID',
items: ['CustomerID'],
header: { visible: false },
},
],
header: { text: 'Group1' },
},
{
name: 'Group2',
direction: 'horizontal',
items: [
{
name: 'Group3',
items: ['Country', 'OrderDate'],
},
{
name: 'Group4',
items: ['EmployeeID','Phone']
}
],
header: {text:"Group2"}
},
]
gridView.setColumnLayout(layout);그룹헤더 세로 병합
그룹헤더의 행 수중에 header.rows로 설정된 값만큼 헤더가 병합됩니다.
layout = [
{
name: 'Group1',
direction: 'horizontal',
items: [
{
name: 'OrderID',
items: ['OrderID'],
header: { visible: false },
},
{
name: 'CustomerID',
items: ['CustomerID'],
header: { visible: false },
},
],
header: { text: 'Group1', rows: 2},
},
{
name: 'Group2',
direction: 'horizontal',
items: [
{
name: 'Group3',
items: ['Country', 'OrderDate'],
},
{
name: 'Group4',
items: ['EmployeeID','Phone']
}
],
header: {text:"Group2"}
},
]
gridView.setColumnLayout(layout);