RealGridJS에서 RealGrid2로의 전환

RealGrid2는 기본적으로 RealGridJS와 호환성을 유지하여 개발되었습니다.
기반 변경으로 인한 몇몇의 API제외한 모든 기능들을 그대로 사용하실 수 있습니다.

중요 변경 사항

RealGridJS는 Canvas기반의 그리드 였으나 RealGrid2는 DOM기반의 그리드로 개발되었습니다.
RealGridJS에서 사용하던 styles 관련 속성들은 CSS로 처리되게 변경 되었습니다.

그룹 컬럼을 더이상 사용하지 않습니다. 그룹 컬럼은 layout기능으로 대체되었습니다.
- 컬럼 레이아웃(컬럼 그룹핑)

변경 내용

필요 파일

RealGridJS

<script type="text/javascript" src="/scripts/realgridjs-lic.js"></script>
<script
  type="text/javascript"
  src="/scripts/realgridjs_eval.1.1.34.min.js"
></script>
<script type="text/javascript" src="/scripts/realgridjs-api.1.1.34.js"></script>
<script type="text/javascript" src="/scripts/jszip.min.js"></script>

RealGrid2

<link href="/public/realgrid.2.x.x/realgrid-style.css" rel="stylesheet" />
<script
  type="text/javascript"
  src="/public/realgrid.2.x.x/realgrid-lic.js"
></script>
<script
  type="text/javascript"
  src="/public/realgrid.2.x.x/realgrid.2.x.x.min.js"
></script>
<script
  type="text/javascript"
  src="/public/realgrid.2.x.x/libs/jszip.min.js"
></script>

그리드 생성

setRootContext()는 사용 안함.
RealGridJS -> RealGrid로 클래스명이 변경되었습니다.

RealGridJS

RealGridJS.setRootContext('/scripts/');
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView(container);
gridView.setDataSource(dataProvider);
 
dataProvider.setFields([
  {
    fieldName: 'KorName',
    dataType: 'text',
  },
]);
gridView.setColumns([
  {
    name: 'KorName',
    fieldName: 'KorName',
    type: 'data',
    width: '60',
    header: {
      text: '이름',
    },
  },
]);

RealGrid2

dataProvider = new RealGrid.LocalDataProvider();
gridView = new RealGrid.GridView(container);
gridView.setDataSource(dataProvider);
 
dataProvider.setFields([
  {
    fieldName: 'KorName',
    dataType: 'text',
  },
]);
gridView.setColumns([
  {
    name: 'KorName',
    fieldName: 'KorName',
    type: 'data',
    width: '60',
    header: {
      text: '이름',
    },
  },
]);

column의 포맷 지정 위치 변경, 스타일 지정방법

styles가 없어졌으므로 prefix, suffix, datatimeFormat, numberFormat이 상위레벨로 위치가 변경되었습니다.
셀 데이터의 textAlignment 및 색상 관련된 부분은 styleName 속성에서 CSS로 처리합니다.

텍스트렌더러를 참고하세요.

RealGridJS

var columns = [
  {
    name: 'Amount',
    fieldName: 'Amount',
    type: 'data',
    width: '50',
    styles: {
      numberFormat: '#,##0',
      textAlignment: 'far',
      suffix: ' 원',
      background: '#ffff0000',
    },
    header: {
      text: '금액',
    },
  },
  {
    name: 'StartDate',
    fieldName: 'StartDate',
    type: 'data',
    width: '100',
    styles: {
      datetimeFormat: 'yyyy-MM-dd',
    },
    header: {
      text: '최초납입일',
    },
  },
];

RealGrid2

.number-column {
  text-align: right;
  background: #ff0000;
}

var columns = [
  {
    name: 'Amount',
    fieldName: 'Amount',
    type: 'data',
    width: '50',
    numberFormat: '#,##0',
    suffix: ' 원',
    styleName: 'number-column',
    header: {
      text: '금액',
    },
  },
  {
    name: 'StartDate',
    fieldName: 'StartDate',
    type: 'data',
    width: '100',
    datetimeFormat: 'yyyy-MM-dd',
    header: {
      text: '최초납입일',
    },
  },
];

ColumnLayout(컬럼 그룹핑)

RealGridJS
컬럼 그룹핑 (opens in a new tab)를 참고하세요.

