Revolist vue3-datagrid no way to export to CSV?

[Zainzzkk]

I have attempted to look at the docs and find a way to export to csv.

I am using Vue CLI and "@revolist/vue3-datagrid": "^3.0.97".

I can see no way to implement "exporting="true"" when using <vgrid .... />

Is there a way to do this? or is it not supported?

[Buroni]

You can do it by finding the export plugin via revoGridElement.getPlugins. See here for example https://codesandbox.io/s/revo-grid-vue3-forked-oibx2h

[DavidCF98]

You can do it by finding the export plugin via revoGridElement.getPlugins. See here for example https://codesandbox.io/s/revo-grid-vue3-forked-oibx2h

Hello!

I'm trying this but I'm getting an error with revoEl.getPlugins() because it says that "Property 'getPlugins' does not exist on type 'Element'.

Export works fine but I can't do yarn build because of that error / warning, any suggestions or fix?

Thank you!

[Buroni]

Hey @DavidCF98 you can cast it to the correct type:

(revoEl as HTMLRevoGridElement).getPlugins();

[DavidCF98]

Sorry to bother you again.

Now it tells me: Cannot find name 'HTMLRevoGridElement'... Am I doing something wrong?

Thanks again!

[Buroni]

No problem! HTMLRevoGridElement should be available as a global interface if you're using the revogrid library. But if you're having trouble, you can also just cast to any:

(revoEl as any).getPlugins();

[DavidCF98]

Now it works fine! Thank you so much for help! 👍

[iwo-strzebonski]

You can do it by finding the export plugin via revoGridElement.getPlugins. See here for example https://codesandbox.io/s/revo-grid-vue3-forked-oibx2h

instead of Timeout in mounted() you can just use async mounted():

export default {
  //  Rest of code goes here...
  async mounted() {
    const grid = document.querySelector('revo-grid') as HTMLRevoGridElement
    this.exportPlugin = (await grid.getPlugins()).find((plugin) => 'exportFile' in plugin)
  },
  //  Rest of code goes here...
}

or declare an async function inside of mounted():

export default {
  //  Rest of code goes here...
  mounted() {
    const getExportPlugin = async () => {
      const grid = document.querySelector('revo-grid') as HTMLRevoGridElement
      this.exportPlugin = (await grid.getPlugins()).find((plugin) => 'exportFile' in plugin)
    }

    getExportPlugin()
  },
  //  Rest of code goes here...
}

No need for setTimeout() or for-of loops 😉.

Additionally, ESLint says that the globally declared type doesn't exist, so here's a hack - add the following line on top of the script:

/* global HTMLRevoGridElement:readonly */