SPAN

기본적인 컬럼 그룹핑은 컬럼 레이아웃으로 구현할 수 있습니다. 그러나 아래 데모와 같이 각 컬럼간 끝나는 경계가 다른 경우는 약간 다른 방법이 필요 합니다.

구현 방법은 각 컬럼 그룹간 최소공배수를 구하고, 구한 최소 공배수를 컬럼 수에 맞게 나눠서 처리해야 합니다. 아래의 예제를 보면 첫번째 컬럼그룹의 컬럼수 2, 두번째 컬럼그룹의 컬럼수는 3 입니다. 2, 3의 최소 공배수는 6입니다. 그렇기에 첫번째 컬럼그룹의 컬럼수는 2, 그렇기에 첫번째 그룹의 각 컬럼은 3개의 cellSpan을 가지게 됩니다.

var layout_Org = [
  {
    name: "companyGroup",
    direction: "vertical",
    items: [
        {
            
            items: [
                {
                    column: "Country",
                    cellSpan: 3,
                    width: 50
                },
                50,50,
                {
                    column: "CompanyName",
                    cellSpan: 3,
                    width: 50
                },
                50,50,
            ],
            header: false
        },
        {
            items: [
                {
                    column: "CustomerID",
                    cellSpan: 2,
                    width: 50
                },
                50,
                {
                    column: "OrderDate", 
                    cellSpan: 2,
                    width: 50
                },
                50,
                {
                    column: "OrderID", 
                    cellSpan: 2,
                    width: 50
                },
                50,
            ],
            header: false
        }
    ]
	}
];
 
gridView.setColumnLayout(layout_Org);

이러한 레이아웃을 조금 편하게 만들수 있는 function()은 아래와 같습니다.

function getMultiLevelColumns (colNames) {
		"use strict";
 
		function leastCommonMultiple(arr) {
				var result = lcm(arr[0], arr[1]);
 
				for (var i = 2; i < arr.length; i++) {
						result = lcm(result, arr[i]);
				}
 
				return result;
		};
 
		function gcd(a, b) {
				while (b != 0) {
						var temp = a % b;
						a = b;
						b = temp;
				}
 
				return a;
		};
 
		function lcm(a, b) {
				return a * b / gcd(a, b);
		};
 
		//var arrLen = colNames.map(x => x.length); //각 배열의 길이
		var arrLen = colNames.map(function (x) { return x.length }); //각 배열의 길이
		var lcmValue = leastCommonMultiple(arrLen); //최소공배수 
 
		var parentGrpColObj = {}
		parentGrpColObj.direction = "vertical";
		parentGrpColObj.items = [];
		parentGrpColObj.header = { visible: false };
 
		for (var i = 0; i < colNames.length; i++) {
				var grpColObj = {};
				grpColObj.direction = "horizontal";
				grpColObj.items = [];
				grpColObj.header = {visible: false};
 
				for (var j = 0; j < colNames[i].length ; j++) {
						var cellSpan = lcmValue / colNames[i].length;;
						var column = {};
 
						column.column = colNames[i][j];
						column.cellSpan = cellSpan;
						column.width = 50;
 
						grpColObj.items.push(column);
						for (var k = 0; k < cellSpan - 1; k++) {
								grpColObj.items.push(50);
						}
				}
				parentGrpColObj.items.push(grpColObj);
		}
		
		return [parentGrpColObj];
}
 
//그룹별로 컬럼명을 array로 전달
var layout = getMultiLevelColumns([["Country", "CompanyName"], ["CustomerID", "OrderDate", "OrderID"]]);
gridView.setColumnLayout(layout);

컬럼너비 자동조절과 한줄로 보기

그리드안에 컬럼이 채워지고 남는 영역이 있는 경우 컬럼의 크기를 키워 빈 영역을 채울 수 있습니다. 자세한 내용은 컬럼 너비 자동 조정데모에서 확인하세요.
컬럼 레이아웃으로 구성된 그리드를 한 줄로 표시하고 싶은 경우 gridView.linearizeColumns()으로 간단하게 구현할 수 있습니다.

function fitStyle() {
  gridView.displayOptions.fitStyle = "even";
}
 
function linearizeColumns() {
  gridView.linearizeColumns();
}
 
function setColumnlayout() {
  gridView.setColumnLayout(layout);
}

필드와 컬럼 일괄 생성 행 상태에 따른 특정 컬럼 편집 제어