# Conversion from RealGridJS to RealGrid2

RealGrid2 was developed primarily to maintain compatibility with RealGridJS.
All functions can be used as is, except for some APIs due to changes in the base.

## Important changes

RealGridJS was a Canvas-based grid, but RealGrid2 was developed as a DOM-based grid.
The styles-related properties used in RealGridJS have been changed to be handled by CSS.

- The group column is no longer used. The group column has been replaced by the layout function.
   - [Column layout (column grouping)](/guides/column/layout)

## Changes

---

### Required files

**RealGridJS**

```html
<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**

```html
<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>
```

---

### Create grid

- setRootContext() is not used.
- The class name has been changed from RealGridJS -> RealGrid.

**RealGridJS**

```js
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: 'name',
     },
   },
]);
```

**RealGrid2**

```js
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: 'name',
     },
   },
]);
```

---

### Changing the formatting position of the column and how to specify the style

- Since styles have disappeared, prefix, suffix, datatimeFormat, and numberFormat have been moved to a higher level.
- TextAlignment and color-related parts of cell data are processed with CSS in the styleName property.

Please refer to [Text Renderer](/guides/renderer/text-renderer).

**RealGridJS**

```js
var columns = [
   {
     name: 'Amount',
     fieldName: 'Amount',
     type: 'data',
     width: '50',
     styles: {
       numberFormat: '#,##0',
       textAlignment: 'far',
       suffix: 'circle',
       background: '#ffff0000',
     },
     header: {
       text: 'Amount',
     },
   },
   {
     name: 'StartDate',
     fieldName: 'StartDate',
     type: 'data',
     width: '100',
     styles: {
       datetimeFormat: 'yyyy-MM-dd',
     },
     header: {
       text: 'First payment date',
     },
   },
];
```

**RealGrid2**

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

```js
var columns = [
   {
     name: 'Amount',
     fieldName: 'Amount',
     type: 'data',
     width: '50',
     numberFormat: '#,##0',
     suffix: 'circle',
     styleName: 'number-column',
     header: {
       text: 'Amount',
     },
   },
   {
     name: 'StartDate',
     fieldName: 'StartDate',
     type: 'data',
     width: '100',
     datetimeFormat: 'yyyy-MM-dd',
     header: {
       text: 'First payment date',
     },
   },
];
```

---

### ColumnLayout (column grouping)

**RealGridJS**
Please refer to [Column Grouping](http://demo.realgrid.com/Columns/ColumnGrouping/).

```js
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**
Please refer to [Column Layout (Column Grouping)](/guides/column/layout).

```js
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);
```

---

### option

- The name of indicator has been changed to rowIndicator.
- The name of panel has been changed to groupPanel.
- selectOptions has been moved to the displayOptions subproperty.
- In the case of footers, new footers have been created in RealGrid2 to handle multifooters. Settings for the entire footer are specified through footers, and each individual footer is specified in the footer.
- FilterMode, sortMode, and hideDeleteRows in grid.options have been changed to be set directly on the grid object rather than set as options.

**RealGridJS**

```js
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**

```js
gridView.rowIndicator.visible = false; //gridView.setRowIndicator({visible: false}); Available
gridView.groupPanel.visible = false; //gridView.setGroupPanel({visible: false}); Available
gridView.displayOptions.selectionStyle = 'block'; //gridView.setDisplayOptions({selectionStyle: "block"}); Available
gridView.setFooters.visible = false;

