Exporting Data

ZingGrid allows you to export your grid data through our API method getData(), which can be customized to fit your data export needs.

Data

To retrieve data from the grid, use the getData() method, which will return the contents of the data attribute defined in <zing-grid>. The exported data will be in JSON format by default.

getData() Grid

Here is a complete grid which calls the getData() method and prints its return to the console:

CSV

To retrieve data as comma-separated values, use the getData({csv:true}) method.

getData({csv:true}) Grid

Here is a complete grid which calls the getData() method and prints its return to the console as comma-separated values:

Include Header Info

To retrieve data with header info included, use the getData({headers:true}) method.

getData({headers:true}) Grid

Here is a complete grid which calls the getData() method and prints its return to the console with header information included:

Include Only Visible Columns

If your grid has hidden columns, using getData() or getData({cols:"all"}) will return all data, including anything that is hidden. To retrieve data from only the visible columns, use the getData({cols:"visible"}) method.

Visible Columns Data Grid

Here is a complete grid which calls the getData() method and prints its return to the console with only the data from columns that are visible on the grid:

Selected Data

Use the API event grid:select (grabs data when dragging and highlighting) in conjunction with getData() to export only selected data.

Selected Data Grid

Here is a complete grid which calls the getData() method with the grid:select event to export selected data:

Related Resources

Here are some extra resources related to this feature to help with creating your grid:

• getData() API Method
• API Events List