
# Load bulk data

The dataset that is first displayed when creating a grid may exist as a static file on the server, or may be created and returned through a database query at the time of a URL request. The grid directly requests the server and converts the delivered Csv text into data rows and adds them to the internal dataset.

```js
const fields = [
  { fieldName: "ItemId" },
  { fieldName: "ItemName" },
  { fieldName: "RequestType" },
  { fieldName: "ServiceName" },
  { fieldName: "ServiceCode" },
  { fieldName: "Standard" },
  { fieldName: "LowBounds" },
  { fieldName: "Lowwhengn" },
  { fieldName: "Highwhengn" },
  { fieldName: "HighBounds" },
  { fieldName: "CheckUnit" },
  { fieldName: "CheckPrice", dataType: "number" }
];

const columns = [
  { fieldName: "ItemId", width: 80, header: { text: "ItemId" } },
  { fieldName: "ItemName", width: 100, header: { text: "Item Name" } },
  { fieldName: "RequestType", width: 80, header: { text: "Category" } },
  { fieldName: "ServiceName", width: 150, header: { text: "Type Name" } },
  { fieldName: "ServiceCode", width: 150, header: { text: "Service Code" } },
  { fieldName: "Standard", width: 150, header: { text: "Standard" } },
  { fieldName: "LowBounds", width: 120, header: { text: "Lower Value" } },
  { fieldName: "HighBounds", width: 80, header: { text: "Upper Value" } },
  { fieldName: "CheckUnit", width: 80, header: { text: "Unit" } },
  { fieldName: "CheckPrice", width: 90, header: { text: "Fee" } }
];

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
  }
}, {
  fields
});

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

function btnLargeLoadData() {
  const showLoadingCheckbox = document.getElementById("showLoading");
  if (showLoadingCheckbox && showLoadingCheckbox.checked) {
    gridView.showLoading();
  }

  const now = new Date();
  fetch('/data/en/TooLargeDataSet.csv')
    .then(response => response.text())
    .then(csvData => {
      dataProvider.fillCsvData(csvData, {});
      gridView.closeLoading();

      const endDate = new Date();
      const dataTime = endDate.getTime() - now.getTime();
      const ellapseElement = document.getElementById("ellapse");
      if (ellapseElement) {
        ellapseElement.innerHTML = dataProvider.getRowCount() + " items output time: " + dataTime + " ms";
      }
    })
    .catch(err => {
      console.error(err);
      gridView.closeLoading();
    });
}
```

#### Bulk data

Load 500,000 data in csv format. RealGrid has no row limit. However, since data can be processed within the browser's operating memory range,  
If the size of the loaded data is large, the available memory of the browser decreases, so although it may vary depending on the individual usage environment, it is necessary to load a large amount of data multiple times.  
If imported, it may cause performance degradation or unresponsive errors due to browser memory pooling.  

Processing large amounts of data is not just a client problem; it is also important whether the server can handle large queries.  
The amount may need to be limited depending on the nature and circumstances of the project.  
 
```js
document.getElementById("btnLargeLoadData").disabled = true;
if(document.getElementById("showProgressbar").checked){
     gridView.showLoading();
}

var now = new Date();
$.ajax({
     url: "/data/TooLargeDataSet.csv",
     success: function (data) {
         dataProvider.fillCsvData(data, {});
         gridView.closeLoading();

         var endDate = new Date();
         var dataTime = endDate.getTime() - now.getTime();
         document.getElementById("ellapse").innerHTML = dataProvider.getRowCount() + "Time spent on output: " + dataTime + " ms";
     },
     error: function (xhr, status, error) {
     },
     complete: function (data) {

     },
     xhr: function () {
         var xhr = new window.XMLHttpRequest();
         return xhr;
     }
});
```