gridView.hideDeletedRows = true;
gridView.sortMode = 'explicit';
gridView.filterMode = 'explicit';
```

---

### Row grouping

- When grouping rows, the position of specifying the group footer style and expression has been changed.

**RealGridJS**

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

**RealGrid2**

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

---

### Dynamic Styles

- RealGrid2 does not support the criteria method, which was difficult to use, but supports the function() type, which is intuitive to use.

---

#### Column Dynamic Styles

- Dynamically applying a style to only one specified column is called a column dynamic style.

**RealGridJS**
See [column.DynamicStyles](https://help.realgrid.com/tutorial/a32/).

```js
var columns = [
   {
     name: 'col3',
     fieldName: 'field3',
     header: {
       text: 'name',
     },
     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**
Please refer to [Column Dynamic Style](/guides/grid-style/column-dynamic-style).

```css
.red-column {
   background: #ff0000;
}
```

```js
var columns = [
   {
     name: 'col3',
     fieldName: 'field3',
     header: {
       text: 'name',
     },
     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

- Specifying styles for each row based on specific conditions is called row dynamic styling.
   Because RealGrid2 no longer uses the styles object, we use setRowStyleCallback() to dynamically style rows.

**RealGridJS**
See [body.DynamicStyles](https://help.realgrid.com/tutorial/a33/).

```js
gridView.setStyles({
   body: {
     dynamicStyles: function (grid, index) {
       var gender = grid.getValue(index.itemIndex, 'gender');

       if (gender == 'actor') {
         return {
           background: '#FF00000',
         };
       }
     },
   },
});
```

**RealGrid2**
Please refer to [row dynamic style](/guides/grid-style/row-dynamic-style).

```css
.red-color {
   background: #ff0000;
}
```

```js
gridView.setRowStyleCallback(function (grid, item, fixed) {
   var gender = grid.getValue(item.index, 'Gender');

   if (gender == 'female') {
     return 'red-color';
   }
});
```

---

#### Cell Dynamic Styles

- Assigning a style to a specific cell in the entire data cell area according to specific conditions is called a cell dynamic style.
   Since the styles object is no longer used in RealGrid2, use setCellStyleCallback() to dynamically style cells.

**RealGridJS**
See [body.CellDynamicStyles](https://help.realgrid.com/tutorial/a34/).

```js
gridView.setStyles({
   body:{
     cellDynamicStyles: function (grid, index, value) {
       var styles = {};

       if ((value == 'Female') or (value == 'Canada')) {
           styles.background = "#FF0000"
       }

       return styles;
     }
   }
});
```

**RealGrid2**

```css
.red-color {
   background: #ff0000;
}
```

```js
gridView.setCellStyleCallback(function(grid, dataCell) {
   var ret = {}

   if ((dataCell.value == 'Female') or (dataCell.value == 'Canada')){
     ret.styleName = 'red-color';
   }

   return ret;
})
```

---

### Renderer

---

#### Image Renderer

**RealGridJS**

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

**RealGrid2**

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

---

#### Icon Renderer

**RealGridJS**

http://demo.realgrid.com/Renderer/IconCellRenderer/

```js
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='Male'",
         styles: 'iconIndex=0',
       },
       {
         criteria: "value='female'",
         styles: 'iconIndex=1',
       },
     ],
   },
];
```

**RealGrid2**

[https://docs.realgrid.com/guides/renderer/icon-renderer](/guides/renderer/icon-renderer)

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

---

#### Geometry Renderer

**RealGridJS**

http://demo.realgrid.com/Renderer/ShapeCellRenderer

**RealGrid2**

[https://docs.realgrid.com/guides/renderer/shape-renderer](/guides/renderer/shape-renderer)

---

#### Link Renderer

**RealGridJS**

http://demo.realgrid.com/Renderer/LinkCellRenderer/

```js
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: 'address',
     },
     styleName: 'left-column',
   },
];
```

**RealGrid2**

[https://docs.realgrid.com/guides/renderer/link-renderer](/guides/renderer/link-renderer)

```js
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: 'address',
     },
     styleName: 'left-column',
   },
];
```

---

#### Image button renderer (multi-icon, multi-button)

- In the case of RealGridJS's multi-icon multi-button, it must be implemented with a custom renderer.

**RealGridJS**

http://demo.realgrid.com/Renderer/multiIconCellRenderer/

http://demo.realgrid.com/CellComponent/CellButton/

**RealGrid2**

[https://docs.realgrid.com/guides/renderer/custom-renderer-img-buttons](/guides/renderer/custom-renderer-img-buttons)

---

### Click event

- In RealGridJS, click events for each area existed separately, but in RealGrid2, many parts were integrated.
   Check out the differences in the link below.

**RealGridJS**

http://demo.realgrid.com/Event/RegionEvents/

**RealGrid2**

https://docs.realgrid.com/guides/events/click-event

### Dynamically change column width

**RealGridJS**

```js
gridView.setColumnProperty('colName', 'displayWidth', 100);

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

**RealGrid2**

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

---

###API

| RealGridJS | RealGrid2 |
| -------------------------------------------------- | ----------------------------------------------- |
| setPanel(), getPanel() | setGroupPanel(), getGroupPanel() |
| setIndicator(), getIndicator() | setRowIndicator(), getRowIndicator() |
| setSelectOptions(`{style: "block"}`) | displayOptions.selectStyle = "block" |
| setFooter.count | add setFooters() |
| EdgeMark | displayOptions.showChangeMarker |
| fitRowHeightAll() | change displayOptions.rowHeight = 0 |
| rowFocusOption, rowFocusVisible, rowFocusMask | Removed, unified rowFocusType |
| addCellStyle(), setCellStyle(), setCellStyles() | Remove, handle using styleCallbacks |
| getCellStyle(), getStyles(), getCellApplyStyles() | Remove |
| clearCellStyles() | Remove |
| renderer.type = "imageButton" | renderer.type = "button" |
| addImageList, registerImageList | Remove, use renderer.iconMap direct path |
| checkValidateCells() | validateCells() |
| getInvalidCellList() | validateCells() |
| updateStrictRow() | Remove, handle using updateRow() |
| subText | Replace with template |
| field.calculateExpression, field.calculateCallback | field.valueExpression, field.valueCallback |
| column.displayRegExp, column.displayReplace | Integrate with 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 handling |
| addCellRenderers | Removed, implemented with html renderer or customRenderer |

`※ For explanations and functions not included in the document, please contact the bulletin board or technical support team.`