var columns = [
  {
    type: 'group',
    name: 'GroupIds',
    orientation: 'vertical',
    width: 90,
    columns: [
      {
        name: 'OrderID',
        fieldName: 'OrderID',
        width: 90,
        header: {
          text: 'Order',
        },
      },
      {
        name: 'CustomerID',
        fieldName: 'CustomerID',
        width: 90,
        header: {
          text: 'Customer ID',
        },
      },
    ],
  },
];
 
gridView.setColumns(columns);

RealGrid2
컬럼 레이아웃(컬럼 그룹핑)를 참고하세요.

var columns = [
  {
    name: 'OrderID',
    fieldName: 'OrderID',
    width: '90',
    header: {
      text: 'Order',
    },
  },
  {
    name: 'CustomerID',
    fieldName: 'CustomerID',
    width: '90',
    header: {
      text: 'Customer ID',
    },
  },
];
 
gridView.setColumns(columns);
 
var layout = [
  {
    name: 'GroupIds',
    direction: 'vertical',
    items: ['OrderID', 'CustomerID'],
  },
];
 
gridView.setColumnLayout(layout);

옵션

indicator의 명칭이 rowIndicator로 변경되었습니다.
panel의 명칭이 groupPanel로 변경되었습니다.
selectOptions이 displayOptions하위 속성으로 이동되었습니다.
footer의 경우 RealGrid2에서는 멀티풋터의 처리를 위해 footers가 새로 생겼습니다. 전체 footer의 설정은 footers를 통해 지정하고 각 개별 footer들은 footer에 지정합니다.
grid.options의 filterMode, sortMode, hideDeleteRows가 옵션으로 설정하는 것이 아닌 그리드 객체에 바로 설정하도록 변경되었습니다.

RealGridJS

gridView.setIndicator({ visible: false });
gridView.setPanel({ visible: false });
gridView.setSelectOptions({ style: 'block' });
gridView.setFooter({ visible: false });
 
gridView.setOptions({
  hideDeletedRows: true,
  sortMode: 'explicit',
  filterMode: 'explicit',
});

RealGrid2

gridView.rowIndicator.visible = false; //gridView.setRowIndicator({visible: false}); 사용가능
gridView.groupPanel.visible = false; //gridView.setGroupPanel({visible: false}); 사용가능
gridView.displayOptions.selectionStyle = 'block'; //gridView.setDisplayOptions({selectionStyle: "block"}); 사용가능
gridView.setFooters.visible = false;
 
gridView.hideDeletedRows = true;
gridView.sortMode = 'explicit';
gridView.filterMode = 'explicit';

행 그룹핑

행 그룹핑 시 group Footer의 스타일 및 expression 지정하는 위치가 변경되었습니다.

RealGridJS

var columns = [
  {
    name: 'Amount',
    fieldName: 'Amount',
    width: '50',
    header: {
      text: '금액',
    },
    footer: {
      expression: 'sum',
      groupExpression: 'sum',
    },
  },
];

RealGrid2

var columns = [
  {
    name: 'Amount',
    fieldName: 'Amount',
    width: '50',
    header: {
      text: '금액',
    },
    footer: {
      expression: 'sum',
    },
    groupFooter: {
      expression: 'sum',
    },
  },
];

Dynamic Styles

RealGrid2에서는 사용하기 어려웠던 criteria 방법은 지원하지 않고 사용하기에 직관적인 function() 타입을 지원합니다.

Column Dynamic Styles

지정한 하나의 컬럼에만 스타일을 동적으로 적용시키는 것을 컬럼 동적 스타일이라고 합니다.

RealGridJS
column.DynamicStyles (opens in a new tab)을 참고하세요.

var columns = [
  {
    name: 'col3',
    fieldName: 'field3',
    header: {
      text: '이름',
    },
    width: 80,
    dynamicStyles: function (grid, index, value) {
      var sum =
        grid.getValue(index.itemIndex, 'field4') +
        grid.getValue(index.itemIndex, 'field5') +
        grid.getValue(index.itemIndex, 'field6');
 
      var avg = sum / 3;
 
      if (avg >= 90) {
        return {
          background: '#ff0000',
        };
      }
    },
  },
];

RealGrid2
컬럼 동적 스타일을 참고하세요.

.red-column {
  background: #ff0000;
}

