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.
Loading RealGrid...
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.
Loading RealGrid...
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;
}