Column layout (column grouping)
If you want to change the column set at run time after setting the column set by calling setColumns() on the grid, you can call setColumns() again. However, if you want to display part of the initially set column set, regroup, or change the arrangement, you can reset the arrangement of the columns using the existing column set without calling setColumns() again.
If the ending boundary between each column is different when grouping columns, please refer to the SPAN (opens in a new tab) document.
''When changing the layout with the setColumnLayout() function, row grouping is canceled.'' ''After changing the layout, it must be reapplied using the groupBy() function.''
layout1 = [
{
name: "companyGroup",
direction: "horizontal",
items: [
"Country",
"CompanyName"
],
header: {
text: "Company",
}
},
"OrderID",
"CustomerID",
"EmployeeID",
"OrderDate",
"Phone"
];
gridView.setColumnLayout(layout1);Unlike the demo above, this demo displays only the group header by hiding the headers of columns within the 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);Merge group headers vertically
Headers are merged into the number of group header rows as many as the value set in 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);