컬럼 만들기

GridBase.setColumns() 함수로 컬럼 생성. 이 때 등록되는 컬럼의 name은 undefined이거나 유일해야 합니다.

var columns = [{
    "name": "column1",
    "fieldName": "Field1",
    "header": {"text": "Column 1"}
    "width": 90
  },{
    "name": "column2",
    "fieldName": "Field2",
    "header": {"text": "Column 2"}
    "width": 90
  },{
    "name": "column3",
    "fieldName": "Field3",
    "header": {"text": "Column 3"}
    "width": 90
  },{
    "name": "column4",
    "fieldName": "Field4",
    "header": {"text": "Column 4"}
    "width": 90
  },{
    "name": "column5",
    "fieldName": "Field5",
    "header": {"text": "Column 5"}
    "width": 90
  },{
    "name": "column6",
    "fieldName": "Field3",
    "header": {"text": "Column 6"}
    "width": 90
  }];
 
  gridView.setColumns(columns);

GridBase.setColumns() 함수는 기존 컬럼들을 지우고 매개변수로 전달되는 컬럼 정보로 새로운 컬럼들을 추가합니다. 예제에서 column3와 column6 컬럼은 동일한 Field3 필드를 표시하고 있습니다. 이와같이 하나의 데이터 필드를 여러 컬럼이 동시에 참조하여 각각 다른 방식으로 표시할 수 있습니다.

GridBase.columnByName() 함수는 주어진 이름에 해당하는 컬럼 객체를 반환합니다.

var column = gridView.columnByName("column3");
alert(JSON.stringify(column));

결과가 하나로 예상 되는경우는 GridBase.columnByField()함수를 사용합니다.

동적 컬럼(필드) 추가

그리드에서 동적으로 새로운 필드와 컬럼을 추가하는 경우는 흔치 않을 것 같습니다. 보통의 경우 업무 데이터 구조에서 사용자가 필드를 추가하거나 삭제하는 경우는 거의 없겠지만, 그렇다고 전혀 예상할 수 없는 일만은 아닙니다.

만약 이런 경우에는 어떤 방식으로 처리해야 할지 고민하며 데모를 작성해 보도록 하겠습니다.

dataProvider.setFields 와
gridView.setColumns() 함수를 이용해

필드와 컬럼의 구조 전체를 설정할 수도 있지만

dataProvider.addField 와
gridView.addColumn() 함수를 이용해

필드와 컬럼을 각각 추가 할 수도 있습니다.

provider.addField({
  fieldName: "TEXT_Column",
  valueType: "text",
});
 
viewer.addColumn({
  name: "TEXT_Column",
  fieldName: "TEXT_Column",
  width: 150,
  header: {
    text: "TEXT Column",
  },
  editor: { type: "line" },
});

Place Holder 컬럼 속성 동적 변경하기{visible, editable}