What would be the easiest way to import a (large) csv into grid?

[Zachary]

I have a large dataset that's not a .csv but in .csv format. How can I use it as the grid data source? It also has a lot of columns that will not be used in the grid, so I want to ignore those. 

[Pavithra Subramaniyam]

Hi Zachary,

To provide a solution, could you please share the below details this will be helpful for us to provide a better solution as early as possible.

1. Do you want to import an existing csv file or dynamically uploading file.
2. Is it possible to have a .net backend to convert the CSV file to JSON?
3. Or do you want to convert in client side only.

Regards,

Pavithra S

[Zachary]

It's an existing csv. Large datasets take up a lot more space when converted to json. Is there no way I can use a csv?

[Pavithra Subramaniyam]

Hi Zachary,

Thanks for your confirmation.

There is no default support for importing CSV data to the Grid. However, you can achieve your requirement by converting the local CSV to JSON and assign to the “grid.dataSource” property. Please refer to the below reference link for more information.

https://stackoverflow.com/questions/42809177/csv-to-json-in-typescript

https://stackoverflow.com/questions/27979002/convert-csv-data-into-json-format-using-javascript

https://stackoverflow.com/questions/8847766/how-to-convert-json-to-csv-format-and-store-in-a-variable

[Zachary]

Ok, I have converted my csv files into json. How can I use files as a datasource for the grid? (I will have constantly changing files, so I need to be able to call them by the file in the directory, not copy and paste them into the datasource field.)

[Pavithra Subramaniyam]

To use your data as a data source for the EJ2 grid, you'll need to convert it into an appropriate format that can be consumed by the grid (Object[], DataManager, result and count pair).

Here's an example of how to convert a CSV file to a JSON array that can be used as the data source for the EJ2 grid:

// Import the required modules

const fs = require('fs');

const csv = require('csvtojson');

const { DataManager } = require('@syncfusion/ej2-data');

 

// Read the CSV file and convert it to JSON

const csvFilePath = 'path/to/your/file.csv';

csv().fromFile(csvFilePath)

  .then((jsonData) => {

    

    // You can customize the JSON here and use the data as the data source for the EJ2 grid

    grid.dataSource = jsonData;

 

  });

 

In this example, we use the csvtojson module to read the CSV file and convert it to a JSON array.

[Zachary]

I don't have a CSV file anymore, it's all converted to JSON files now. I'm loading it in with an ajax request. Is this the recommended way to do it? It takes a long time to load these large datasets, is there any tips on how I can make it faster?

[Pavithra Subramaniyam]

Hi Zachary,

Yes, In EJ2 grid there is no default way to import the CSV or JSON files to the Grid. You need to load the files, get the data from them, and set the grid “dataSource” property to view the data as the Grid. When you are rendering large number of records then Grid will take considerable time render whole records in DOM and it leads performance issue. You can avoid this by using following feature (Paging, Virtualization, Infinite Scroll) of Grid which works based on on-demand concept and maintains current page records only in the DOM. It improves the Grid performance. 

** Paging ** 

Paging provides an option to display Grid data in page segments. To enable paging, set the allowPaging to true. When paging is enabled, pager component renders at the bottom of the grid. Paging options can be configured through the pageSettings. 

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/pager-dropdown.html

Doc: https://ej2.syncfusion.com/javascript/documentation/grid/paging/

** Virtualization **   

If you want to load large amount data without using paging feature, you can use Virtualization feature. It allows you to load large amount of data without performance degradation. 

Row virtualization allows you to load and render rows only in content viewport. It is an alternative way of paging in which the data will load while scrolling vertically. To setup the row virtualization, you need to define enableVirtualization as true and content height by height property. 

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/virtual-scrolling.html

Doc: https://ej2.syncfusion.com/javascript/documentation/grid/virtual-scroll/

** Infinite Scrolling ** 

Infinite scrolling is used to load a huge amount of data without degrading the Grid performance. This feature works like the lazy loading concept, which means the buffer data is loaded only when the scrollbar reaches the end of the scroller. 

To enable Infinite scrolling, set enableInfiniteScrolling property as true. 

Demo: https://ej2.syncfusion.com/javascript/demos/#/bootstrap5/grid/infinite-scrolling.html

Doc: https://ej2.syncfusion.com/javascript/documentation/grid/infinite-scroll/

Regards,

Pavithra S