var columns = [
  {
    name: 'col3',
    fieldName: 'field3',
    header: {
      text: '이름',
    },
    width: 80,
    styleCallback: function (grid, dataCell) {
      var ret = {};
 
      var sum =
        grid.getValue(dataCell.index.itemIndex, 'field4') +
        grid.getValue(dataCell.index.itemIndex, 'field5') +
        grid.getValue(dataCell.index.itemIndex, 'field6');
 
      var avg = sum / 3;
 
      if (avg >= 90) {
        return (ret.styleName = 'red-column');
      }
    },
  },
];

Row(body) Dynamic Styles

특정 조건에 따라 각 행마다 스타일을 지정하는 것을 행 동적 스타일이라고 합니다.
RealGrid2에서는 styles 객체를 더 이상 사용하지 않기 때문에 setRowStyleCallback()을 사용하여 행 동적 스타일을 지정합니다.

RealGridJS
body.DynamicStyles (opens in a new tab)을 참고하세요.

gridView.setStyles({
  body: {
    dynamicStyles: function (grid, index) {
      var gender = grid.getValue(index.itemIndex, 'gender');
 
      if (gender == '배우') {
        return {
          background: '#FF00000',
        };
      }
    },
  },
});

RealGrid2
행 동적 스타일을 참고하세요.

.red-color {
  background: #ff0000;
}

gridView.setRowStyleCallback(function (grid, item, fixed) {
  var gender = grid.getValue(item.index, 'Gender');
 
  if (gender == '여') {
    return 'red-color';
  }
});

Cell Dynamic Styles

특정 조건에 따라 전체 데이터셀 영역에서 특정 셀에 스타일을 지정하는 것을 셀 동적 스타일이라고 합니다.
RealGrid2에서는 styles 객체를 더 이상 사용하지 않기 때문에 setCellStyleCallback()을 사용하여 셀 동적 스타일을 지정합니다.

RealGridJS
body.CellDynamicStyles (opens in a new tab)을 참고하세요.

gridView.setStyles({
  body:{
    cellDynamicStyles: function (grid, index, value) {
      var styles = {};
 
      if ((value == '여') or (value == '캐나다')) {
          styles.background = "#FF0000"
      }
 
      return styles;
    }
  }
});

RealGrid2

.red-color {
  background: #ff0000;
}

gridView.setCellStyleCallback(function(grid, dataCell) {
  var ret = {}
 
  if ((dataCell.value == '여') or (dataCell.value == '캐나다')){
    ret.styleName = 'red-color';
  }
 
  return ret;
})

렌더러

이미지 렌더러

RealGridJS

var columns = [
  {
    name: 'imageUrl',
    fieldName: 'imageUrl',
    type: 'data',
    width: '150',
    renderer: {
      type: 'image',
    },
    header: {
      text: 'Image URL',
    },
  },
];

RealGrid2

var columns = [
  {
    name: 'imageUrl',
    fieldName: 'imageUrl',
    type: 'data',
    width: '150',
    renderer: {
      type: 'image',
      imageField: 'imageUrl',
    },
    header: {
      text: 'Image URL',
    },
  },
];

아이콘 렌더러

RealGridJS

http://demo.realgrid.com/Renderer/IconCellRenderer/ (opens in a new tab)

var imgs = new RealGridJS.ImageList('images1', '/resource/image/icon/');
imgs.addUrls(['man.png', 'woman.png']);
 
gridView.registerImageList(imgs);
 
var columns = [
  {
    name: 'icon1',
    fieldName: 'Gender',
    width: '100',
    renderer: {
      type: 'icon',
    },
    header: {
      text: 'Icon Map',
    },
    imageList: imgs,
    styles: {
      textAlignment: 'near',
      iconLocation: 'left',
      iconAlignment: 'center',
      iconOffset: 4,
      iconPadding: 4,
    },
    dynamicStyles: [
      {
        criteria: "value='남'",
        styles: 'iconIndex=0',
      },
      {
        criteria: "value='여'",
        styles: 'iconIndex=1',
      },
    ],
  },
];

RealGrid2

https://docs.realgrid.com/guides/renderer/icon-renderer

var columns = [
  {
    name: 'icon1',
    fieldName: 'Gender',
    width: '100',
    renderer: {
      type: 'icon',
      iconMap: {
        남: '/resource/image/icon/man.png',
        여: '/resource/image/icon/woman.png',
      },
      iconHeight: 15,
      iconWidth: 10,
    },
    header: {
      text: 'Icon Map',
    },
  },
];

도형 렌더러

RealGridJS

http://demo.realgrid.com/Renderer/ShapeCellRenderer (opens in a new tab)

RealGrid2

