
# onDataLoadComplated event

This event is called after the renderer is completed.

The onDataLoadComplated event occurs only once after data retrieval and data initialization are completed.

```js
const fields = [
  { fieldName: 'KorName', dataType: 'text' },
  { fieldName: 'Gender', dataType: 'text' },
  { fieldName: 'Age', dataType: 'number' },
  { fieldName: 'Phone', dataType: 'text' },
  { fieldName: 'ProductId', dataType: 'text' },
  { fieldName: 'KorCountry', dataType: 'text' },
  { fieldName: 'OrderDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'CardNumber', dataType: 'text' },
  { fieldName: 'Monetary', dataType: 'text' },
  { fieldName: 'StartDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'EndDate', dataType: 'datetime', datetimeFormat: 'yyyy-MM-dd', amText: 'AM', pmText: 'PM' },
  { fieldName: 'ToMonth', dataType: 'number' },
  { fieldName: 'Month', dataType: 'number' },
  { fieldName: 'Year', dataType: 'number' },
  { fieldName: 'InterestRate', dataType: 'number' },
  { fieldName: 'SaveCost', dataType: 'number' },
  { fieldName: 'SaveMaturity', dataType: 'number' },
  { fieldName: 'CurrentSave', dataType: 'number' }
];

const columns = [
  { name: 'KorName', fieldName: 'KorName', width: '60', header: { text: 'Name' } },
  { name: 'Gender', fieldName: 'Gender', width: '40', header: { text: 'Gender' } },
  { name: 'Age', fieldName: 'Age', width: '40', header: { text: 'Age' }, styleName: 'right-column' },
  { name: 'Phone', fieldName: 'Phone', width: '100', header: { text: 'Phone' } },
  { name: 'ProductId', fieldName: 'ProductId', width: '120', header: { text: 'Product ID' } },
  { name: 'KorCountry', fieldName: 'KorCountry', width: '100', header: { text: 'Investment Country' } },
  { name: 'OrderDate', fieldName: 'OrderDate', width: '100', header: { text: 'Order Date' } },
  { name: 'CardNumber', fieldName: 'CardNumber', width: '140', header: { text: 'Card Number' } },
  { name: 'Monetary', fieldName: 'Monetary', width: '40', header: { text: 'Currency' } },
  { name: 'StartDate', fieldName: 'StartDate', width: '100', header: { text: 'First Payment Date' } },
  { name: 'EndDate', fieldName: 'EndDate', width: '100', header: { text: 'End Date' } },
  { name: 'ToMonth', fieldName: 'ToMonth', width: '50', header: { text: 'Payment Count' }, styleName: 'right-column' },
  { name: 'Month', fieldName: 'Month', width: '50', header: { text: 'Remaining Count' }, styleName: 'right-column' },
  { name: 'InterestRate', fieldName: 'InterestRate', width: '50', numberFormat: '0.00', header: { text: 'Interest Rate' }, styleName: 'right-column' },
  { name: 'SaveCost', fieldName: 'SaveCost', width: '80', numberFormat: '#,##0', header: { text: 'Payment Amount' }, styleName: 'right-column' },
  { name: 'SaveMaturity', fieldName: 'SaveMaturity', width: '80', numberFormat: '#,##0', header: { text: 'Maturity Amount' }, styleName: 'right-column' },
  { name: 'CurrentSave', fieldName: 'CurrentSave', width: '80', numberFormat: '#,##0', header: { text: 'Current Balance' }, styleName: 'right-column' }
];

const { gridView, dataProvider } = RealGrid.createGrid('realgrid', {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: 'No data to display.'
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onDataLoadComplated: (grid) => {
    alert('onDataLoadComplated Event fired. Row Count: ' + dataProvider.getRowCount());
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

window.fillJsonData = function() {
  const data = [
    {
      KorName: 'Park Young-ho',
      Gender: 'M',
      Age: '71',
      Phone: '(025)6563-2802',
      ProductId: '198160731-00008',
      KorCountry: 'Mozambique',
      OrderDate: '2021-01-16',
      CardNumber: '5587-2139-9692-3644',
      Monetary: 'EUR',
      StartDate: '2018-02-25',
      EndDate: '2021-08-12',
      ToMonth: '23',
      Month: '41',
      Year: '3',
      InterestRate: '0.15',
      SaveCost: '51000',
      SaveMaturity: '14950650',
      CurrentSave: '9304950'
    },
    {
      KorName: 'Jo Il-hyeong',
      Gender: 'M',
      Age: '62',
      Phone: '(093)8809-8696',
      ProductId: '571215854-00001',
      KorCountry: 'Canada',
      OrderDate: '2019-07-29',
      CardNumber: '5348-5093-3750-0623',
      Monetary: 'USD',
      StartDate: '2019-10-21',
      EndDate: '2022-12-11',
      ToMonth: '3',
      Month: '37',
      Year: '3',
      InterestRate: '0.38',
      SaveCost: '14000',
      SaveMaturity: '7801080',
      CurrentSave: '1108520'
    }
  ];

  dataProvider.fillJsonData(data, { fillMode: 'set' });
};

window.clearRows = function() {
  dataProvider.clearRows();
};
```

```js
function setGridEvent(){
   gridView.onDataLoadComplated = function(grid){
     alert("onDataLoadComplated event occurred. Number of rows: " + dataProvider.getRowCount())
   }
}
```