Transition from RealGrid+ (FLASH) to RealGridJS

RealGrid+ was developed primarily to maintain compatibility with RealGridJS. Excluding some changes, even if only the creation and data loading parts are changed, the screen display will operate 100%.

A demo of RealGridJS can be found at http://demo.realgrid.com/ (opens in a new tab). RealGridJS guide documents can be found at http://help.realgrid.com/ (opens in a new tab).

Please go to https://help.realgrid.com/tutorial/ (opens in a new tab) to learn the basics.

Please also refer to the document below.

http://help.realgrid.com/tutorial/c11/ (opens in a new tab)

Important changes

RealGrid+ was a FLASH-based grid, but RealGridJS was developed as an HTML5 Canvas-based grid. Therefore, the browser you use must support HTML5 technology (IE9~edge, chrome, firefox, etc.) Although IE9 or higher is supported, for performance reasons, we recommend using at least IE11 and, if possible, the latest version of Chrome or Edge.

Changes

Required files

RealGrid+

<script type="text/javascript" src="/scripts/realgridplus.js"></script>
<script type="text/javascript" src="/scripts/realgridlic.js"></script>
<script type="text/javascript" src="/scripts/realgridutil.js"></script>
<script type="text/javascript" src="/scripts/swfobject.js"></script>

RealGridJS

The order of import is important. Be sure to specify it as shown in the example below.

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

Create grid

RealGrids.onload -> window.onload, changed to $(document).ready().
Avoid using setupGrid() to load Flash objects.
setRootContext() (opens in a new tab), which specifies the location of assets used in RealGridJS, has been added.
The class name has been changed from RealGrids -> RealGridJS.

RealGrid+

RealGrids.onload = function (id) {
   gridView = new RealGrids.GridView(id);
   dataProvider = new RealGrids.LocalDataProvider();
   gridView.setDataProvider(dataProvider);
 
   dataProvider.setFields([
     {
       fieldName: 'KorName',
       dataType: 'text',
     },
   ]);
   gridView.setColumns([
     {
       name: 'KorName',
       fieldName: 'KorName',
       type: 'data',
       width: '60',
       header: {
         text: 'name',
       },
     },
   ]);
};

RealGridJS

window.onload = function () {
   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',
       },
     },
   ]);
};

Load data

RealGrid+

dataProvider.loadData(
   {
     type: 'json',
     method: 'post',
     url: '../../DemoData/defaultdemodata.json?__time__=' + new Date().getTime(),
     progress: true,
   },
   function (provider) {
     grdView.setFocus();
   },
   function (provider, message) {}
);

RealGridJS

$.ajax({
   url: '../../DemoData/defaultdemodata.json?__time__=' + new Date().getTime(),
   success: function (data) {
     dataProvider.fillJsonData(data);
   },
   error: function (xhr, status, error) {},
   complete: function (data) {
     grdView.closeProgress();
     grdView.setFocus();
   },
   xhr: function () {
     var xhr = new window.XMLHttpRequest();
     //Download progress
     xhr.addEventListener(
       'progress',
       function(evt) {
         if (evt.lengthComputable) {
           grdView.setProgress(0, evt.total, evt.loaded);
         }
       },
       false
     );
     return xhr;
   },
});

Icon Renderer

The method of registering the image list has been changed.

RealGrid+

var imgList = new RealGrids.ImageList('images1');
imgList.rootUrl = 'http://' + location.host + '/imgs/';
imgList.images = ['man.png', 'woman.png'];
gridView.addImageList(imgList);
 
gridView.setColumns([
   {
     fieldName: 'fieldName',
     name: 'columnName',
     imageList: 'image1',
     renderer: { type: 'icon' },
     styles: [
       {
         iconIndex: 0,
         iconLocation: 'left',
       },
     ],
   },
]);

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);
 
gridView.setColumns([
   {
     fieldName: 'fieldName',
     name: 'columnName',
     imageList: 'image1',
     renderer: { type: 'icon' },
     styles: [
       {
         iconIndex: 0,
         iconLocation: 'left',
       },
     ],
   },
]);

###ContextMenu

The second Argument, label, has been changed to the MenuItem (opens in a new tab) object in RealGridJS.

RealGrid+

gridView.setContextMenu([
     {label:"Menu1"},
     {label:"Menu2"},
     ....
]);
....
gridView.onContextMenuItemClicked = function (grid, label, index) {
     alert("Context menu was clicked: " + label + "\n"+JSON.stringify(index));
 
     var selRow = dataProvider.getJsonRow(index.dataRow);
     console && console.log(selRow);
};

RealGridJS

gridView.setContextMenu([
     {label:"Menu1"},
     {label:"Menu2"},
     ....
]);
....
gridView.onContextMenuItemClicked = function (grid, data, index) {
     alert("Context menu was clicked: " + data.label + "\n"+JSON.stringify(index));
 
     var selRow = dataProvider.getJsonRow(index.dataRow);
     console && console.log(selRow);
};

###API

RealGrid+	RealGridJS
setupGrid()	X
setExternalWheelEvents()	X
X	setRootContext()
loadData()	fillJsonData(), fillCsvData(), fillXmlData()
addImageList()	registerImageList()

How do I do Excel Import?Transitioning from RealGridJS to RealGrid2