https://docs.realgrid.com/guides/renderer/shape-renderer

링크 렌더러

RealGridJS

http://demo.realgrid.com/Renderer/LinkCellRenderer/ (opens in a new tab)

gridView.onLinkableCellClicked = function (grid, index, url) {
  window.open(url, '_newtab');
};
 
var columns = [
  {
    name: 'Address',
    fieldName: 'Address',
    width: '200',
    renderer: {
      type: 'link',
      url: 'https://www.google.com/maps/place/${Address}',
      requiredFields: 'Address',
      showUrl: true,
    },
    header: {
      text: '주소',
    },
    styleName: 'left-column',
  },
];

RealGrid2

https://docs.realgrid.com/guides/renderer/link-renderer

var columns = [
  {
    name: 'Address',
    fieldName: 'Address',
    width: '200',
    renderer: {
      type: 'link',
      urlCallback: function (grid, cell) {
        return 'https://www.google.com/maps/place/' + cell.value;
      },
      titleField: 'Address',
    },
    header: {
      text: '주소',
    },
    styleName: 'left-column',
  },
];

이미지 버튼 렌더러(멀티아이콘, 멀티버튼)

RealGridJS의 멀티아이콘 멀티버튼의 경우 커스텀 렌더러로 구현해야 합니다.

RealGridJS

http://demo.realgrid.com/Renderer/multiIconCellRenderer/ (opens in a new tab)

http://demo.realgrid.com/CellComponent/CellButton/ (opens in a new tab)

RealGrid2

https://docs.realgrid.com/guides/renderer/custom-renderer-img-buttons

클릭 이벤트

RealGridJS에서는 각 영역에 대한 클릭 이벤트들이 별도로 존재하였으나 RealGrid2에서는 많이 부분들이 통합되었습니다.
아래 링크에서 차이점을 확인하세요.

RealGridJS

http://demo.realgrid.com/Event/RegionEvents/ (opens in a new tab)

RealGrid2

https://docs.realgrid.com/guides/events/click-event (opens in a new tab)

컬럼 너비 동적 변경

RealGridJS

gridView.setColumnProperty('colName', 'displayWidth', 100);
 
var column = gridView.columnByName('colName');
column.displayWidth = 100;
gridView.setColumn(column);

RealGrid2

gridView.layoutByColumn('colName').cellWidth = 100;

API

RealGridJS	RealGrid2
setPanel(), getPanel()	setGroupPanel(), getGroupPanel()
setIndicator(), getIndicator()	setRowIndicator(), getRowIndicator()
setSelectOptions(`{style: "block"}`)	displayOptions.selectStyle = "block"
setFooter.count	setFooters() 추가
EdgeMark	displayOptions.showChangeMarker
fitRowHeightAll()	displayOptions.rowHeight = 0 변경
rowFocusOption, rowFocusVisible, rowFocusMask	제거, rowFocusType 통합
addCellStyle(), setCellStyle(), setCellStyles()	제거, styleCallback들을 사용하여 처리
getCellStyle(), getStyles(), getCellApplyStyles()	제거
clearCellStyles()	제거
renderer.type = "imageButton"	renderer.type = "button"
addImageList, registerImageList	제거, renderer.iconMap 직접 경로 사용
checkValidateCells()	validateCells()
getInvalidCellList()	validateCells()
updateStrictRow()	제거, updateRow()를 사용하여 처리
subText	template으로 대체
field.calculateExpression, field.calculateCallback	field.valueExpression, field.valueCallback
column.displayRegExp, column.displayReplace	column.textFormat으로 통합
treeProvider.fillJsonData()	treeProvider.setObjectRows()
onContextMenuPopup(grid, x, y, elementName)	onContextMenuPopup(grid, x, y, clickData)
onContextMenuItemClicked(grid, data, index)	onContextMenuItemClicked(grid, item, clickData)
onMenuItemClicked(grid, data, index)	onMenuItemClicked(grid, item, clickData)
onGroupingChanged(grid)	onGrouped(grid)
onTopItemIndexChanged	onTopIndexChanged
onLinkableCellClicked	renderer.urlCallback 처리
addCellRenderers	제거, html renderer 또는 customRenderer 로 구현

※ 문서에 포함되지 않는 설명 및 기능은 게시판 또는 기술지원팀으로 문의해주시기 바랍니다.

RealGrid+에서 RealGridJS로의 전환 RealGrid2 Basic with JAVA Spring & MyBatis & MARIADB