셀 병합

컬럼에 속한 셀들을 묶어서 표시할 수 있습니다.

셀 병합하기(Cell Merging)

mergeRule.criteria속성에 이전 행의 셀과 병합할 수식을 설정합니다.
컬럼 설정 정보를 확인해 보세요.

var columns = [{
    ...
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "성별",
      styleName: "orange-column"
    },
    mergeRule:{
      criteria: "value"
    }
    ...
}]

행들을 묶어서 표시하기

mergeRule.criteria속성에 설정한 조건에 따라 병합되는지 확인해보세요.

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "row div 3" });

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "row div 5" });

gridView.setColumnProperty("Gender", "mergeRule", { criteria: "value" });

선행컬럼을 참조 병합

셀 병합 시 특정 컬럼 값을 참조해서 병합할 수 있습니다. 아래 데모에서 각 버튼을 클릭하여 차이점을 확인하세요.

function btnMergeRule() {
  gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
  gridView.columnByName("Country").mergeRule = {criteria: "value"};
  gridView.columnByName("CustomerID").mergeRule = {criteria: "value"};
}
 
function btnPrevMergeRule() {
  gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
  gridView.columnByName("Country").mergeRule = {criteria: "values['OrderID'] + value"};
  gridView.columnByName("CustomerID").mergeRule = {criteria: "values['OrderID'] + values['Country'] + value"};
}

셀 병합 시 모든 선행 컬럼의 참조를 prevvalues를 사용해서 간략하게 지정할 수도 있습니다.

function btnPrevMergeRule() {
  gridView.columnByName("OrderID").mergeRule = {criteria: "value"};
  gridView.columnByName("Country").mergeRule = {criteria: "prevvalues + value"};
  gridView.columnByName("CustomerID").mergeRule = {criteria: "prevvalues + value"};
}

Object Type Field 병합

Object Type Field 병합시에는 그리드에 보여지는 값 기준으로 병합됩니다. 선행 참조시에도 동일하게 object값이 아닌 보여지는 값 기준으로 병합이 적용됩니다.

var columns = [
  {
    name: "Person",
    fieldName: "Person",
    objectKey: "Name",
    width: "100",
    header: {
      text: "이름"
    },
    mergeRule: "value"
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "성별"
    },
    mergeRule: "values['Person'] + value"
  },
  ...

팝업 메뉴 버튼 lookup 컬럼