Export Selected Rows from Grid to JSON

IntegralUI Grid component comes with built-in functionality that allows you to export grid data in full or partially to JSON or CSV format. When exporting grid data in full, it is straightforward, you don't need to specify any parameters just call the exporting method. On the other hand, when exporting partial data from the grid, you need to specify columns or rows that you want to export.

Here you will learn how to export only rows that are currently selected in the Grid to JSON format. A sample code below is available in JavaScript, Angular, React and Vue that shows how to export selected rows from the grid to JSON.

As demo above shows, Grid is populated with some data. When pressing the Export button on the right, the container will show the data in JSON format that has been exported. Try to select different multiple rows by holding CTRL or SHIFT key and clicking on grid rows, and export it to see the result in the container.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

How to Export Selected Rows from the Grid

First, let us examine the method that is available for exporting data from the Grid. In case of JSON, the method signature is like this:

exportToJSON(data, columnFields, rowFields, spacing)

Where parameters are:

• data - an object that contains specific columns and/or rows that needs to be exported
• columnFields - an object that contains the names of column fields that needs to be exported
• rowFields - an object that contains the names of row fields that needs to be exported
• spacing - specifies blank space characters to separate the exported data objects

Here all parameters are optional. If they are not set, it exports the grid data in whole with all object fields for columns, rows and cells.

If want to export partial data, like only columns that are visible excluding all hidden columns, or rows that are checked or currently selected, you just need to specify the data parameter that will contain those columns or rows you want to export.

Because column and row used by the Grid can have many fields, including custom fields if you are using custom data source, the columnFields and rowFields parameters allows you to specify which object fields you want to export.

For example, let say you want to export only selected rows from the Grid. Furthermore, the exported data should only contain basic information, like cid (that's column id), text and value fields.

• JavaScript
• Angular
• React
• Vue

In code above, at first we are using getList method to retrieve a list of currently selected rows in the grid. Then exportToJSON method is called where data is specified with selected rows, no need for column fields, and rowFields are specified so that only basic information is exported. As a result, the export method returns a JSON string that appears in the container.

To select different rows hold the CTRL or SHIFT keys are click on grid rows. Depending on which rows are currently selected, clicking the export button will only partially export the grid data, including only selected ones with specified parameters for row fields.

Conclusion

Exporting data in IntegralUI Grid component to JSON is done with a built-in method that allows you to export grid data in full or partially. You can specify what kind of data you want to export, like specific columns or rows, with only partial set of fields included in the result. This is very helpful when grid data contains hundreds or even thousands of records, but you want to export only small number of them.

IntegralUI Web is a suite of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.