그룹컬럼 접기
그리드 그룹 컬럼을 그룹헤더 expand 아이콘을 사용해서 접고 펼칠 수 있습니다.
레이아웃 지정시 그룹컬럼의 접힘 여부를 expanded속성으로 지정할 수 있습니다.(예: group3 컬럼)
접혔을 때와 펼칠 때 보여질 컬럼을 groupShowMode 속성으로 지정할 수 있습니다.
그룹 컬럼 설정 시 groupShowMode 속성 설정으로 접고 펼칠 때 보이기 여부를 설정할 수 있습니다.
always - 항상 표시
expand - 펼쳐있을 표시
collapse - 접혀있을때 때 표시
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"}
]
},
]
}
];그룹컬럼 접기 이벤트
그룹 컬럼 접고 펼치기 시 이벤트(onLayoutCollapsed, onLayoutCollapsing, onLayoutExpanded, onLayoutExpanding)가 발생하게됩니다.
그룹 컬럼 접고 펼치기 시 발생하는 이벤트들을 확인하세요.
gridView.onLayoutCollapsed = function(grid, CellLayoutGroupItem){
alert("onLayoutCollapsed");
}
gridView. onLayoutCollapsing = function(grid, CellLayoutGroupItem){
alert("onLayoutCollapsing");
// false반환시 접히지 않는다.
// return false;
}
gridView.onLayoutExpanded = function(grid, CellLayoutGroupItem){
alert("onLayoutExpanded");
}
gridView.onLayoutExpanding = function(grid, CellLayoutGroupItem){
alert("onLayoutExpanding");
// false반환시 펼쳐지지 않는다.
// return false;
}