컬럼 레이아웃(컬럼 그룹핑)

그리드의 setColumns() 호출로 컬럼 셋을 설정한 후 실행 시간에 컬럼 셋을 변경하고 싶다면, 다시 setColumns()를 호출할 수 있습니다. 하지만, 최초 설정된 컬럼셋의 일부를 표시하거나, 그룹핑을 다시 하거나, 배치를 변경하고자 하는 경우, setColumns()를 다시 호출하지 않고 기존 컬럼 셋을 활용해서 컬럼들의 배치만을 재설정할 수 있습니다.

컬럼 그룹핑 시 각 컬럼간 끝나는 경계가 다른 경우는 SPAN 문서를 참조하시기 바랍니다.

''setColumnLayout() 함수로 레이아웃 변경 시 행 그룹핑은 해제됩니다.''
''레이아웃 변경 후 groupBy() 함수로 재적용 해야합니다.''

layout1 = [
  {
    name: "companyGroup",
    direction: "horizontal",
    items: [
      "Country",
      "CompanyName"
    ],
    header: {
      text: "Company",
    }
  }, 
  "OrderID",
  "CustomerID",
  "EmployeeID",
  "OrderDate",
  "Phone"
];

gridView.setColumnLayout(layout1);

위의 데모와 달리 Group 안에 속한 컬럼들의 헤더를 숨겨 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);