🧐 FAQ
Transitioning from RealGridJS to RealGrid2

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.

Changes

Required files

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>

Create grid

  • setRootContext() is not used.
  • The class name has been changed from 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: 'name',
     },
   },
]);

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: '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.

RealGridJS

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

.number-column {
   text-align: right;
   background: #ff0000;
}
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 (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 Please refer to Column Layout (Column Grouping).

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

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}); 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

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

RealGrid2

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 (opens in a new tab).

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.

.red-column {
   background: #ff0000;
}
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 (opens in a new tab).

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.

.red-color {
   background: #ff0000;
}
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 (opens in a new tab).

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

RealGrid2

.red-color {
   background: #ff0000;
}
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

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',
     },
   },
];

Icon Renderer

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

RealGrid2

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

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 (opens in a new tab)

RealGrid2

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

Link 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: 'address',
     },
     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: '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/ (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

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/ (opens in a new tab)

RealGrid2

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

Dynamically change column width

RealGridJS

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

RealGrid2

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

###API

RealGridJSRealGrid2
setPanel(), getPanel()setGroupPanel(), getGroupPanel()
setIndicator(), getIndicator()setRowIndicator(), getRowIndicator()
setSelectOptions({style: "block"})displayOptions.selectStyle = "block"
setFooter.countadd setFooters()
EdgeMarkdisplayOptions.showChangeMarker
fitRowHeightAll()change displayOptions.rowHeight = 0
rowFocusOption, rowFocusVisible, rowFocusMaskRemoved, unified rowFocusType
addCellStyle(), setCellStyle(), setCellStyles()Remove, handle using styleCallbacks
getCellStyle(), getStyles(), getCellApplyStyles()Remove
clearCellStyles()Remove
renderer.type = "imageButton"renderer.type = "button"
addImageList, registerImageListRemove, use renderer.iconMap direct path
checkValidateCells()validateCells()
getInvalidCellList()validateCells()
updateStrictRow()Remove, handle using updateRow()
subTextReplace with template
field.calculateExpression, field.calculateCallbackfield.valueExpression, field.valueCallback
column.displayRegExp, column.displayReplaceIntegrate 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)
onTopItemIndexChangedonTopIndexChanged
onLinkableCellClickedrenderer.urlCallback handling
addCellRenderersRemoved, implemented with html renderer or customRenderer

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

Transitioning from RealGrid+ to RealGridJSRealGrid2 Basic with JAVA Spring & MyBatis & MARIADB