# 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/.
RealGridJS guide documents can be found at http://help.realgrid.com/.

Please go to https://help.realgrid.com/tutorial/ to learn the basics.

Please also refer to the document below.

http://help.realgrid.com/tutorial/c11/

## 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+**

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

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

---

### Create grid

- RealGrids.onload -> window.onload, changed to $(document).ready().
- Avoid using setupGrid() to load Flash objects.
- [setRootContext()](http://help.realgrid.com/api/RealGridJS/setRootContext/), which specifies the location of assets used in RealGridJS, has been added.
- The class name has been changed from RealGrids -> RealGridJS.

**RealGrid+**

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

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

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

**RealGridJS**

```js
$.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+**

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

```js
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](http://help.realgrid.com/api/types/MenuItem/) object in RealGridJS.

**RealGrid+**

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

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