Collapse group column
Grid group columns can be collapsed and expanded using the group header expand icon. When specifying a layout, you can specify whether the group column is collapsed or not using the expanded property. (Example: group3 column) Columns to be shown when collapsed and expanded can be specified with the groupShowMode property.
When setting up a group column, you can set whether it is visible when folding or expanding by setting the groupShowMode property.
always - Always display
expand - display to expand
collapse - Displays when collapsed
var layout = [
{
name:"group1",
expandable: true;
items:[
{column: "KorName", groupShowMode:"always"},
{column: "Gender", groupShowMode:"expand"},
{column: "Age", groupShowMode:"collapse"},
{
name:"group2",
expandable: true;
groupShowMode: "expand",
items:[
{column: "Phone", groupShowMode: "always"},
{column: "ProductId", groupShowMode: "collapse"},
{column: "KorCountry", groupShowMode: "expand"},
{column: "OrderDate", groupShowMode: "expand"},
{column: "CardNumber", groupShowMode: "expand"},
{column: "Monetary", groupShowMode: "expand"},
{column: "StartDate", groupShowMode: "expand"},
{column: "EndDate", groupShowMode: "expand"},
]
},
]
},{
name:"group3",
expandable: true;
expanded: false,
items:[
{column: "SaveCost", groupShowMode:"always"},
{column: "SaveMaturity", groupShowMode:"expand"},
{column: "CurrentSave", groupShowMode:"collapse"},
{
name:"group4",
expandable: true;
groupShowMode: "expand",
items:[
{column: "Month", groupShowMode: "always"},
{column: "InterestRate", groupShowMode: "expand"}
]
},
]
}
];Group column collapse event
Events (onLayoutCollapsed, onLayoutCollapsing, onLayoutExpanded, onLayoutExpanding) occur when group columns are collapsed or expanded.
Check the events that occur when group columns are collapsed or expanded.
gridView.onLayoutCollapsed = function(grid, CellLayoutGroupItem){
alert("onLayoutCollapsed");
}
gridView. onLayoutCollapsing = function(grid, CellLayoutGroupItem){
alert("onLayoutCollapse");
// Does not collapse when returning false.
// return false;
}
gridView.onLayoutExpanded = function(grid, CellLayoutGroupItem){
alert("onLayoutExpanded");
}
gridView.onLayoutExpanding = function(grid, CellLayoutGroupItem){
alert("onLayoutExpanding");
// When false is returned, it is not expanded.
// return false;
}